Что делает (функция ($) {}) (jQuery); средний?
Я только начинаю с записью плагинов jQuery. Я записал три маленьких плагина, но я просто копировал строку во все свои плагины, на самом деле не зная то, что это означает. Кто-то может сказать мне немного больше о них? Возможно, объяснение пригодится когда-нибудь при записи платформы :)
Что это делает? (Я знаю, что это расширяет jQuery так или иначе, но является там чем-либо еще интересным для знания об этом),
(function($) {
})(jQuery);
Что является различием между следующими двумя способами записать плагин:
Тип 1:
(function($) {
$.fn.jPluginName = {
},
$.fn.jPluginName.defaults = {
}
})(jQuery);
Тип 2:
(function($) {
$.jPluginName = {
}
})(jQuery);
Тип 3:
(function($){
//Attach this new method to jQuery
$.fn.extend({
var defaults = {
}
var options = $.extend(defaults, options);
//This is where you write your plugin's name
pluginname: function() {
//Iterate over the current set of matched elements
return this.each(function() {
//code to be inserted here
});
}
});
})(jQuery);
Я мог быть путем прочь здесь, и возможно все означают то же самое. Я смущен. В некоторых случаях это, кажется, не работает в плагине, что я писал Тип 1 использования. До сих пор Тип 3 кажется самым изящным мне, но я хотел бы знать о других также.
3 ответа
Во-первых, блок кода, который выглядит как (function(){})() - это просто функция, которая выполняется на месте. Давайте немного разобьем его на части.
1. (
2. function(){}
3. )
4. ()
Строка 2 - это обычная функция, заключенная в круглые скобки, чтобы указать среде выполнения вернуть функцию в родительскую область видимости, после возврата функция выполняется с помощью строки 4, возможно, чтение этих шагов поможет
1. function(){ .. }
2. (1)
3. 2()
Вы видите, что 1 - это объявление, 2 - возврат функции, а 3 - просто выполнение функции.
Пример того, как это может быть использовано.
(function(doc){
doc.location = '/';
})(document);//This is passed into the function above
Что касается других вопросов о плагинах:
Тип 1: Это не совсем плагин, это объект, переданный как функция, поскольку плагины обычно являются функциями.
Тип 2: Это опять же не плагин, поскольку он не расширяет объект $.fn. Это просто расширение ядра jQuery, хотя результат тот же. Это нужно, если вы хотите добавить функции обхода, такие как toArray и так далее.
Тип 3: Это лучший метод добавления плагина, расширенный прототип jQuery берет объект, содержащий имя и функцию вашего плагина, и добавляет его в библиотеку плагинов для вас.
На самом базовом уровне нечто вида (function () {...}) () - это функциональный литерал, который выполняется немедленно. Это означает, что вы определили функцию и немедленно ее вызываете.
Эта форма полезна для сокрытия и инкапсуляции информации, поскольку все, что вы определяете внутри этой функции, остается локальным для этой функции и недоступным из внешнего мира (если вы специально не раскрываете это - обычно через возвращаемый литерал объекта).
Вариантом этой базовой формы является то, что вы видите в плагинах jQuery (или в этом шаблоне модуля в целом). Следовательно:
(function($) {
...
})(jQuery);
Это означает, что вы передаете ссылку на фактический объект jQuery , но он известен как $ в рамках функционального литерала.
Тип 1 на самом деле не является плагином. Вы просто назначаете литерал объекта jQuery.fn . Обычно вы назначаете функцию jQuery.fn , поскольку плагины обычно являются просто функциями.
Тип 2 аналогичен Типу 1; на самом деле вы здесь не создаете плагин. Вы просто добавляете литерал объекта в jQuery.fn .
Тип 3 - это плагин, но это не лучший и не самый простой способ его создания.
Чтобы понять это подробнее, взгляните на аналогичный вопрос и ответ . Кроме того, эта страница содержит некоторые подробности о создании плагинов.
Тип 3, чтобы работать, должен был выглядеть так:
(function($){
//Attach this new method to jQuery
$.fn.extend({
//This is where you write your plugin's name
'pluginname': function(_options) {
// Put defaults inline, no need for another variable...
var options = $.extend({
'defaults': "go here..."
}, _options);
//Iterate over the current set of matched elements
return this.each(function() {
//code to be inserted here
});
}
});
})(jQuery);
Я не уверен, почему кто-то может использовать расширение, просто устанавливая свойство в прототипе jQuery, он делает то же самое, только в большем количестве операций и еще больше беспорядка.