我正在使用RequireJS,需要在DOM上初始化一些东西。现在,RequireJS提供了domReady
插件,但我们已经有了jQuery的$(文档)。ready()
,因为我需要jQuery,所以可以使用它。
所以我有两个选择:
>
require(['domReady'], function (domReady) {
domReady(function () {
// Do my stuff here...
});
});
使用$(文档)。ready()
:
$(document).ready(function() {
// Do my stuff here...
});
我应该选择哪一个,为什么?
这两种选择似乎都如预期的那样起作用。我对jQuery的一个没有信心,因为RequireJS正在发挥它的魔力;也就是说,由于RequireJS将动态添加脚本,我担心DOM就绪可能会在加载所有动态请求的脚本之前发生。然而,当我已经需要jQuery时,RequireJS只会为domReady
增加额外JS的负担。
$(文档)时,为什么RequireJS提供了domReady
插件。ready()代码>?我不认为包含另一个依赖项有什么好处李>
据我所知,需要domReady
的模块在文档准备好后不会被提取或执行,您也可以在需要jQuery时执行同样的操作:
require(['jQuery'], function ($) {
$(document).ready(function () {
// Do my stuff here...
});
});
为了更清楚地回答我的问题:要求domNow
或jQuery
之间有什么区别?
看起来所有的关键点都被击中了,但一些细节却漏洞百出。主要是:
它既是一个插件,也是一个模块。如果您将其包含在需求数组中,且带有尾随代码>在与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');
});
依赖于模块的代码,而模块又依赖于dom就绪!
有一个非常显著的优点:它不需要等待DOM准备好!
假设我们有一个代码块,a,它依赖于一个模块,B,它依赖于domReady代码>。在DOM准备就绪之前,模块B不会完成加载。反过来,A在B加载之前不会运行。
如果要在B中使用dom就绪
作为常规模块,A还需要依赖dom就绪
,以及将其代码包装在dom就绪()
函数调用中。
此外,这意味着domNow!
享有与$(文档)相同的优势。
两者都以基本相同的方式嗅探DOM是否/何时准备就绪。
即使DOM在jQuery之前加载,jQuery也会触发任何就绪回调(您的代码不应该关心哪一个先发生)。
试图回答您的主要问题:
为什么要求JS
提供了一个dom就绪
插件,当我们可以有jQuery的$(文档)。就绪();
?
他们做两件不同的事情,真的。依赖表示这个模块需要在运行DOM之前完全加载(因此,如果您愿意,可以在您的应用程序中的任何数量的模块中找到),而$(文档)。就绪()
相反,当DOM完成加载时,它会触发回调函数。
区别可能看起来很微妙,但请想一想:我有一个模块需要以某种方式耦合到DOM,因此我可以依赖于domReady
,并在模块定义时将其耦合,或者放下一个$(文档)。ready()
,并回调模块的init函数。我认为第一种方法更干净。
同时,如果我有一个事件需要在DOM准备好的时候发生,那么$(文档)。ready()。
还值得考虑的是,您不必将RequireJS与jQuery一起使用。任何需要DOM访问(但不依赖于jQuery)的库模块都可以通过使用domReady
来使用。
按外观顺序回答您的问题:
说到底,你想得太多了。这是一种在domReady上执行javascript的机制。如果你没有jQuery,我会提倡使用domReady插件。既然您有jQuery,那么就不要加载更多的脚本来完成已经可用的任务。
清晰度更新
domReady插件收集文档“就绪”时要调用的函数。如果已经加载,则立即执行。
jQuery收集函数并将延迟对象绑定到dom准备就绪。当dom准备就绪时,延迟的对象将被解析,函数将被触发。如果dom已经准备好了,那么延迟的函数将被解析,因此函数将立即执行。
这意味着他们实际上做了完全相同的事情。