jQuery fn.extend ({bla: function(){}} 与 jQuery.fn.bla 的区别

Question

好的，我想我理解了 jQuery.extend 和 jQuery.fn.extend 的区别.

普通的 extend 可以扩展任何对象，而 fn.extend 则是用于插件函数，这些函数可以直接从 jQuery 对象调用，并带有一些内部 jQuery 魔法。

因此，它们似乎需要不同的调用方式。如果您使用普通的 extend 将函数 y 添加到对象 obj 中，则该方法会附加到该对象，即 obj.y()，但是如果您使用 fn.extend，则它们将直接附加到 jQuery 对象 $.y()... 我理解得对吗？如果不是，那么我的理解哪里出了问题？

现在轮到我的问题了：

我正在阅读的书推荐使用

jQuery.fn.extend({
    a: function() { },
    b: function() { }
});

语法，但文档中说

jQuery.fn.a = function() { };

我猜如果你也想要 b 的话，它应该是：

jQuery.fn.b = function() { };

这两个函数在功能和性能上是否等效，如果不是，它们有什么区别？

非常感谢。我正在深入研究jQuery！

- Colleen Kitchen

Answer 1

它们之间有非常微小的差异。就性能而言（虽然这不是问题），jQuery.fn.extend比直接声明函数像 jQuery.fn.foo = function(){ };会慢一些，但差别非常微不足道。

jQuery.fn.extend()允许您同时添加多个插件函数，并且根据您正在编写的插件类型，可能使您的代码看起来更加清晰。

---

jQuery.fn.a = function(){};
jQuery.fn.b = function(){};

完全相同。

jQuery.fn.extend({
  a: function(){ },
  b: function(){ }
});

- maček

Answer 2

两种方式几乎相同。然而，在以下方面存在一些小的差异——

1. 速度
2. 代码风格
3. 在其他地方命名插件

速度：

可以忽略。您可能不会注意到两者之间的性能差异，因此可以忽略此方面。

代码风格：

扩展版本遵循对象字面量代码风格，这对某些人来说可能更加优雅。例如，如果您的插件大量使用对象字面量，则可能更喜欢使用$.extend({})进行包装。

在其他地方命名插件：

使用$.fn.a样式还有另一个（在我看来比较重要）优点-您可以将插件的名称存储在其他任何位置的代码中，然后在向jQuery的命名空间添加插件时使用其引用。使用对象字面量进行扩展时无法执行此操作。这个优点相对于您的代码长度和插件名称出现的次数而言。有人可能会认为，平均程序员很少更改插件的名称，如果他确实这样做了，在大多数情况下也不需要太长时间。

例子：

;(function($) {

    // Declare your plugin's name here
    var PLUGIN_NS = 'myPluginName';

    // ... some arbitrary code here ...

    // The jQuery plugin hook
    $.fn[ PLUGIN_NS ] = function( args ) {

        if ( $.type(args) !== 'object' )
            var args = {};

        var options = $.extend({}, $.fn[ PLUGIN_NS ].defaults, args);

        // iterate over each matching element
        return this.each({
            var obj = $(this);

            // we can still use PLUGIN_NS inside the plugin
            obj.data( PLUGIN_NS+'Data' , args );

            // ... rest of plugin code ...
        });

    };

    // ----------------
    // PRIVATE defaults
    // ----------------

    var defaults = {
        foo: 1,
        bar: "bar"
    };

    // ------------------------------------------------------------
    // PUBLIC defaults
    // returns a copy of private defaults.
    // public methods cannot change the private defaults var.
    // ------------------------------------------------------------

    // we can use PLUGIN_NS outside the plugin too.
    $.fn[ PLUGIN_NS ].defaults = function() {
        return $.extend({}, defaults);
    };

})(jQuery);

现在我们可以这样调用插件和默认值：

$("div#myDiv").myPluginName({foo:2});
var originalFoo = $("div#myDiv").myPluginName.defaults().foo;

要更改插件的名称，请更改PLUGIN_NS变量。这可能比更改插件代码中每个出现的myPluginName更可取。

- The Merovingian

---

实际上，您需要使用“args”参数来覆盖默认值。 - Eduard