提问者:小点点

Requirejs domReady插件vs Jquery$(文档)。就绪()?


我正在使用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的负担。

  • 当我们可以使用jQuery的$(文档)时,为什么RequireJS提供了domReady插件。ready()?我不认为包含另一个依赖项有什么好处

据我所知,需要domReady的模块在文档准备好后不会被提取或执行,您也可以在需要jQuery时执行同样的操作:

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

为了更清楚地回答我的问题:要求domNowjQuery之间有什么区别?


共3个答案

匿名用户

看起来所有的关键点都被击中了,但一些细节却漏洞百出。主要是:

它既是一个插件,也是一个模块。如果您将其包含在需求数组中,且带有尾随在与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已经准备好了,那么延迟的函数将被解析,因此函数将立即执行。

这意味着他们实际上做了完全相同的事情。