Что делает (function ($) {}) (jQuery); имею в виду?

Question

Я только начинаю с написания плагинов 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 казался мне наиболее элегантным, но я хотел бы знать об остальных а также.

Answer 1

Во-первых, блок кода, который выглядит как (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 берет объект, содержащий имя и функцию вашего плагина, и добавляет его в библиотеку плагинов.

Answer 2

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

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

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

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

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

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

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

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

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

Answer 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);

Answer 4

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

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

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

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

Answer 5

Тип 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, оно делает то же самое, только с большим количеством операций и большим количеством беспорядка.

Answer 6

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

// 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