$ (dokument). już stenografia

245

Czy jest następujący skrót $(document).ready?

(function($){

//some code

})(jQuery);

Widzę, że ten wzór był często używany, ale nie mogę znaleźć żadnego odniesienia do niego. Jeśli jest to skrót $(document).ready(), czy istnieje jakiś szczególny powód, dla którego może nie działać? W moich testach wydaje się, że zawsze strzela przed gotowym wydarzeniem.

Mark Brown
źródło
Żadna zmienna zdefiniowana w ramach wspomnianej funkcji wzorca (np. var somevar;) Nie zmieni zawartości zmiennych o tej samej nazwie poza funkcją
Timo Huovinen,
3
Kod powoduje, że $ reprezentuje jQuery w tym bloku funkcyjnym, więc kod jest przenośny do miejsc, w których $ alias dla jQuery jest wyłączony lub zdefiniowany jako coś innego.
AsksAnyway

Odpowiedzi:

253

Skrótem $(document).ready(handler)jest $(handler)(gdzie handlerjest funkcja). Zobacz tutaj .

Kod w twoim pytaniu nie ma nic wspólnego .ready(). Jest to raczej bezpośrednio wywoływane wyrażenie funkcyjne (IIFE) z obiektem jQuery jako argumentem. Jego celem jest ograniczenie zakresu przynajmniej $zmiennej do własnego bloku, aby nie powodował konfliktów. Zazwyczaj widzisz wzorzec używany przez wtyczki jQuery, aby to zapewnić $ == jQuery.

BoltClock
źródło
14
Technicznie jest to bezpośrednio wywoływane wyrażenie funkcyjne . Gdyby to się samo wzywało, wołałoby się od wewnątrz. Wyszukaj w Internecie iifelub przejdź do słynnego posta na blogu Cowboy Alman . Szczegóły… sheesh.
2540625,
546

Stenogram to:

$(function() {
    // Code here
});
Kyle Trauberman
źródło
24
Pierwszy argument to $. Może chciałbym to dodać. Przydaje sięjQuery(function($, undefined) {});
Raynos
5
@raynos Nie jest wymagane. powyższy kod działa dobrze jako alias$(document).ready(function(){ });
Kyle Trauberman
10
Po prostu warto wiedzieć, że dostajesz $za darmo jako pierwszy argument.
Raynos
3
Nadal odwiedzam tę odpowiedź raz w miesiącu.
Nugsson
89

Prawidłowy skrót to:

$(function() {
    // this behaves as if within document.ready
});

Kod, który opublikowałeś…

(function($){

//some code

})(jQuery);

… Tworzy anonimową funkcję i wykonuje ją natychmiast jQuerypo przekazaniu jako argument $. Wszystko, co skutecznie robi, to wziąć kod do funkcji i wykonać go normalnie, ponieważ $jest to już alias jQuery. :RE

Gordon Gustafson
źródło
4
Można powiedzieć, że zapewnia to również, że $ jest aliasem dla jQuery, jeśli załadowane są inne narzędzia, które również używają $ jako aliasu
Jim Wolff
16

To nie jest skrót od $(document).ready().

Kod, który opublikowałeś, umieszcza kod wewnętrzny i czyni jQuery dostępnym $bez zanieczyszczania globalnej przestrzeni nazw. Można tego użyć, gdy chcesz używać zarówno prototypu, jak i jQuery na jednej stronie.

Udokumentowane tutaj: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/#use-an-immed natychmiast-invoked-function-expression

samy-delux
źródło
Dziękujemy za odpowiedź na pytanie
MarcGuay,
12

Te konkretne wiersze są zwykłym opakowaniem dla wtyczek jQuery:

„... aby upewnić się, że wtyczka nie koliduje z innymi bibliotekami, które mogą korzystać ze znaku dolara, najlepszą praktyką jest przekazywanie jQuery do samoczynnie wykonującej się funkcji (zamknięcia), która odwzorowuje ją na znak dolara, aby mogła” zostać nadpisane przez inną bibliotekę w zakresie jej wykonania. ”

(function( $ ){
  $.fn.myPlugin = function() {
    // Do your awesome plugin stuff here
  };
})( jQuery );

Od http://docs.jquery.com/Plugins/Authoring

Morgar
źródło
11

Stenogram bezpieczny dla wielu ram gotowy:

jQuery(function($, undefined) {
    // $ is guaranteed to be short for jQuery in this scope
    // undefined is provided because it could have been overwritten elsewhere
});

Wynika to z faktu, że jQuery nie jest jedyną strukturą używającą zmiennych $iundefined

Timo Huovinen
źródło
również można zapisać jako(function($){ ... })(jQuery);
Mike Causer,
2
@MikeCauser również jest dobrym podejściem, ale nie zostanie wywołane ready, zamiast tego zostanie wywołane natychmiast
Timo Huovinen
5

Można użyć jeszcze krótszego wariantu

$(()=>{

});

gdzie $oznacza jQuery i ()=>{}jest tak zwaną „funkcją strzałki”, która dziedziczy thispo zamknięciu. (Tak thiswięc prawdopodobnie będziesz miał windowzamiast document.)

Edvard Rejthar
źródło
0

A co z tym?

(function($) { 
   $(function() {
     // more code using $ as alias to jQuery
     // will be fired when document is ready
   });
})(jQuery);
RN Kushwaha
źródło