Я хотів би зрозуміти синтаксис плагіна jQuery

Question 1

На сайті jQuery перелічено основний синтаксис плагіна для jQuery таким:

(function( $ ){    
  $.fn.myPlugin = function() {      
    // there's no need to do $(this) because
    // "this" is already a jquery object

    // $(this) would be the same as $($('#element'));

    this.fadeIn('normal', function(){    
      // the this keyword is a DOM element    
    });    
  };
})( jQuery );

Я просто хотів би зрозуміти, що там відбувається з точки зору Javascript, тому що це, схоже, не відповідає жодному синтаксису, який я бачив, як JS робив раніше. Отже, ось мій список питань:

Якщо ви заміните функцію ($) ... на змінну, скажімо "функція_", синтаксис виглядає так:
```
 (the_function)( jQuery );
```
Що таке "(jQuery);" робиш? Чи справді потрібні дужки навколо функції_? Чому вони там? Чи є інший фрагмент коду, який ви можете надати подібний?
Починається з функції ($). Отже, це створення функції, яка, наскільки я можу зрозуміти, ніколи не буде запущена, з параметром $, який уже визначений? Що там відбувається?

Дякую за допомогу!

Question 2

function(x){ 
    x...
}

це просто функція без імені, яка приймає один аргумент, "x", і робить речі з x.

Замість 'x', що є загальним ім'ям змінної, ви можете використовувати $, яке є менш поширеним іменем змінної, але все ще легальним.

function($){ 
    $...
}

Я вкладу його в дужки, щоб переконатися, що він аналізується як вираз:

(function($){
    $....
})

Щоб викликати функцію, ви ставите () після неї зі списком аргументів. Наприклад, якби ми хотіли викликати цю функцію, що передає значення 3, $ми б зробили це:

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

Тільки для ударів, давайте викличемо цю функцію і передамо jQuery як змінну:

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

Це створює нову функцію, яка приймає один аргумент, а потім викликає цю функцію, передаючи jQuery як значення.

ЧОМУ?

Оскільки писати jQuery кожного разу, коли ви хочете щось робити з jQuery, це нудно.

ЧОМУ ПРОСТО НЕ ПИШИТИ $ = jQuery?

Тому що хтось інший міг би визначити $ як щось інше. Це гарантує, що будь-які інші значення $ перекриваються цим.

Question 3

(function( $ ){

})( jQuery );

Тобто самовиконання анонімної функції, яка використовує $в аргументі, щоб ви могли використовувати її ( $), а не jQueryвсередині цієї функції і не боячись конфліктувати з іншими бібліотеками, оскільки в інших бібліотеках теж $є особливе значення. Цей шаблон особливо корисний при написанні плагінів jQuery.

Ви можете написати будь-який символ там, а не $занадто:

(function(j){
  // can do something like 
  j.fn.function_name = function(x){};

})(jQuery);

Тут jбуде автоматично наздоганяти jQuery, вказаний в кінці (jQuery). Або ви можете повністю залишити аргумент, але тоді вам доведеться використовувати jQueryключове слово навколо, а $не все ще боячись зіткнення. Так $загортається в аргумент для короткої руки, щоб ви могли писати $замість того, щоб jQueryусе навколо всередині цієї функції.

Якщо ви навіть подивитесь на вихідний код jQuery, то побачите, що все перекинуто між собою:

(function( window, undefined ) {
  // jQuery code
})(window);

Це, як видно, також самовиконання анонімної функції з аргументами. window(І undefinedаргумент) створюється і відображається з глобальним windowоб'єктом в нижній частині (window). Це популярний шаблон у наші дні і має невеликий приріст швидкості, оскільки тут windowбуде розглянуто аргумент, а не глобальний windowоб'єкт, який наведено нижче.

Це $.fnоб’єкт jQuery, де ви створюєте свою нову функцію (яка також є об’єктом), або сам плагін, так що jQuery обгортає ваш плагін своїм $.fnоб’єктом та робить його доступним.

Цікаво, що я відповів на подібне запитання тут:

Синтаксис функції закриття JavaScript / jQuery

Ви також можете ознайомитися з цією статтею, щоб дізнатись більше про функції самовиконання, про які я писав:

Самовиконуючіся функції Javascript

Question 4

Основний синтаксис плагіна дозволяє використовувати $посилання на jQueryтіло вашого плагіна, незалежно від ідентифікації $на момент завантаження плагіна. Це запобігає конфлікту імен з іншими бібліотеками, зокрема прототипом.

Синтаксис визначає функцію, яка приймає параметр, відомий як, $тому ви можете посилатися на нього як $у тілі функції, а потім негайно викликати цю функцію, вводячи jQueryяк аргумент.

Це також допомагає не забруднювати глобальний простір імен (тому оголошення var myvar = 123;у вашому тілі плагіна раптово не визначатимуться window.myvar), але головна нібито мета полягає в тому, щоб дозволити вам використовувати те $місце, яке, $можливо, було перевизначено з тих пір.

Question 5

Ви маєте справу з анонімною функцією, що викликає себе там. Це як «найкраща практика» обернути плагін jQuery всередині такої функції, щоб переконатися, що $знак прив’язаний до jQueryоб’єкта.

Приклад:

(function(foo) {
    alert(foo);
}('BAR'));

Це сповіщало б про BARте, що їх поміщають у <script>блок. Параметр BARпередається функції, яка викликає себе.

Той самий принцип відбувається і у вашому коді, jQueryоб'єкт передається функції, тому $точно буде посилатися на об'єкт jQuery.

Question 6

JQuery в кінці передає себе (jQuery) функції, так що ви можете використовувати символ $ у своєму плагіні. Ви також могли б це зробити

(function(foo){

  foo.fn.myPlugin = function() {


    this.fadeIn('normal', function(){


    });

  };
})( jQuery );

Question 7

Щоб знайти чітке пояснення цього та інших сучасних прийомів та загальноприйнятих практик JavaScript, я рекомендую прочитати Javascript Garden.

http://bonsaiden.github.com/JavaScript-Garden/

Це особливо корисно, оскільки багато з цих шаблонів широко використовуються у багатьох бібліотеках, але насправді не пояснюються.

Question 8

Інші відповіді тут чудові, але є один важливий момент, який не розглядався. Ти кажеш:

Отже, це створення функції, яка, наскільки я можу зрозуміти, ніколи не буде запущена, з параметром $, який уже визначений?

Немає гарантії $доступності глобальної змінної . За замовчуванням jQuery створює дві змінні у глобальній області: $і jQuery(де ці два - псевдоніми для одного і того ж об'єкта). Однак jQuery також можна запустити в режимі noConflict :

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  jQuery.noConflict();
</script>

Коли ви телефонуєте jQuery.noConflict(), глобальна змінна $повертається до тієї, яка була до включення бібліотеки jQuery. Це дозволяє jQuery використовувати з іншими бібліотеками Javascript, які також використовують $як глобальну змінну.

Якщо ви написали плагін, який покладався на $псевдонім для jQuery, ваш плагін не працював би для користувачів, які працюють у режимі noConflict.

Як вже пояснювали інші, розміщений вами код створює анонімну функцію, яка викликається негайно. Потім глобальна змінна jQueryпередається цій анонімній функції, яка безпечно псевдонім як локальна змінна $в межах функції.