wake-up-neo.com

Requirejs domReady plugin gegen Jquery $ (document) .ready ()?

Ich benutze RequireJS und muss etwas auf DOM ready initialisieren. Nun bietet RequireJS das domReady-Plugin an, aber wir haben bereits jQuery's $(document).ready(), die mir zur Verfügung steht, da ich jQuery benötigt habe.

Ich habe also zwei Möglichkeiten:

  1. Verwenden Sie das domReady-Plugin:

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

  2. Verwenden Sie $(document).ready():

    $(document).ready(function() {
    // Do my stuff here...
});

Welches sollte ich wählen und warum?

Beide Optionen scheinen wie erwartet zu funktionieren. Ich bin nicht sicher in der jQuery, weil RequireJS seine Magie ausübt. Das heißt, da RequireJS dynamisch Skripts hinzufügt, mache ich mir Sorgen, dass DOM ready möglicherweise vor dem Laden aller dynamisch angeforderten Skripts auftritt. RequireJS erhöht jedoch die zusätzliche JS nur für domReady, wenn bereits jQuery erforderlich ist.

Fragen

  • Warum stellt RequireJS ein domReady-Plugin bereit, wenn jQuery's $(document).ready(); verwendet werden kann? Ich sehe keinen Vorteil darin, eine weitere Abhängigkeit aufzunehmen.
  • Wenn es sich nur um ein Bedürfnis handelt, dann stellen Sie doch einen für Cross-Browser-AJAX bereit.

Soweit ich weiß, wird ein Modul, für das domReady erforderlich ist, nicht abgerufen oder ausgeführt, wenn das Dokument fertig ist, und Sie könnten dasselbe auch mit jQuery tun:

require(['jQuery'], function ($) {
    $(document).ready(function () {
        // Do my stuff here...
    });
});

Um genauer auf meine Frage einzugehen: Was ist der Unterschied zwischen der Anforderung von domReady oder jQuery?

javascriptjqueryhtmlrequirejsdocument-ready
97
Yugal Jindle

Es scheint, dass 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 abschließendem ! aufnehmen, wird Ihr Modul nicht ausgeführt, bis es "sicher" ist, mit dem DOM zu interagieren:

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 zeitabhängig.

Wenn Sie den ! nicht angeben, handelt es sich lediglich um ein normales Modul, das 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 der Verwendung von domReady als Plugin

Code, der von einem Modul abhängt, das wiederum von domReady! abhängt, hat einen erheblichen Vorteil: Es muss nicht gewartet werden, dass das DOM bereit ist!

Angenommen, wir haben einen Codeblock A, der von einem Modul B abhängt, das von domReady! abhängt. Modul B wird nicht vollständig geladen, bevor das DOM bereit ist. A wird erst ausgeführt, nachdem B geladen wurde.

Wenn Sie domReady als reguläres Modul in B verwenden, muss A außerdem auf domReady angewiesen sein und seinen Code in einen Funktionsaufruf von domReady() einschließen.

Außerdem hat domReady! denselben Vorteil gegenüber $(document).ready().

Betrachten Sie die Unterschiede zwischen domReady und $ (document) .ready ().

Beide stellen fest, ob/wann das DOM im Wesentlichen auf die gleiche Weise bereit ist.

Angst, dass jQuery zur falschen Zeit feuert

jQuery löst jeden bereiten Callback aus, auch wenn das DOM vor jQuery geladen wird (Ihr Code sollte sich nicht darum kümmern, was zuerst passiert.).

88
fncomp

Ein Versuch, Ihre Hauptfrage zu beantworten:

Warum stellt requirejs ein domReady-Plugin bereit, wenn wir $(document).ready(); von Jquery haben können?

Sie machen wirklich zwei verschiedene Dinge. Die Abhängigkeit von RequireJS domReady bedeutet, dass für dieses Modul das DOM vollständig geladen ist, bevor es ausgeführt werden kann (und daher auf Wunsch in einer beliebigen Anzahl von Modulen in Ihrer Anwendung enthalten ist). $(document).ready() löst stattdessen seine Callback-Funktionen aus, wenn die DOM ist fertig geladen. 

Der Unterschied mag geringfügig erscheinen, aber denken Sie daran: Ich habe ein Modul, das auf irgendeine Weise mit dem DOM gekoppelt werden muss. Daher kann ich mich entweder auf domReady verlassen und es zur Moduldefinitionszeit koppeln oder am Ende eine $(document).ready() ablegen davon mit einem Rückruf an eine Init-Funktion für das Modul. Ich würde den ersten Ansatz sauberer nennen.

Wenn ich jedoch ein Ereignis habe, das sofort nach Fertigstellung des DOMs erfolgen muss, wäre das $(document).ready()-Ereignis das Richtige für Sie, da dies nicht unbedingt davon abhängt, ob RequireJS das Laden von Modulen ausführt, vorausgesetzt die Abhängigkeiten des Codes ' ruf es von aus an.

Es ist auch eine Überlegung wert, dass Sie RequireJS nicht unbedingt mit jQuery verwenden. Jedes Bibliotheksmodul, für das DOM-Zugriff erforderlich ist (aber nicht auf jQuery angewiesen ist), wäre mit domReady dennoch nützlich.

20
Gert Sønderby

Beantworten Sie Ihre Kugeln in der Reihenfolge ihres Auftretens:

  • Beide erreichen dasselbe
  • 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 nichts. Domainübergreifend? Es gibt wahrscheinlich, und wenn nicht, dann gibt es keine Notwendigkeit zu füttern.
  • , -, -, - OK

Wenn es darauf ankommt, denken Sie darüber nach. Es ist ein Mechanismus, um Javascript auf DomReady auszuführen. Wenn Sie jQuery nicht haben, würde ich das domReady-Plugin befürworten. Da Sie jQuery haben, laden Sie keine weiteren Skripts, um etwas zu tun, das bereits verfügbar ist.

Clarity Update

Das domReady-Plugin sammelt Funktionen , das aufgerufen werden soll, wenn das Dokument 'ready' ist. Wenn es bereits geladen ist, wird es sofort ausgeführt.

JQuery sammelt Funktionen und bindet ein verzögertes Objekt an den Dom, der 'ready' 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, werden die verzögerten bereits aufgelöst, sodass die Funktion sofort ausgeführt wird.

Dies bedeutet, dass sie tatsächlich genau das gleiche tun.

6
awbergs

Nach einigem Experimentieren mit requirjs mit mehreren Modulen empfehle ich die Verwendung von domReady.

Ich habe diese Funktion bemerkt $ (Dokument) .ready (...) wird nicht aufgerufen, wenn mehrere Module von requirjs geladen werden. Ich habe den Verdacht, dass dom fertig wird, bevor der gesamte requestjs-Code ausgeführt wird und der Callback-Handler von jquery ready aufgerufen wird, bevor er mit einer benutzerdefinierten Funktion, d.

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.');
    });
});
0
Marcin Nowakowski