jquery - 两种jquery扩展方式有什么不同？

Question

我正在编写一些 jquery 插件，我扩展了这些，但我不知道为什么：

方法一

(function($){
    $.fn.myplugin = function() {}
})(jQuery);

$.extend({myplugin : $.fn.myplugin});

方法二

(function($){
    $.extend({
        myplugin: function() {}
    })
})(jQuery);

对于#1，我可以调用 $.myplugin().myplugin2().myplugin3();

但是对于#2，不能使用 $.myplugin().myplugin2(); 它显示 myplugin2 不是有效的功能

基本上我想写#2，因为我不必声明

$.extend({
    myplugin : $.fn.myplugin,
    myplugin2 : $.fn.myplugin2,
    .....});

对于每个插件。有人可以帮我吗？

score 1 · Accepted Answer

在这两种情况下，您都将函数添加到全局 jQuery 对象中，这样您就可以调用$.pluginName.

#1 还将插件添加到所有 jQuery 元素对象，您在调用$函数时获得的对象：$("#selector").

您的插件可能会返回一个 jQuery 元素对象。所以首先你使用$.pluginNameand 在你调用的代码中$.fn.pluginName。你不能用 #2 链接调用，因为$.fn.pluginName它是未定义的。

当您知道这$.fn是$.prototype. （原型函数是所有返回值的成员$()- 在后台使用new关键字。）

您可以使用所有插件创建一个对象以简化代码：

var plugins = {
    myPlugin: function(){},
    myPlugin2: function(){}
}

$.extend($, plugins);
$.extend($.fn, plugins);

score 1 · Accepted Answer

$.fn.myplugin = function() {}允许您在 jquery 对象上调用您的函数，如下所示：

$("something").myplugin()

然而

$.extend({
    myplugin: function() {}
})

使它成为这样你调用你的函数是这样的：

$.myplugin()

在您的第一个示例中，您正在执行这两项操作。第二个只是做第二个。

2 回答 2