Requirejs domReady插件vs Jquery $（document）.ready（）？ [英] Requirejs domReady plugin vs Jquery $(document).ready()?

问题描述

我使用的是RequireJS，需要在DOM上准备好初始化。现在，RequireJS提供了 domReady 插件，但我们已经有jQuery的 $（document）.ready（），因为我需要jQuery，所以我可以使用它。

所以我有两个选择：使用 domReady 插件：
$ b

1. 
   
   

     require（['domReady']，function（domReady）{
    domReady（function（）{
    //在这里做我的东西... 
   }）; 
   }）; 
     




2. 使用 $（document）.ready（）
   $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ ...
   }）;
   

为什么？

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

/ h2>

• 为什么RequireJS会提供 domReady 插件，当我们可以使用jQuery的 $（文件）。就绪（）; ？我没有看到包含其他依赖项的优势。


• 如果只是为了提供需求，那么为什么不提供一个用于跨浏览器的AJAX？

据我所知，一个需要 domReady 的模块在文档之后不会被提取或执行准备好了，你也可以做同样的要求jQuery：

  require（['jQuery']，function（$）{ 
 $（document）.ready（function（）{
 //在这里做我的东西... 
}）; 
}）; 
  

为了更清楚我的问题：需要 domReady 或 jQuery ？

解决方案

似乎所有的关键点都已经达成，但是一些细节都在通过裂缝。主要是：

domReady

它既是插件又是模块。如果你将它包含在带有！结尾的requirements数组中，那么你的模块将不会执行，直到与DOM交互为安全为止：

  define（['domReady！']，function（）{
 console.info（'DOM在我发生之前就已经准备好了'） ; 
}）; 
  

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

如果你省略！，那么这只是一个正常的模块，它恰好是一个函数，它可以在DOM可以安全地与之交互之前执行一个回调函数：

  define（['domReady']，function（domReady）{
 domReady（function（）{
 console.info（'DOM我碰巧'）; 
}）; 
 console.info（'DOM在发生之前可能没有准备好'）; 
}）; 
  

使用domReady作为插件时的优势

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

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

如果您使用 domReady 作为常规模块在B中，A还需要依赖 domReady ，并将其代码封装在 domReady（）函数调用。

此外，这意味着 domReady！比 $（document）.ready（）。

重申domReady和$（document）.ready（）之间的区别

这两种方法都能以基本相同的方式嗅探DOM是否准备就绪。

害怕jQuery发错time

jQuery将触发任何已准备好的回调，即使DOM在jQuery之前加载（您的代码不应该在意第一个会发生什么）。 b

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

So I have got two options:

1. Use the domReady plugin:

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

2. Use $(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 domReady when I already have jQuery required.

Questions

• Why does RequireJS provide a domReady plugin 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?

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

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

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

解决方案

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:

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:

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

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!

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.

If you were to use domReady as 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.

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

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

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

Re fear of jQuery firing at the wrong time

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

这篇关于Requirejs domReady插件vs Jquery $（document）.ready（）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！