Używam RequireJS i muszę zainicjować coś na DOM gotowy. Teraz RequireJS dostarcza domReady
wtyczkę , ale mamy już jQuery $(document).ready()
, które jest dla mnie dostępne, ponieważ potrzebowałem jQuery.
Mam więc dwie możliwości:
Użyj
domReady
wtyczki:require(['domReady'], function (domReady) { domReady(function () { // Do my stuff here... }); });
Zastosowanie
$(document).ready()
:$(document).ready(function() { // Do my stuff here... });
Którą wybrać i dlaczego?
Wydaje się, że obie opcje działają zgodnie z oczekiwaniami. Nie mam pewności co do jQuery, ponieważ RequireJS robi swoje; to znaczy, ponieważ RequireJS dynamicznie doda skrypty, obawiam się, że DOM gotowy może wystąpić przed załadowaniem wszystkich dynamicznie żądanych skryptów. Natomiast RequireJS spowoduje obciążenie dodatkowego JS tylko domReady
wtedy, gdy mam już wymagane jQuery.
pytania
- Dlaczego RequireJS zapewnia
domReady
wtyczkę, skoro możemy mieć jQuery$(document).ready();
? Nie widzę żadnej korzyści z włączenia innej zależności. - Jeśli jest to tylko zaspokojenie potrzeb, dlaczego nie zapewnić takiego rozwiązania dla AJAX w różnych przeglądarkach?
O ile wiem, moduł, który wymaga domReady
, nie zostanie pobrany ani wykonany po przygotowaniu dokumentu, a Ty możesz zrobić to samo wymagając jQuery:
require(['jQuery'], function ($) {
$(document).ready(function () {
// Do my stuff here...
});
});
Aby wyjaśnić moje pytanie: jaka jest różnica między wymaganiem domReady
a jQuery
?
źródło
I am not confident in jquery's dom ready
chcę oznaczyć to jako obraźliwe:p
script
trafiają Twoje tagi, czy piszesz bibliotekę / wtyczkę, której będą używać inne osoby (a więc to oni kontrolują lokalizacjęscript
tagów w znacznikach)?I am not confident in jquery's dom ready because requirejs is doing its magic.
Ponieważ, require to hermetyzacja jquery w ograniczonym zakresie lokalnym. Nie o to chodzi. (jeśli chodzi o pytanie).Odpowiedzi:
Wygląda na to, że wszystkie kluczowe punkty zostały już trafione, ale kilka szczegółów wypadło przez pęknięcia. Głównie:
domReady
Jest to zarówno wtyczka, jak i moduł. Jeśli umieścisz go w tablicy wymagań z końcem,
!
twój moduł nie będzie wykonywany, dopóki nie będzie „bezpieczna” interakcji z DOM:Zauważ, że ładowanie i wykonywanie są różne; chcesz, aby wszystkie pliki ładowały się tak szybko, jak to możliwe, to wykonanie zawartości jest wrażliwe na czas.
Jeśli pominiesz
!
, to zwykły moduł jest funkcją, która może przyjąć wywołanie zwrotne, które nie zostanie wykonane, zanim DOM będzie bezpieczny w interakcji:Zalety korzystania z domReady jako wtyczki
Kod zależny od modułu, od którego z kolei zależy,
domReady!
ma bardzo istotną zaletę: nie trzeba czekać, aż DOM będzie gotowy!Powiedzmy, że mamy blok kodu A, który zależy od modułu B, od którego zależy
domReady!
. Moduł B nie zakończy ładowania, zanim DOM będzie gotowy. Z kolei A nie będzie działać przed załadowaniem B.Jeśli miałbyś używać
domReady
jako zwykłego modułu w B, konieczne byłoby również, aby A zależał oddomReady
, a także zawinął swój kod wewnątrzdomReady()
wywołania funkcji.Ponadto oznacza to, że
domReady!
cieszy się taką samą przewagą$(document).ready()
.Odnośnie różnic między domReady i $ (document) .ready ()
Obydwaj węszą, czy / kiedy DOM jest gotowy w zasadniczo ten sam sposób.
Ponownie strach przed odpaleniem jQuery w niewłaściwym momencie
jQuery uruchomi wszystkie gotowe wywołania zwrotne, nawet jeśli DOM załaduje się przed jQuery (Twój kod nie powinien przejmować się tym, co nastąpi wcześniej).
źródło
Próba odpowiedzi na twoje główne pytanie:
Tak naprawdę robią dwie różne rzeczy. Zależność RequireJS
domReady
oznacza, że moduł ten wymaga pełnego załadowania modelu DOM, zanim będzie można go uruchomić (i dlatego można go znaleźć w dowolnej liczbie modułów w aplikacji, jeśli sobie tego życzysz), podczas gdy$(document).ready()
zamiast tego uruchamia funkcje wywołania zwrotnego, gdy DOM jest ładowanie ukończone.Różnica może wydawać się subtelna, ale pomyśl o tym: mam moduł, który musi być w jakiś sposób połączony z DOM, więc mogę polegać na nim
domReady
i łączyć go w czasie definiowania modułu, lub umieścić$(document).ready()
na końcu z wywołaniem zwrotnym do funkcji inicjującej moduł. Pierwsze podejście nazwałbym czystszym.W międzyczasie, jeśli mam zdarzenie, które musi się wydarzyć zaraz po tym, jak DOM jest gotowy,
$(document).ready()
zdarzenie będzie celem, ponieważ nie zależy to w szczególności od ładowania modułów przez RequireJS, pod warunkiem, że zależą od kodu, do którego nazywając go z, są spełnione.Warto również wziąć pod uwagę, że niekoniecznie używasz RequireJS z jQuery. Każdy moduł biblioteki, który potrzebuje dostępu do DOM (ale nie polega na jQuery), nadal byłby przydatny przy użyciu
domReady
.źródło
domReady
nie jest zależnością dla requirejs. Byłaby to zależność dla kodu, jeśli używaszdomReady
zdarzenia DocumentReady. Poza tym wydajesz się być zagubiony.domReady
o zależności, ponieważ tak jest używana. Nie jako zależność od RequireJS, ale od modułu, w którym jest używana. Może powinienem to wyjaśnić w moim tekście, czy masz sugestie, jak to zrobić?Odpowiadanie na pociski w kolejności ich pojawiania się:
Kiedy do tego dojdzie, za bardzo się nad tym zastanawiasz. Jest to mechanizm wykonywania javascript w domReady. Gdybyś nie miał jQuery, byłbym zwolennikiem wtyczki domReady. Ponieważ masz jQuery, nie ładuj więcej skryptów, aby zrobić coś, co jest już dostępne.
Aktualizacja przejrzystości
Wtyczka domReady zbiera funkcje do wywołania, gdy dokument jest „gotowy”. Jeśli jest już załadowany, uruchamiają się natychmiast.
JQuery zbiera funkcje i wiąże odroczony obiekt z „gotowym” domem. Gdy dom jest gotowy, odroczony obiekt zostanie rozwiązany i funkcje zostaną uruchomione. Jeśli dom jest już `` gotowy '', to odroczony zostanie już rozwiązany, więc funkcja zostanie wykonana natychmiast.
Oznacza to, że skutecznie robią dokładnie to samo.
źródło
Po kilku eksperymentach z requirejs z wieloma modułami sugeruję użycie domReady .
Zauważyłem, że funkcja skojarzona z $ (document) .ready (...) nie jest wywoływana, gdy requirejs ładuje wiele modułów. Podejrzewam, że dom przygotowuje się, zanim cały kod requirejs zostanie wykonany, a moduł obsługi wywołań zwrotnych jquery gotowy jest wywoływany, zanim zostanie powiązany z funkcją zdefiniowaną przez użytkownika, tj. W kodzie modułu głównego.
źródło
$(document).ready
zostanie uruchomione natychmiast.Zauważyłem, że robię to jako część głównego wpisu, dzięki czemu cały mój javascript ma gwarancję, że DOM jest gotowy, a jquery jest załadowany. Nie jestem pewien, jak wspaniale jest to mile widziane wszelkie opinie, ale oto mój main.js:
źródło