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

Question

好吧,我想我 在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!

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

Answer 2

两种方式几乎完全相同.但是,在以下方面存在一些细微差别 -

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的每次出现更可取.