18

好的，我想我得到 了 jQuery.extend 和 jQuery.fn.extend 之间的区别？

因为通用扩展可以扩展任何对象，并且 fn.extend 用于插件函数，可以使用一些内部 jquery voodoo 直接从 jquery 对象调用。

所以看起来人们会以不同的方式调用它们。如果您使用通用扩展通过添加函数 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！

4

2 回答 2

28

它们之间有非常细微的区别。性能方面（不是说这是一个问题），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(){ }
});
于 2010-04-09T18:42:19.357 回答
6

两种方式几乎相同。但是，在以下方面存在一些小的差异 -

  1. 速度
  2. 代码风格
  3. 在别处命名你的插件

速度：

微不足道。您可能会忽略这一方面，因为您不太可能注意到两者之间的性能差异。

代码风格：

扩展版本遵循 Object 文字代码样式，这对某些人来说可能看起来更优雅一些。例如，如果您的插件大量使用 Object 字面量，您可能更喜欢使用 $.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 var。这可能比更改插件代码中每次出现的myPluginName 更好。

于 2012-06-12T19:01:53.213 回答