Что делает (function ($) {}) (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 name
        pluginname: function() {

            //Iterate over the current set of matched elements
            return this.each(function() {

                //code to be inserted here

            });
        }
    }); 
})(jQuery);

Я мог бы быть здесь, и, возможно, все это означает то же самое. Я запутался. В некоторых случаях этот, похоже, не работает в плагине, который я писал с использованием Type 1. До сих пор Type 3 кажется самым элегантным для меня, но я хотел бы узнать о другие также.

ОТВЕТЫ

Ответ 1

Во-первых, блок кода, который выглядит как (function(){})(), является просто функцией, которая выполняется на месте. Пусть немного сломается.

1. (
2.    function(){}
3. )
4. ()

Строка 2 - простая функция, завернутая в круглые скобки, чтобы сообщить runtime вернуть функцию в родительскую область, как только она вернется, функция выполняется с использованием строки 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 принимает объект с вашим именем и функцией плагина и добавляет его в библиотеку плагинов для вас.

Ответ 2

На самом базовом уровне что-то из формы (function(){...})() является литералом функции, который выполняется немедленно. Это означает, что вы определили функцию, и вы вызываете ее немедленно.

Эта форма полезна для скрытия информации и инкапсуляции, так как все, что вы определяете внутри этой функции, остается локальным для этой функции и недоступным из внешнего мира (если только вы специально не раскрываете его - обычно через возвращаемый объектный литерал).

Вариант этой базовой формы - это то, что вы видите в плагинах jQuery (или в этом модуле в целом). Следовательно:

(function($) {
  ...
})(jQuery);

Это означает, что вы передаете ссылку на фактический объект jQuery, но он известен как $ в пределах объема литерала функции.

Тип 1 на самом деле не является плагином. Вы просто присваиваете объектный литерал jQuery.fn. Обычно вы назначаете функцию jQuery.fn, поскольку плагины обычно являются просто функциями.

Тип 2 аналогичен типу 1; вы на самом деле не создаете плагин здесь. Вы просто добавляете литерал объекта к jQuery.fn.

Тип 3 - это плагин, но это не лучший или простой способ его создания.

Чтобы узнать больше об этом, посмотрите на этот похожий question и ответ. Кроме того, эта страница подробно рассказывает о создании плагинов.

Ответ 3

Небольшая помощь:

// an anonymous function
  
(function () { console.log('allo') });

// a self invoked anonymous function

(function () { console.log('allo') })();
  
// a self invoked anonymous function with a parameter called "$"
  
var jQuery = 'I\'m not jQuery.';

(function ($) { console.log($) })(jQuery);

Ответ 4

Просто небольшое дополнение к объяснению

Эта структура (function() {})(); называется IIFE (выражение немедленного вызова функции), она будет выполнена немедленно, когда интерпретатор достигнет этой строки. Поэтому, когда вы пишете эти строки:

(function($) {
  // do something
})(jQuery);

это означает, что интерпретатор немедленно вызовет функцию и передаст jQuery в качестве параметра, который будет использоваться внутри функции как $.

Ответ 5

Тип 3, чтобы работать, должен выглядеть следующим образом:

(function($){
    //Attach this new method to jQuery
    $.fn.extend({     
        //This is where you write your plugin 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, он делает то же самое точно только в более операциях и более беспорядочном.

Ответ 6

На самом деле этот пример помог мне понять, что означает (function($) {})(jQuery);?

Учтите это:

// Clousure declaration (aka anonymous function)
var $f = function (x) { return x*x; };
// And use of it
console.log($f(2)); // Gives: 4

// An inline version (immediately invoked)
console.log((function (x) { return x*x; })(2)); // Gives: 4

А теперь:

jQuery является переменной, содержащей объект jQuery.
$ - это имя переменной, как и любое другое (a, $b, a$b и т.д., И оно не имеет какого-либо специального значения, как в PHP).

var $f = function ($) { return $*$; };
var jQuery = 2;
console.log($f(jQuery)); // Gives: 4

// An inline version
console.log((function ($) { return $*$; })(jQuery)); // Gives: 4