Requirejs domReady Plugin vs Jquery $ (Dokument) .ready ()?

Ich verwende RequireJS und muss etwas auf DOM bereit initialisieren. Jetzt stellt RequireJS das domReadyPlugin 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:

1. Verwenden Sie das domReadyPlugin:

   require(['domReady'], function (domReady) {
       domReady(function () {
           // Do my stuff here...
       });
   });

2. 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, domReadywenn ich bereits jQuery benötigt habe.

Fragen

• Warum stellt RequireJS ein domReadyPlugin 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 domReadywird, 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 domReadyoder jQuery?

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:

define(['domReady!'], function () {
    console.info('The DOM is ready before I happen');
});

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:

define(['domReady'], function (domReady) {
    domReady(function () {
        console.info('The DOM is ready before I happen');
    });
    console.info('The DOM might not be ready before I happen');        
});

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 domReadyals reguläres Modul in B verwenden würden, müsste A auch davon abhängen domReadyund seinen Code in einen domReady()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).

Ein Versuch, Ihre Hauptfrage zu beantworten:

Warum requirejsgibt es ein domReadyPlugin, wenn wir JQuerys haben können $(document).ready();?

Sie machen wirklich zwei verschiedene Dinge. Die domReadyAbhä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 domReadyund 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.

Beantworten Sie Ihre Kugeln in der Reihenfolge ihres Auftretens:

• Beide erreichen das Gleiche
• Wenn Sie aus irgendeinem Grund Vorbehalte gegen jquery haben, verwenden Sie domReady
• Richtig, verwenden Sie einfach jQuery
• Weil nicht jeder jQuery verwendet
• Ich stimme zu, benutze einfach jQuery
• Plugins per Definition 'Feed a Need'.
• Cross Browser Ajax ist keine Sache. Domainübergreifend? Es gibt wahrscheinlich, und wenn nicht, besteht keine Notwendigkeit zu füttern.
• , -, -, - OK

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.

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.

require(['jquery',
    'underscore',
    'text!some_template.html',
    './my_module_1',
    './my_module_2',
    'domReady',
    'other_dependency_1',
    'other_dependency_2'
    ], function($, _, someTemplate, myModule1, myModule2, domReady) {

    $(document).ready(function() {
        console.info('This might never be executed.'); 
        console.info('Dom might get ready before requirejs would load modules.');
    });

    domReady(function () {
        console.info('This runs when the dom gets ready and modules are loaded.');
    });
});

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:

require(['domReady!'], function(domReady){
    console.log('dom is ready');
    require(['jquery', 'bootstrap'], function(){
        console.log('jquery loaded');
        require(['app'], function(app){
            console.log('app loaded');
        });
    });
});