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