JQuery fn.extend({bla: function() {}} vs. jQuery.fn.bla

ОК, я думаю, что получаю Разница между jQuery.extend и jQuery.fn.extend?

в том, что общая протяженность может расширять любой объект, а fn.extend - для функций плагина, которые могут быть вызваны прямо из объекта jquery с некоторым внутренним jquery voodoo.

Итак, кажется, что они будут ссылаться на них иначе. Если вы используете general extend для расширения объекта obj, добавив функцию y, тогда метод будет прикрепляться к этому объекту obj.y(), но если вы используете fn.extend, тогда они прикрепите прямо к объекту jquery $.y().... Получил ли я это правильно, да или нет, и если нет, то в чем я ошибаюсь в своем понимании?

Теперь мой вопрос:

В книге, которую я читаю, выступают с помощью

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

но в документах он говорит

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

и я думаю, если бы вы хотели b, то это было бы

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

Являются ли эти функционально и эффективные эквиваленты, и если не в чем разница?

Большое спасибо. Я копаю jQuery!

Ответ 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(){ }
});

Ответ 2

Оба способа почти идентичны. Однако существуют небольшие различия в следующих аспектах:

Speed 
Стиль кода
Именование вашего плагина в другом месте

Скорость:

Незначительный. Вы можете игнорировать этот аспект, так как маловероятно, что вы заметите различия в производительности между ними.

Стиль кода:

расширенная версия придерживается стиля символа Object, который может показаться немного более изящным для некоторых. Например, если ваш плагин использует литерал Object в изобилии, вы можете предпочесть его обертывание с помощью $.extend({}).

Именование вашего плагина в другом месте:

Есть еще одно (значительное, на мой взгляд) преимущество в использовании стиля $.fn.a - вы можете сохранить свое имя плагина в другом месте, где угодно в своем коде, а затем использовать его ссылку при добавлении плагина в пространство имен jQuery. Это невозможно сделать при расширении с использованием литерала объекта. Это преимущество несколько отличается от длины вашего кода и количества вхождений имени плагина. Можно также утверждать, что средний кодер редко меняет имя своего плагина, и если он это сделает, в большинстве случаев это не займет много времени.

Пример:

;(function($) {

    // Declare your plugin 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 внутри кода плагина.