Kiedy należy używać funkcji document.ready jQuery?

107

Powiedziano mi, żebym używał document.ready, kiedy po raz pierwszy zacząłem używać Javascript / jQuery, ale tak naprawdę nigdy nie dowiedziałem się, dlaczego.

Czy ktoś mógłby podać kilka podstawowych wskazówek, kiedy warto zawijać kod javascript / jquery wewnątrz kodu jQuery document.ready?

Niektóre tematy, które mnie interesują:

  1. .on()Metoda jQuery : .on()całkiem sporo używam tej metody dla AJAX (zazwyczaj na dynamicznie tworzonych elementach DOM). Czy elementy .on()obsługi kliknięć powinny zawsze znajdować się w środku document.ready ?
  2. Wydajność: Czy bardziej wydajne jest przechowywanie różnych obiektów javascript / jQuery w dokumencie lub poza nim (również, czy różnica w wydajności jest znacząca?)?
  3. Zakres obiektu: AJAX załadowane strony mogą nie obiekty dostępu, które zostały wewnątrz document.ready poprzedniej strony jest, prawda? Mają dostęp tylko do obiektów, które były poza document.ready (tj. Prawdziwie „globalne” obiekty)?

Aktualizacja: Aby postępować zgodnie z najlepszymi praktykami, cały mój skrypt javascript (biblioteka jQuery i kod mojej aplikacji) znajduje się na dole mojej strony HTML i używam deferatrybutu w skryptach zawierających jQuery na moich stronach załadowanych AJAX, może uzyskać dostęp do biblioteki jQuery na tych stronach.

javascript jquery dom event-handling document-ready Tim Peterson
źródło
2
Ponieważ jeśli DOM nie jest gotowy, możesz otrzymać nieoczekiwane wyniki, to wszystko.
Robert Harvey
1
2.- Cóż, używam na zewnątrz tylko do debugowania i mogę wywołać jakąś funkcję var / przez konsolę,
jd_7
@RobertHarvey jakie „nieoczekiwane” wyniki? czy możesz podać przykład?
tim Peterson,
3
Próbujesz zmodyfikować element lub atrybut, który nie dotarł jeszcze do DOM.
Robert Harvey,

Odpowiedzi:

143

W prostych słowach

$(document).readyto wydarzenie, które zapala się, gdy documentjest gotowe.

Załóżmy, że umieściłeś swój kod jQuery w headsekcji i próbujesz uzyskać dostęp do domelementu (kotwicy, img itp.), Nie będziesz mieć do niego dostępu, ponieważ htmljest interpretowany od góry do dołu, a elementy html nie są obecne, gdy kod jQuery biegnie.

Aby rozwiązać ten problem, umieszczamy każdy kod jQuery / javascript (który używa DOM) wewnątrz $(document).readyfunkcji, która jest wywoływana, gdy wszystkie domelementy są dostępne.

I to jest powód, dla którego umieszczasz swój kod jQuery na dole (po wszystkich elementach dom, tuż przed </body>), nie ma potrzeby$(document).ready

Nie ma potrzeby umieszczania onmetody w środku $(document).readytylko wtedy, gdy używasz onmetody documentz tego samego powodu, który wyjaśniłem powyżej.

    //No need to be put inside $(document).ready
    $(document).on('click','a',function () {
    })

    // Need to be put inside $(document).ready if placed inside <head></head>
    $('.container').on('click','a',function () {
    });

EDYTOWAĆ

Z komentarzy,

  1. $(document).readynie czeka na obrazy lub skrypty. To jest duża różnica między $(document).readyi$(document).load

  2. Tylko kod, który uzyskuje dostęp do DOM, powinien znajdować się w gotowym module obsługi. Jeśli jest to wtyczka, nie powinna być gotowa.

Jashwant
źródło
@Dipaks Tak, czemu nie? Jesteśmy po prostu bardzo przyzwyczajeni do używania $(document).ready. Zobacz to
Jashwant
Dopóki ładujesz jQuery w headskrypcie po manipulowaniu elementami, document.readynie jest to potrzebne. Zdjęcia są jednak szczególnym przypadkiem ...
elclanrs
@elclanrs Zobacz moje zaktualizowane pytanie. Ładuję jQuery na dole mojej strony HTML z kodem specyficznym dla aplikacji zaraz po tym.
tim peterson,
@Jashwant A co z różnicami w wydajności dom.ready vs. nie? Czy są one istotne?
tim peterson,
1
Nie umieszczamy całego jQuerykodu w gotowym module obsługi. Tylko kod, który uzyskuje dostęp do DOM. Jeśli jest to plugin, to nie powinno być w ready przypadku
Juan Mendes
7

Odpowiedzi:

Metoda jQuery .on (): całkiem sporo używam metody .on () dla AJAX (dynamicznie tworzę elementy DOM). Czy programy obsługi kliknięć .on () powinny zawsze znajdować się w pliku document.ready?

Nie, nie zawsze. Jeśli załadujesz JS w nagłówku dokumentu, będziesz musiał. Jeśli tworzysz elementy po załadowaniu strony przez AJAX, będziesz musiał. Nie musisz tego robić, jeśli skrypt znajduje się poniżej elementu html, do którego dodajesz moduł obsługi.

