Що робить (функція ($) {}) (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 мені здається найелегантнішим, але я хотів би дізнатися і про інших.

По-перше, блок коду, який виглядає, - (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, він робить те саме, що відбувається лише в більшій кількості операцій і безладу.