Ich verwende RequireJS und muss etwas auf DOM bereit initialisieren. Jetzt stellt RequireJS das domReady
Plugin zur Verfügung , aber wir haben bereits jQuery's $(document).ready()
, das mir zur Verfügung steht, da ich jQuery benötigt habe.
Ich habe also zwei Möglichkeiten:
Verwenden Sie das
domReady
Plugin:require(['domReady'], function (domReady) { domReady(function () { // Do my stuff here... }); });
Verwendung
$(document).ready()
:$(document).ready(function() { // Do my stuff here... });
Welches soll ich wählen und warum?
Beide Optionen scheinen wie erwartet zu funktionieren. Ich bin nicht zuversichtlich in die jQuery, weil RequireJS seine Magie tut; Das heißt, da RequireJS Skripte dynamisch hinzufügt, mache ich mir Sorgen, dass DOM-fähig sein könnte, bevor alle dynamisch angeforderten Skripte geladen werden. RequireJS wird zusätzliche JS nur dann belasten, domReady
wenn ich bereits jQuery benötigt habe.
Fragen
- Warum stellt RequireJS ein
domReady
Plugin zur Verfügung, wenn wir jQuery's haben können$(document).ready();
? Ich sehe keinen Vorteil darin, eine andere Abhängigkeit aufzunehmen. - Wenn es nur darum geht, einen Bedarf zu decken, warum nicht einen für Cross-Browser-AJAX bereitstellen?
Soweit ich weiß, wird ein Modul, das benötigt domReady
wird, nicht abgerufen oder ausgeführt, nachdem das Dokument fertig ist, und Sie können das Gleiche auch mit jQuery tun:
require(['jQuery'], function ($) {
$(document).ready(function () {
// Do my stuff here...
});
});
Um meine Frage klarer zu formulieren: Was ist der Unterschied zwischen dem Erfordernis domReady
oder jQuery
?
quelle
I am not confident in jquery's dom ready
Ich möchte es als anstößig markieren:p
script
Tags gehen, oder schreiben Sie eine Bibliothek / ein Plug-In, die / das andere Benutzer verwenden (und damit die Position derscript
Tags im Markup kontrollieren )?I am not confident in jquery's dom ready because requirejs is doing its magic.
Da ist erforderlich, Kapselung in begrenztem lokalen Bereich zu kapseln. Das ist nicht der Punkt. (soweit es die Frage betrifft).Antworten:
Es scheint, als ob alle wichtigen Punkte bereits getroffen wurden, aber ein paar Details fielen durch die Risse. Hauptsächlich:
domReady
Es ist sowohl ein Plugin als auch ein Modul. Wenn Sie es in das Anforderungsarray mit einem Trailing aufnehmen, wird
!
Ihr Modul erst ausgeführt, wenn die Interaktion mit dem DOM "sicher" ist:Beachten Sie, dass das Laden und Ausführen unterschiedlich ist. Wenn Sie möchten, dass alle Ihre Dateien so schnell wie möglich geladen werden, ist die Ausführung des Inhalts zeitkritisch.
Wenn Sie das weglassen
!
, handelt es sich nur um ein normales Modul, das zufällig eine Funktion ist, die einen Rückruf annehmen kann, der nicht ausgeführt wird, bevor das DOM sicher interagieren kann:Vorteil bei Verwendung von domReady als Plugin
Code, der von einem Modul abhängt, von dem wiederum abhängt
domReady!
hat einen sehr bedeutenden Vorteil: Er muss nicht warten, bis das DOM bereit ist!Angenommen, wir haben einen Codeblock A, der von einem Modul abhängt, B, der davon abhängt
domReady!
. Modul B wird erst geladen, wenn das DOM bereit ist. A wird wiederum nicht ausgeführt, bevor B geladen wurde.Wenn Sie es
domReady
als reguläres Modul in B verwenden würden, müsste A auch davon abhängendomReady
und seinen Code in einendomReady()
Funktionsaufruf einschließen.Darüber hinaus bedeutet dies,
domReady!
dass derselbe Vorteil gegenüber$(document).ready()
.Bezüglich der Unterschiede zwischen domReady und $ (document) .ready ()
Beide schnüffeln im Wesentlichen auf die gleiche Weise, ob / wann das DOM bereit ist.
Aus Angst, dass jQuery zur falschen Zeit feuert
jQuery löst jeden bereitstehenden Rückruf aus, selbst wenn das DOM vor jQuery geladen wird (es sollte Ihrem Code egal sein, was zuerst passiert).
quelle
Ein Versuch, Ihre Hauptfrage zu beantworten:
Sie machen wirklich zwei verschiedene Dinge. Die
domReady
Abhängigkeit von RequireJS bedeutet, dass für dieses Modul das DOM vollständig geladen sein muss, bevor es ausgeführt werden kann (und daher auf Wunsch in einer beliebigen Anzahl von Modulen in Ihrer Anwendung zu finden ist)$(document).ready()
stattdessen seine Rückruffunktionen ausgelöst werden, wenn sich das DOM befindet Laden beendet.Der Unterschied mag subtil erscheinen, aber denken Sie daran: Ich habe ein Modul, das auf irgendeine Weise mit dem DOM gekoppelt werden muss, sodass ich mich entweder darauf verlassen
domReady
und es zum Zeitpunkt der Moduldefinition koppeln oder$(document).ready()
am Ende ein Modul ablegen kann mit einem Rückruf auf eine Init-Funktion für das Modul. Ich würde den ersten Ansatz als sauberer bezeichnen.Wenn ich ein Ereignis habe, das genau dann eintreten muss, wenn das DOM bereit ist, ist das
$(document).ready()
Ereignis die richtige Adresse , da dies nicht insbesondere davon abhängt, ob RequireJS zum Laden von Modulen ausgeführt wird, vorausgesetzt, die Abhängigkeiten des Codes, den Sie verwenden Aufruf von sind erfüllt.Beachten Sie auch, dass Sie RequireJS nicht unbedingt mit jQuery verwenden. Jedes Bibliotheksmodul, das DOM-Zugriff benötigt (aber nicht auf jQuery angewiesen ist), wäre dann weiterhin nützlich
domReady
.quelle
domReady
ist keine Abhängigkeit für requirejs. Es wäre eine Abhängigkeit für den Code, wenn Sie dasdomReady
DocumentReady-Ereignis verwenden. Außerdem scheinen Sie verwirrend zu sein.domReady
als Abhängigkeit bezeichnet, weil es so verwendet wird. Nicht als Abhängigkeit von RequireJS, sondern von dem Modul, in dem es verwendet wird. Vielleicht sollte ich das in meinem Text klarer machen. Haben Sie Vorschläge, wie?Beantworten Sie Ihre Kugeln in der Reihenfolge ihres Auftretens:
Wenn es darauf ankommt, überdenken Sie dies. Es ist ein Mechanismus zum Ausführen von Javascript auf domReady. Wenn Sie jQuery nicht hätten, würde ich das domReady-Plugin empfehlen. Da Sie jQuery haben, laden Sie keine weiteren Skripte, um etwas zu tun, das bereits verfügbar ist.
Klarheit Update
Das domReady-Plugin sammelt Funktionen , die aufgerufen werden können, wenn das Dokument bereit ist. Wenn es bereits geladen ist, werden sie sofort ausgeführt.
JQuery sammelt Funktionen und bindet ein zurückgestelltes Objekt an den Dom, der "bereit" ist. Wenn der Dom bereit ist, wird das zurückgestellte Objekt aufgelöst und die Funktionen werden ausgelöst. Wenn der Dom bereits 'bereit' ist, wird der verzögerte bereits aufgelöst, sodass die Funktion sofort ausgeführt wird.
Dies bedeutet, dass sie effektiv genau das Gleiche tun.
quelle
Nach einigen Experimenten mit requirejs mit mehreren Modulen empfehle ich die Verwendung von domReady .
Ich habe festgestellt, dass die mit $ (document) .ready (...) verknüpfte Funktion nicht aufgerufen wird, wenn mehrere Module von requirejs geladen werden. Ich vermute, dass dom fertig wird, bevor der gesamte erforderliche Code ausgeführt wird, und der jquery ready Callback-Handler aufgerufen wird, bevor er an eine benutzerdefinierte Funktion gebunden wird, dh innerhalb des Hauptmodulcodes.
quelle
$(document).ready
sofort ausgeführt.Ich habe festgestellt, dass ich dies als Teil des Haupteintrags mache, damit mein gesamtes Javascript garantiert, dass das DOM bereit ist und die Abfrage geladen wird. Ich bin mir nicht sicher, wie großartig das ist, also begrüße jedes Feedback, aber hier ist meine main.js:
quelle