了解 jQuery 插件开发模式

Question

根据jQuery plugin authoring guidelines，一个基本的插件结构应该是这样的：

(function($){

  $.fn.myPlugin = function( options ) {  

    return this.each(function() {

      // Do something...

    });
  };
})( jQuery );

然而，我在检查过的几个 jQuery 插件中看到了以下模式：

(function($){
        $.extend($.fn, {
            myPlugin: function( options ) {

                $(this).each( function() {
                    // Do something
                });
        },
    })
})(jQuery);

有人可以解释第二种方法吗？$.extend(... 和对象符号是什么？

谢谢-

Answer 1

这两者基本上完成了相同的任务，但方式略有不同。

$.fn.myPlugin = … 直接将函数分配到 jQuery 命名空间中您想要的位置。

$.extend($.fn, {myPlugin:… 是扩展 $.fn 对象，对象被指定为第二个参数。在这种情况下，对象只包含一个属性myPlugin，这是要添加的函数。

你可以使用任何一种结构，虽然我个人觉得第一种更简洁。

Answer 2

$.extend function 用于：

将两个或多个对象的内容合并到第一个对象中。

所以这个：

$.extend($.fn, { ... });

只是将对象文字的内容合并到$.fn。像这样使用$.extend 只是另一种进行正常/标准分配的方式：

$.fn.myPlugin = ...