Wydajność: Czy bardziej wydajne jest przechowywanie różnych obiektów javascript / jQuery w dokumencie lub poza nim (również, czy różnica w wydajności jest znacząca?)?

To zależy. Dołączenie modułów obsługi zajmie tyle samo czasu, ale zależy to tylko od tego, czy chcesz, aby stało się to natychmiast po załadowaniu strony, czy też chcesz, aby czekało, aż załaduje się cały dokument. Zależy to więc od innych rzeczy, które robisz na stronie.

Zasięg obiektu: strony ładowane za pomocą AJAX nie mogą uzyskać dostępu do obiektów, które znajdowały się w dokumencie poprzedniej strony. Gotowe, prawda? Mają dostęp tylko do obiektów, które były poza document.ready (tj. Prawdziwie „globalne” obiekty)?

Zasadniczo jest to własna funkcja, więc może uzyskiwać dostęp tylko do zmiennych zadeklarowanych w zakresie globalnym (poza / ponad wszystkimi funkcjami) lub z window.myvarname = '';

Justin
źródło
6

Zanim będziesz mógł bezpiecznie używać jQuery, musisz upewnić się, że strona jest w stanie, w którym jest gotowa do manipulowania. Dzięki jQuery osiągamy to, umieszczając nasz kod w funkcji, a następnie przekazując tę ​​funkcję do $(document).ready(). Funkcja, którą przekazujemy, może być po prostu funkcją anonimową .

$(document).ready(function() {  
    console.log('ready!');  
});

Spowoduje to uruchomienie funkcji, którą przekażemy do .ready (), gdy dokument będzie gotowy. Co tu się dzieje? Używamy $ (document) do utworzenia obiektu jQuery z dokumentu naszej strony, a następnie wywołujemy funkcję .ready () na tym obiekcie, przekazując mu funkcję, którą chcemy wykonać.

Ponieważ jest to coś, co często robisz, jeśli wolisz, jest na to skrócona metoda - funkcja $ () pełni podwójną funkcję jako alias dla $ (document) .ready (), jeśli przekażesz jej funkcję:

$(function() {  
    console.log('ready!');  
});

To dobra lektura: Jquery Fundamentals

Tom Sarduy
źródło
3
Nie należy mylić z (function($){ })(jQuery);którego zawija swój kod tak, że $ jest jQuery wewnątrz tego zamknięcia
John Magnolia
3

Aby być realistą, document.readynie jest to potrzebne do niczego innego niż dokładne manipulowanie DOM i nie zawsze jest potrzebne lub jest najlepszą opcją. Chodzi mi o to, że kiedy tworzysz dużą wtyczkę jQuery, na przykład, prawie nie używasz jej w całym kodzie, ponieważ starasz się zachować ją SUCHĄ, więc w metodach, które manipulują DOM, ale mają być wywoływane, uzyskujesz jak najwięcej abstrakcji później. Kiedy cały twój kod jest ściśle zintegrowany, jedyną dostępną metodą document.readyjest zwykle to, initgdzie dzieje się cała magia DOM. Mam nadzieję, że to odpowiada na twoje pytanie.

elclanrs
źródło
0

Powinieneś powiązać wszystkie akcje w document.ready, ponieważ powinieneś poczekać, aż dokument zostanie w pełni załadowany.

Ale powinieneś utworzyć funkcje dla wszystkich akcji i wywoływać je z poziomu document.ready. Kiedy tworzysz funkcje (obiekty globalne), wywołuj je w dowolnym momencie. Dlatego po załadowaniu nowych danych i utworzeniu nowych elementów należy ponownie wywołać te funkcje.

Te funkcje to te, w których powiązałeś zdarzenia i elementy działań.

$(document).ready(function(){
bindelement1();
bindelement2();
});

function bindelement1(){
$('el1').on('click',function...);
//you might make an ajax call here, then under complete of the AJAX, call this function or any other function again
}

function bindelement2(){
$('el2').on('click',function...);
}
Pulkit Mittal
źródło
0

Dołączyłem link do elementu DIV i chciałem wykonać kilka czynności po kliknięciu. Dodałem kod poniżej dołączonego elementu w DOM, ale nie zadziałał. Oto kod:

<div id="advance-search">
   Some other DOM elements
   <!-- Here I wanted to apppend the link as <a href="javascript:;" id="reset-adv-srch"><span class="bold">x</span> Clear all</a>-->
</div>

<script>
  $("#advance-search #reset-adv-srch").on("click", function (){
     alert('Link Clicked');``
  });
</script>

To nie działało. Następnie umieściłem kod jQuery wewnątrz $ (document) .ready i działało idealnie. Tutaj jest.

$(document).ready(function(e) {
    $("#advance-search #reset-adv-srch").on("click", function (){
        alert('Link Clicked');
    });
});
Bezpieczniejszy Ahmed
źródło
-2

Zdarzenie ready występuje po załadowaniu DOM (model obiektowy dokumentu).

Ponieważ to zdarzenie ma miejsce po przygotowaniu dokumentu, jest to dobre miejsce na wszystkie inne zdarzenia i funkcje jQuery. Jak w powyższym przykładzie.

Metoda ready () określa, co się stanie, gdy wystąpi zdarzenie ready.

Wskazówka: metody ready () nie należy używać razem z.

Shrikant Shiledar
źródło