Что делает (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's 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 кажется мне наиболее элегантным, но я хотел бы знать и о других.

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

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

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

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

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

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

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

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

На самом деле этот пример помог мне понять, что это (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 (immediately invoked)
console.log( (function($) { return $*$; })(jQuery) ); // Gives: 4

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