web-dev-qa-db-fra.com

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

J'utilise RequireJS et ai besoin d'initialiser quelque chose sur DOM ready. Maintenant, RequireJS fournit le plugin domReady , mais nous avons déjà la fonction $(document).ready() de jQuery, qui est disponible depuis que jQuery est requis.

J'ai donc deux options:

  1. Utilisez le plugin domReady:

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

  2. Utilisez $(document).ready():

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

Lequel dois-je choisir et pourquoi?

Les deux options semblent fonctionner comme prévu. Je ne suis pas confiant dans celui de jQuery car RequireJS fait sa magie; Autrement dit, comme RequireJS ajoutera des scripts de manière dynamique, je crains que DOM ready ne se produise avant que tous les scripts demandés de manière dynamique ne soient chargés. Considérant que, RequireJS ajoutera un fardeau sur le JS supplémentaire juste pour domReady quand j’ai déjà besoin de jQuery.

Des questions

  • Pourquoi RequireJS fournit-il un plugin domReady quand on peut avoir la fonction $(document).ready(); de jQuery? Je ne vois aucun avantage à inclure une autre dépendance.
  • Si c'est juste pour répondre à un besoin, pourquoi ne pas en fournir un pour AJAX multi-navigateurs?

Autant que je sache, un module nécessitant domReady ne sera ni récupéré ni exécuté une fois le document prêt. Vous pouvez également faire la même chose en utilisant jQuery:

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

Pour être plus clair sur ma question: quelle est la différence entre exiger domReady et jQuery?

javascriptjqueryhtmlrequirejsdocument-ready
97
Yugal Jindle

Il semble que tous les points clés aient déjà été touchés, mais quelques détails sont restés lettre morte. Principalement:

domReady

C'est à la fois un plugin et un module. Si vous l'incluez dans le tableau des exigences avec un ! final, votre module ne s'exécutera pas tant qu'il ne sera pas "sûr" d'interagir avec le DOM:

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

Notez que le chargement et l'exécution sont différents; vous voulez que tous vos fichiers soient chargés le plus tôt possible, c'est l'exécution du contenu qui dépend du temps.

Si vous omettez le !, alors c'est simplement un module normal qui est une fonction, qui peut prendre un rappel qui ne s'exécutera pas avant que le DOM ne puisse interagir en toute sécurité:

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');        
});

Avantage lorsque vous utilisez domReady en tant que plugin

Le code qui dépend d’un module qui dépend à son tour de domReady! présente un avantage considérable: il n’a pas besoin d’attendre que le DOM soit prêt!

Disons que nous avons un bloc de code, A, qui dépend d’un module, B, qui dépend de domReady!. Le module B ne terminera pas le chargement avant que le DOM ne soit prêt. A son tour, A ne fonctionnera pas avant que B ne soit chargé.

Si vous utilisiez domReady en tant que module normal dans B, il serait également nécessaire que A dépende de domReady, ainsi que de l'encapsuler dans du code domReady().

De plus, cela signifie que domReady! bénéficie du même avantage par rapport à $(document).ready().

Concernant les différences entre domReady et $ (document) .ready ()

Les deux détectent si/quand le DOM est prêt essentiellement de la même manière.

Re peur de jQuery tirer au mauvais moment

jQuery déclenchera tout rappel prêt même si le DOM est chargé avant jQuery (votre code ne devrait pas se soucier de ce qui se passe en premier.).

88
fncomp

Une tentative de réponse à votre question principale:

Pourquoi requirejs fournit-il un plugin domReady quand on peut avoir la fonction $(document).ready(); de jquery?

Ils font deux choses différentes, vraiment. La dépendance domReady de RequireJS signifie que ce module nécessite que le DOM soit complètement chargé avant de pouvoir être exécuté (et peut donc être trouvé dans un nombre quelconque de modules de votre application si vous le souhaitez), alors que $(document).ready() activera plutôt ses fonctions de rappel lorsque DOM est terminé le chargement. 

La différence peut sembler subtile, mais pensez à ceci: j'ai un module qui doit être couplé au DOM d'une certaine manière, de sorte que je peux soit dépendre de domReady et le coupler au moment de la définition du module, soit poser un $(document).ready() à la fin. avec un rappel à une fonction init pour le module. J'appellerais la première approche plus propre.

En attendant, si j'ai un événement qui doit se produire correctement car le DOM est prêt, l'événement $(document).ready() serait le bon choix, car cela ne dépend pas en particulier du fait que RequireJS soit chargé du chargement des modules, à condition que les dépendances du code que vous utilisez ' appelant de sont satisfaits.

Il est également intéressant de noter que vous n'utilisez pas nécessairement RequireJS avec jQuery. Tout module de bibliothèque nécessitant un accès DOM (mais ne reposant pas sur jQuery) serait alors toujours utile en utilisant domReady.

20
Gert Sønderby

Répondre à vos balles par ordre d'apparition:

  • Ils accomplissent tous les deux la même chose
  • Si vous avez des doutes sur jquery pour quelque raison que ce soit, utilisez domReady
  • Correct, utilisez simplement jQuery
  • Parce que tout le monde n'utilise pas jQuery
  • Je suis d'accord, utilisez simplement jQuery
  • Les plugins par définition "alimentent un besoin". 
  • Cross Browser ajax n'est pas une chose. Cross Domain? Il y en a probablement une, et s'il n'y en a pas, il n'est pas nécessaire de se nourrir.
  • , -, -, - D'accord

En fin de compte, vous réfléchissez à cela. C'est un mécanisme pour exécuter javascript sur domReady. Si vous n'aviez pas jQuery, je recommanderais le plugin domReady. Puisque vous avez jQuery, ne chargez pas plus de scripts pour faire quelque chose qui est déjà disponible.

Clarity Update

Le plugin domReady collecte les fonctions à appeler lorsque le document est "prêt". S'il est déjà chargé, ils s'exécutent immédiatement.

JQuery collecte les fonctions et lie un objet différé au dom qui est "prêt". Lorsque le dom est prêt, l'objet différé sera résolu et les fonctions seront activées. Si le dom est déjà "prêt", le différé sera déjà résolu et la fonction sera exécutée immédiatement.

Cela signifie qu'effectivement ils font exactement la même chose.

6
awbergs

Après quelques expériences avec requirejs avec plusieurs modules, je suggère d’utiliser domReady.

J'ai remarqué cette fonction associée à $ (document) .ready (...) n'est pas appelé lorsque plusieurs modules sont chargés par requirejs. Je soupçonne que dom est en train de se préparer avant que tout le code requirejs soit exécuté et que le gestionnaire de rappel jquery ready soit appelé avant de se lier à la fonction définie par l'utilisateur, c'est-à-dire dans le code du module principal.

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