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

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

提问by Yugal Jindle

I am using RequireJS and need to initialize something on DOM ready. Now, RequireJS provides the domReadyplugin, but we already have jQuery's $(document).ready(), which is available to me since I have required jQuery.

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

So I have got two options:

所以我有两个选择：

1. Use the domReadyplugin:

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

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

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

1. 使用domReady插件：

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

2. 使用$(document).ready()：

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

Which one should I choose, and why?

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

Both the options seems to work as expected. I am not confident in the jQuery's one because RequireJS is doing its magic; that is, since RequireJS will dynamically add scripts, I'm worried that DOM ready may occur before all of the dynamically-requested scripts are loaded. Whereas, RequireJS will add a burden on additional JS just for domReadywhen I already have jQuery required.

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

Questions

问题

• Why does RequireJS provide a domReadyplugin when we can have jQuery's $(document).ready();? I don't see any advantage of including another dependency.
• If its just to feed a need, then why not provide one for cross-browser AJAX?

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

As far as I know, a module that requires domReadywon't be fetched or executed after the document is ready, and you could do the same requiring jQuery as well:

据我所知，domReady在文档准备好后，将不会获取或执行需要的模块，您也可以使用 jQuery 执行相同的操作：

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

To be more clear on my question: what's the difference between requiring domReadyor jQuery?

更清楚地说明我的问题：requiredomReady或jQuery?

采纳答案by fncomp

It seems like all the key points were already hit, but a few details fell through the cracks. Mainly:

似乎所有的关键点都已经命中了，但一些细节却被遗漏了。主要是：

domReady

准备好

It is both a plugin and a module. If you include it in the the requirements array w/ a trailing !your module won't execute until it's "safe" to interact w/ the DOM:

它既是插件又是模块。如果您将它包含在带有尾随的需求数组中，!您的模块将不会执行，直到它与 DOM 交互“安全”：

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

Note that loading and executing are different; you want all your files to load as soon as possible, it's the execution of the contents that is time sensitive.

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

If you omit the !, then it's just a normal module that happens to be a function, which can take a callback that won't execute before the DOM is safe to interact with:

如果省略!，那么它只是一个普通模块，恰好是一个函数，它可以接受在 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');        
});

Advantage when using domReady as a plugin

使用 domReady 作为插件的优势

Code that depends on a module that in turn depends on domReady!has a very significant advantage: It does not need to wait for the DOM to be ready!

依赖一个又依赖的模块的代码domReady!有一个非常显着的优势：不需要等待 DOM 准备好！

Say that we have a block of code, A, that depends on a module, B, that depends on domReady!. Module B will not finish loading before the DOM is ready. In turn, A will not run before B has loaded.

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

If you were to use domReadyas a regular module in B, it would also be necessary for A to depend on domReady, as well as wrapping its code inside a domReady()function call.

如果您要domReady在 B 中用作常规模块，则 A 还需要依赖domReady，并将其代码包装在domReady()函数调用中。

Furthermore, this means that domReady!enjoys that same advantage over $(document).ready().

此外，这意味着domReady!与$(document).ready().

Re the differences between domReady and $(document).ready()

重新 domReady 和 $(document).ready() 之间的区别

Both sniff out whether/when the DOM is ready in essentially the same way.

两者都以基本相同的方式嗅探 DOM 是否/何时准备就绪。

Re fear of jQuery firing at the wrong time

重新担心 jQuery 在错误的时间触发

