Requirejs domReady插件vs Jquery $(文档).ready()？

Question

我正在使用RequireJS并且需要在DOM上初始化一些东西.现在,RequireJS提供了domReady插件,但我们已经有了jQuery $(document).ready(),因为我需要jQuery,所以我可以使用它.

所以我有两个选择:

1. 使用domReady插件:

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

2. 用途$(document).ready():

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

我应该选择哪一个,为什么？

这两个选项似乎都按预期工作.我对jQuery没有信心,因为RequireJS正在做它的魔力; 也就是说,由于RequireJS会动态添加脚本,我担心在加载所有动态请求的脚本之前可能会出现DOM.然而,只有domReady当我已经需要jQuery时,RequireJS才会增加额外JS的负担.

问题

• 为什么domReady在我们可以使用jQuery时,RequireJS会提供一个插件$(document).ready();？我没有看到包含另一个依赖项的任何优点.
• 如果只是为了满足需求,那么为什么不提供一个跨浏览器的AJAX呢？

据我所知,domReady文档准备好后,将不会获取或执行需要的模块,并且您也可以执行同样需要jQuery的模块:

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

为了更清楚我的问题:要求domReady或之间有什么区别jQuery？

Answer 1

似乎所有关键点都已经被击中,但一些细节已经破裂.主要是:

domready中

它既是插件又是模块.如果你将它包含在需求数组中,那么尾随!你的模块将无法执行,直到与DOM交互"安全":

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

请注意,加载和执行是不同的; 您希望尽快加载所有文件,这是对时间敏感的内容的执行.

如果你省略了!,那么它只是一个正常的模块恰好是一个函数,它可以采取一个在DOM安全交互之前不会执行的回调:

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

使用domReady作为插件时的优势

依赖于依赖于模块的代码domReady!具有非常显着的优势:它不需要等待DOM准备就绪!

假设我们有一块代码A,它依赖于依赖于模块B的模块domReady!.在DOM准备好之前,模块B将无法完成加载.反过来,A在B加载之前不会运行.

如果你domReady在B中用作常规模块,那么A也需要依赖domReady,并将其代码包装在domReady()函数调用中.

而且,这意味着domReady!享有同样的优势$(document).ready().

重新计算domReady和$(document).ready()之间的差异

两者都以基本相同的方式嗅出DOM是否准备就绪.

害怕jQuery在错误的时间解雇

即使在jQuery之前加载了DOM,jQuery也会触发任何准备好的回调(你的代码不应该关心哪个首先发生).

Answer 2

试图回答您的主要问题:

为什么在我们可以拥有jquery的时候requirejs提供domReady插件$(document).ready();？

他们真的做了两件事.RequireJS' domReady依赖表示该模块需要在运行之前完全加载DOM(因此可以在应用程序中找到任意数量的模块),而$(document).ready()在DOM运行时则触发其回调函数.加载完成.

差异可能看起来很微妙,但想到这一点:我有一个模块需要以某种方式耦合到DOM,所以我可以依赖于domReady它并在模块定义时将它耦合,或者$(document).ready()在它结束时放下它回调模块的init函数.我称第一种方法更清洁.

同时,如果我有一个事件需要在DOM准备就绪时正确发生,那么$(document).ready()事件将成为首选,因为这并不特别依赖于RequireJS正在加载模块,前提是代码的依赖性是你的从中调用它.

值得考虑的是,您不必将RequireJS与jQuery一起使用.任何需要DOM访问(但不依赖于jQuery)的库模块仍然可以使用domReady.

Answer 3

按照外观顺序回答你的子弹:

• 他们都做了同样的事情
• 如果您因任何原因对jquery有所保留,请使用domReady
• 正确,所以只需使用jQuery
• 因为不是每个人都使用jQuery
• 我同意,只需使用jQuery
• 根据定义,插件"满足需求".
• 跨浏览器ajax不是一件事.跨域？可能有,如果没有,则没有必要喂食.
• , -, -, - 好

当它归结为它时,你就是在思考它.这是一种在domReady上执行javascript的机制.如果你没有jQuery,我会提倡domReady插件.因为你有jQuery,所以不要加载更多的脚本来做一些已经可用的东西.

清晰度更新

domReady插件收集文件"准备好"时要调用的函数.如果已经加载,则立即执行.

JQuery收集函数并将延迟对象绑定到"准备好"的dom.当dom准备就绪时,将解析延迟对象并触发函数.如果dom已经"准备好",则延迟将已经解决,因此该函数将立即执行.

这意味着他们有效地完成了同样的事情.