jQuery fn.extend ({bla: function () {}} против jQuery.fn.bla - PullRequest
18 голосов
/ 09 апреля 2010

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

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

Так что, кажется, их можно было бы вызвать по-другому. Если вы используете обычное расширение для расширения объекта 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!

Ответы [ 2 ]

28 голосов
/ 09 апреля 2010

Между ними очень тонкая разница.С точки зрения производительности (не в том, что это проблема), 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(){ }
});
6 голосов
/ 12 июня 2012

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

  1. Скорость
  2. Стиль кода
  3. Наименование вашего плагина в другом месте

Скорость :

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

Стиль кода :

расширенная версия придерживается стиля литерального кода 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 внутри кода плагина.

...