两种jQuery extend方式有何不同？

Question

我正在编写一些jQuery插件，我对它们进行了扩展，但我不知道为什么：

方法1

(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,
    .....});

为每个插件做什么。有人能帮我吗？

- Phong Thai

---

如果我没记错的话，你应该使用 #2 调用 $.myplugin("myplugin2").myplugin3()。 - John Dvorak

是的，没错；或者有一种方法可以编写＃1，但对所有插件只扩展1次。 - Phong Thai

你需要一个 $.myPlugin 版本吗？你可以使用 $("<div>").myPlugin 并且只扩展 $.fn 吗？ - Matt Zeunert

Answer 1

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

#1 还将插件添加到所有 jQuery 元素对象中，当你调用 $ 函数时，你会得到这些对象：$("#selector")。

你的插件可能返回一个 jQuery 元素对象。所以首先使用 $.pluginName，然后在接下来的代码中调用 $.fn.pluginName。你无法链式调用 #2，因为 $.fn.pluginName 未定义。

当你了解到 $.fn 是 $.prototype 的别名时，这将更有意义。（原型函数是 $() 的所有返回值的成员 - 在后台使用 new 关键字。）

---

你可以创建一个包含所有插件的对象来简化你的代码：

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

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

- Matt Zeunert

---

非常感谢您的澄清，但是您提供的代码并不是我需要的最佳方案。如果使用它，我将不得不为每个插件输入两行代码。我只想编写一个插件，然后自动扩展它，就像第二种方法一样。 - Phong Thai

啊，我没有仔细阅读，也许你的建议在这个时候更好，非常感谢。 - Phong Thai

Answer 2

$.fn.myplugin = function() {} 允许你在一个 jQuery 对象上调用你的函数，像这样：

$("something").myplugin()

相反，

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

使得你可以这样调用函数：

$.myplugin()

在你的第一个例子中，你同时执行了这两个操作。第二个例子只执行了第二个操作。

- James Montagne