jQuery will fire any ready callback even if the DOM loads before jQuery does (your code shouldn't care which happens first.).

即使 DOM 在 jQuery 加载之前加载，jQuery 也会触发任何就绪回调（您的代码不应该关心哪个先发生。）。

回答by Gert S?nderby

An attempt at answering your main question:

尝试回答您的主要问题：

Why does requirejsprovides a domReadyplugin when we can have jquery's $(document).ready();?

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

They do two different things, really. RequireJS' domReadydependency signifies that this module requires the DOM to be completely loaded before it can be run (and can therefore be found in any number of modules in your application if you so desire), while $(document).ready()instead fires off its callback functions when the DOM is done loading.

他们做两件不同的事情，真的。RequireJS 的domReady依赖意味着这个模块需要在运行之前完全加载 DOM（因此可以在你的应用程序中的任意数量的模块中找到，如果你愿意的话），而$(document).ready()当 DOM 启动时，它会触发它的回调函数加载完成。

The difference may seem subtle, but think of this: I have a module that needs to be coupled to the DOM in some way, so I can either depend on domReadyand couple it at module definition time, or put down a $(document).ready()at the end of it with a callback to an init function for the module. I'd call the first approach cleaner.

差异可能看起来很微妙，但请想一想：我有一个模块需要以某种方式耦合到 DOM，因此我可以domReady在模块定义时依赖并耦合它，或者$(document).ready()在它的末尾放下 a带有对模块 init 函数的回调。我会称第一种方法更清洁。

Meanwhile, if I have an event that needs to happen right as the DOM is ready, the $(document).ready()event would be the go-to, since that does not in particular depend on RequireJS being done loading modules, provided the dependencies of the code you're calling it from are met.

同时，如果我有一个需要在 DOM 准备就绪时发生的$(document).ready()事件，则该事件将成为首选，因为这并不特别依赖于 RequireJS 正在加载模块，前提是您所使用的代码的依赖关系从满足调用它。

It's also worth considering that you do not necessarily use RequireJS with jQuery. Any library module that needs DOM access (but does not rely on jQuery) would then still be useful by using domReady.

同样值得考虑的是，您不一定将 RequireJS 与 jQuery 一起使用。任何需要 DOM 访问（但不依赖于 jQuery）的库模块仍然可以通过使用domReady.

回答by awbergs

Answering your bullets in order of appearance:

按出现顺序回答你的子弹：

• They both do accomplish the same thing
• If you have reservations about jquery for whatever reason then use domReady
• Correct, so just use jQuery
• Because not everyone uses jQuery
• I agree, just use jQuery
• Plugins by definition 'feed a need'.
• Cross Browser ajax isn't a thing. Cross Domain? There probably is, and if there isn't then there is no need to feed.
• , -, -, - Ok

• 他们都完成了同样的事情
• 如果您出于某种原因对 jquery 有所保留，请使用 domReady
• 正确，所以只需使用 jQuery
• 因为不是每个人都使用 jQuery
• 我同意，只需使用 jQuery
• 插件的定义是“满足需求”。
• 跨浏览器 ajax 不是一回事。跨域？可能有，如果没有，则不需要喂食。
• ， -， -， - 好的

When it comes down to it, you are overthinking this. It's a mechanism to execute javascript on domReady. If you didn't have jQuery I would advocate the domReady plugin. Since you have jQuery then don't load more scripts to do something that is already available.

归根结底，你想多了。这是一种在 domReady 上执行 javascript 的机制。如果您没有 jQuery，我会提倡使用 domReady 插件。因为你有 jQuery，所以不要加载更多的脚本来做一些已经可用的事情。

Clarity Update

清晰度更新

The domReady plugin collects functionsto call when the document is 'ready'. If it is already loaded then they execute immediately.

domReady 插件收集文档“就绪”时要调用的函数。如果它已经加载，那么它们会立即执行。

JQuery collects functions and binds a deferred objectto the dom being 'ready'. When the dom is ready the deferred object will be resolved and the functions will fire. If the dom is already 'ready' then the deferred will already be resolved so the function will execute immediately.

JQuery 收集函数并将延迟对象绑定到“准备好”的 dom。当 dom 准备好时，延迟对象将被解析并且函数将被触发。如果 dom 已经“准备好了”，那么 deferred 将已经被解析，因此该函数将立即执行。

This means that effectively they do exactly the same thing.

这意味着它们有效地做完全相同的事情。

回答by Marcin Nowakowski

After some experimenting with requirejs with multiple modules I suggest using domReady.

在对包含多个模块的 requirejs 进行了一些试验后，我建议使用domReady。

I noticed that function associated with $(document).ready(...)is not called when multiple modules are loaded by requirejs. I suspect that dom is getting ready before all requirejs code is executed and jquery ready callback handler is called before it gets bound with user defined function i.e. within main module code.

我注意到当 requirejs 加载多个模块时，不会调用与$(document).ready(...)关联的函数。我怀疑 dom 在执行所有 requirejs 代码之前就准备好了，并且在与用户定义的函数（即在主模块代码中）绑定之前调用了 jquery 就绪回调处理程序。

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

回答by Bil Simser

I found I do this as part of the main entry so that all of my javascript is guaranteed that the DOM is ready and jquery is loaded. Not sure how great this is so welcome any feedback but here's my main.js:

我发现我这样做是作为主条目的一部分，这样我的所有 javascript 都可以保证 DOM 已准备就绪并且 jquery 已加载。不知道这有多棒，欢迎任何反馈，但这是我的 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');
        });
    });
});