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

html document-ready

Question

Estoy usando RequireJS y necesito inicializar algo en DOM listo. Ahora, RequireJS proporciona el plugin domReady , pero ya tenemos $(document).ready() jQuery, que está disponible para mí ya que he requerido jQuery.

Entonces tengo dos opciones:

1. Use el plugin domReady :

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

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

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

¿Cuál debería elegir y por qué?

Ambas opciones parecen funcionar como se esperaba. No confío en el de jQuery porque RequireJS está haciendo su magia; es decir, dado que RequireJS agregará scripts dinámicamente, me preocupa que DOM listo pueda producirse antes de que se carguen todos los scripts solicitados dinámicamente. Mientras que RequireJS agregará una carga adicional a JS solo para domReady cuando ya se requiera jQuery.

Preguntas

• ¿Por qué RequireJS proporciona un plugin domReady cuando podemos tener jQuery''s $(document).ready(); ? No veo ninguna ventaja de incluir otra dependencia.
• Si es solo para alimentar una necesidad, ¿por qué no proporcionar uno para AJAX entre navegadores?

Por lo que yo sé, un módulo que requiere domReady no será recuperado o ejecutado después de que el documento esté listo, y usted podría hacer lo mismo requiriendo jQuery también:

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

Para ser más claro sobre mi pregunta: ¿cuál es la diferencia entre requerir domReady o jQuery ?

Answer 1

Contestando sus balas por orden de aparición:

• Ambos logran lo mismo
• Si tiene reservas sobre jquery por alguna razón, utilice domReady
• Correcto, solo usa jQuery
• Porque no todos usan jQuery
• Estoy de acuerdo, solo uso jQuery
• Los complementos por definición ''alimentan una necesidad''.
• Cross Browser ajax no es una cosa. ¿Dominio cruzado? Probablemente exista, y si no hay, entonces no hay necesidad de alimentarlo.
• , -, -, - Okay

Cuando se trata de eso, estás pensando demasiado en esto. Es un mecanismo para ejecutar javascript en domReady. Si no tuviera jQuery, recomendaría el plugin domReady. Como tiene jQuery, no cargue más scripts para hacer algo que ya está disponible.

Actualización de claridad

El complemento domReady recopila funciones para llamar cuando el documento está ''listo''. Si ya está cargado, se ejecutan inmediatamente.

JQuery recopila funciones y vincula un objeto diferido a la dom ''lista''. Cuando el dom está listo, el objeto diferido se resolverá y las funciones se dispararán. Si el dom ya está ''listo'', el diferido ya se habrá resuelto, por lo que la función se ejecutará inmediatamente.

Esto significa que efectivamente hacen exactamente lo mismo.

Answer 2

Descubrí que hago esto como parte de la entrada principal para que todo mi javascript tenga garantizado que el DOM esté listo y que se cargue jquery. No estoy seguro de cuán grande es esto, así que bienvenido cualquier comentario, pero aquí está mi 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'');
        });
    });
});

Answer 3

Después de experimentar con requirejs con múltiples módulos, sugiero usar domReady .

Noté que la función asociada con $ (document) .ready (...) no se llama cuando requirejs carga múltiples módulos. Sospecho que dom se está preparando antes de que se ejecute todo el código requirejs y se llame a jquery ready callback handler antes de que se vincule con la función definida por el usuario, es decir, dentro del código del módulo 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.'');
    });
});

Answer 4

Parece que todos los puntos clave ya se vieron afectados, pero algunos detalles no se dieron en el blanco. Principalmente:

domReady

Es tanto un complemento como un módulo. ¡Si lo incluye en la matriz de requisitos con un seguimiento ! su módulo no se ejecutará hasta que sea "seguro" interactuar con el DOM:

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

Tenga en cuenta que cargar y ejecutar son diferentes; desea que todos sus archivos se carguen lo antes posible, es la ejecución de los contenidos que es sensible al tiempo.

Si omites el ! , entonces es solo un módulo normal que resulta ser una función, que puede tomar una devolución de llamada que no se ejecutará antes de que el DOM pueda interactuar con seguridad:

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

Ventaja al usar domReady como un complemento

¡Código que depende de un módulo que a su vez depende de domReady! tiene una ventaja muy significativa: ¡no necesita esperar que el DOM esté listo!

Digamos que tenemos un bloque de código, A, que depende de un módulo, B, que depende de domReady! . El módulo B no terminará de cargarse antes de que el DOM esté listo. A su vez, A no se ejecutará antes de que B haya cargado.

Si domReady usar domReady como un módulo regular en B, también sería necesario que A dependiera de domReady , así como que envuelva su código dentro de una llamada de función domReady() .

Además, esto significa que domReady! disfruta de esa misma ventaja sobre $(document).ready() .

Re las diferencias entre domReady y $ (document) .ready ()

Ambos detectan si / DOM está listo básicamente de la misma manera.

Re miedo a jQuery disparar en el momento equivocado

jQuery activará cualquier devolución de llamada ya preparada, incluso si el DOM se carga antes de que jQuery lo haga (a su código no le importa lo que suceda primero).

Answer 5

Un intento de responder a su pregunta principal:

¿Por qué requirejs proporciona un plugin domReady cuando podemos tener jquery''s $(document).ready(); ?

Ellos hacen dos cosas diferentes, de verdad. La dependencia domReady de domReady significa que este módulo requiere que el DOM esté completamente cargado antes de que pueda ejecutarse (y, por lo tanto, se puede encontrar en cualquier número de módulos en su aplicación si así lo desea), mientras que $(document).ready() dispara sus funciones de devolución de llamada cuando el DOM termina de cargarse.

La diferencia puede parecer sutil, pero piense en esto: tengo un módulo que necesita estar acoplado al DOM de alguna manera, así que puedo depender de domReady y acoplarlo en el momento de definición del módulo, o poner un $(document).ready() al final con una devolución de llamada a una función init para el módulo. Llamaría al primer acercamiento más limpio.

Mientras tanto, si tengo un evento que debe suceder correctamente ya que el DOM está listo, el evento $(document).ready() sería el objetivo, ya que eso en particular no depende de que se haga RequireJS cargando los módulos, siempre y cuando las dependencias del código desde el que lo llamas se cumplen.

También vale la pena considerar que no necesariamente utiliza RequireJS con jQuery. Cualquier módulo de biblioteca que necesite acceso a DOM (pero que no dependa de jQuery) seguirá siendo útil al usar domReady .