Witryna jQuery zawiera podstawową składnię wtyczki dla jQuery w następujący sposób:
(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 );
Chciałbym tylko zrozumieć, co się tam dzieje z punktu widzenia Javascript, ponieważ nie wygląda to na składnię, którą widziałem wcześniej w JS. Oto moja lista pytań:
Jeśli zamienisz funkcję ($) ... na zmienną, powiedz „the_function”, składnia wygląda następująco:
(the_function)( jQuery );
Co to jest "(jQuery);" robić? Czy nawiasy wokół the_function są naprawdę potrzebne? Dlaczego oni tam są? Czy możesz podać inny podobny fragment kodu?
Zaczyna się od funkcji ($). Czyli tworzy funkcję, która, o ile wiem, nigdy nie zostanie uruchomiona, z parametrem $, który jest już zdefiniowany? Co się tam dzieje?
Dzięki za pomoc!
źródło
(function(){})()
jest znany jako IIFE (natychmiastowo wywoływane wyrażenie funkcyjne) . Niech będzie wiadomo, że można użyć innych symboli, aby wymusić parser traktować jako wyraz funkcji takich jak+,!,-,~
(i innych) jak poniżej:!function($){}(jQuery)
. A dla jeszcze większej zabawy możesz~~+-!function($){}(jQuery)
:!(function( $ ){ })( jQuery );
To jest samowykonująca się anonimowa funkcja, która używa
$
argumentu, dzięki czemu można jej używać ($
) zamiastjQuery
wewnątrz tej funkcji i bez obawy o konflikt z innymi bibliotekami, ponieważ w innych bibliotekach również$
ma specjalne znaczenie. Ten wzorzec jest szczególnie przydatny podczas pisania wtyczek jQuery.Zamiast też możesz napisać tam dowolną postać
$
:(function(j){ // can do something like j.fn.function_name = function(x){}; })(jQuery);
Tutaj
j
automatycznie dogoni jQuery określone na końcu(jQuery)
. Lub możesz całkowicie pominąć argument, ale wtedy będziesz musiał używaćjQuery
słowa kluczowego dookoła zamiast$
bez obawy o kolizję. Więc$
jest opakowany w argument krótkiej ręki, abyś mógł pisać$
zamiastjQuery
dookoła tej funkcji.Jeśli nawet spojrzysz na kod źródłowy jQuery, zobaczysz, że wszystko jest opakowane pomiędzy:
(function( window, undefined ) { // jQuery code })(window);
Jest to, jak widać, samowykonująca się anonimowa funkcja z argumentami.
window
(Iundefined
) argumentem jest stworzony i jest odwzorowany z globalnegowindow
obiektu na dole(window)
. Jest to popularny wzorzec w dzisiejszych czasach i ma niewielki wzrost szybkości, ponieważ tutajwindow
będzie analizowany z argumentu, a nie zwindow
obiektu globalnego, który jest zmapowany poniżej.Jest
$.fn
to obiekt jQuery, w którym tworzysz nową funkcję (która jest również obiektem) lub samą wtyczkę, dzięki czemu jQuery otacza twoją wtyczkę w swoim$.fn
obiekcie i udostępnia ją.Co ciekawe, na podobne pytanie odpowiedziałem tutaj:
Składnia funkcji zamknięcia JavaScript / jQuery
Możesz również zapoznać się z tym artykułem, aby dowiedzieć się więcej o samowykonujących się funkcjach, które napisałem:
Samowykonujące się funkcje JavaScript
źródło
Podstawowa składnia wtyczki umożliwia korzystanie
$
z odwołańjQuery
w treści wtyczki, niezależnie od identyfikatora$
w momencie ładowania wtyczki. Zapobiega to konfliktom nazw z innymi bibliotekami, w szczególności Prototype.Składnia definiuje funkcję, która akceptuje parametr znany jako,
$
dzięki czemu można się do niego odwoływać tak, jak$
w treści funkcji, a następnie natychmiast wywołuje tę funkcję, wstawiając jąjQuery
jako argument.Pomaga to również nie zanieczyszczać globalnej przestrzeni nazw (więc zadeklarowanie
var myvar = 123;
w treści wtyczki nie zostanie nagle zdefiniowanewindow.myvar
), ale głównym pozornym celem jest umożliwienie używania miejsca, w$
którym$
mogło zostać przedefiniowane.źródło
Masz tam do czynienia z samo-wywołującą się anonimową funkcją. To jak „najlepsza praktyka”, aby zawinąć wtyczkę jQuery w taką funkcję, aby upewnić się, że
$
znak jest powiązany zjQuery
obiektem.Przykład:
(function(foo) { alert(foo); }('BAR'));
To ostrzegałoby
BAR
po umieszczeniu w<script>
bloku. ParametrBAR
jest przekazywany do funkcji, która wywołuje samą siebie.Ta sama zasada dzieje się w Twoim kodzie,
jQuery
obiekt jest przekazywany do funkcji, więc$
na pewno będziemy odwoływać się do obiektu jQuery.źródło
Na końcu jQuery przekazuje się (jQuery) do funkcji, dzięki czemu możesz użyć symbolu $ w swojej wtyczce. Ty też mógłbyś to zrobić
(function(foo){ foo.fn.myPlugin = function() { this.fadeIn('normal', function(){ }); }; })( jQuery );
źródło
Aby znaleźć jasne wyjaśnienie tej i innych nowoczesnych sztuczek javascript i typowych praktyk, polecam przeczytanie Javascript Garden.
http://bonsaiden.github.com/JavaScript-Garden/
Jest to szczególnie przydatne, ponieważ wiele z tych wzorców jest szeroko stosowanych w wielu bibliotekach, ale nie są one do końca wyjaśnione.
źródło
Inne odpowiedzi tutaj są świetne, ale jest jedna ważna kwestia, która nie została omówiona. Mówisz:
Nie ma gwarancji, że zmienna globalna
$
jest dostępna . Domyślnie jQuery tworzy dwie zmienne w zakresie globalnym:$
ijQuery
(gdzie dwie są aliasami tego samego obiektu). Jednak jQuery można również uruchomić w trybie noConflict :<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery.noConflict(); </script>
Kiedy wywołujesz
jQuery.noConflict()
, zmienna globalna$
jest ustawiana z powrotem na taką, jaka była przed dołączeniem biblioteki jQuery. Dzięki temu jQuery może być używany z innymi bibliotekami Javascript, które są również używane$
jako zmienna globalna.Jeśli napisałeś wtyczkę, która opierała się na
$
aliasie dla jQuery, wtedy twoja wtyczka nie będzie działać dla użytkowników pracujących w trybie noConflict.Jak już wyjaśnili inni, opublikowany kod tworzy anonimową funkcję, która jest wywoływana natychmiast. Zmienna globalna
jQuery
jest następnie przekazywana do tej anonimowej funkcji, która jest bezpiecznie aliasowana jako zmienna lokalna$
w funkcji.źródło