Requirejs domready中的插件VS jQuery的$(文件)。就绪()?(Requir

2019-07-21 08:05发布

我使用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准备可能所有的动态请求脚本加载之前发生。 然而,RequireJS将增加额外JS的负担只是为了domReady时,我已经要求jQuery的。

问题

  • 为什么RequireJS提供domReady插件的时候,我们可以有jQuery的$(document).ready(); ? 我没有看到包括其他依赖任何优势。
  • 如果它只是养活需要,那么为什么不提供一个跨浏览器的AJAX?

据我所知,这需要一个模块domReady不会被取出或执行后的文件已准备就绪,你可以做同样的要求的jQuery,以及:

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

要对我的问题更加明确: 什么是需要之间的区别domReadyjQuery

Answer 1:

好像所有的关键点已经击中,但有几个细节告吹了裂缝。 主要是:

domready中

它既是一个插件和模块。 如果你将其包含在要求阵列瓦特/尾随! 你的模块将不会执行,直到它的“安全”为w / 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将无法完成加载。 反过来,B加载之前将不会运行。

如果你使用domReady在B中的常规模块,这也将是必需的依赖domReady ,还有一个包裹里面的代码domReady()函数调用。

此外,这意味着domReady! 享有同样的优势超过$(document).ready()

再domready中和$(文件)。就绪之间的差异()

无论嗅出是否/当DOM在本质上是相同的方式准备。

再担心jQuery的烧制在错误的时间

jQuery将火,即使之前的jQuery的DOM负载是否有任何准备的回调(你的代码不应该关心它首先发生)。



Answer 2:

在回答您的主要问题的尝试:

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

他们做两个不同的东西,真的。 RequireJS” domReady的依赖性意味着这个模块需要被完全加载的DOM可以运行之前(并且因此可以在任何数量的应用程序中的模块,如果你愿意的话中找到),而$(document).ready()代替打完它的回调函数,当DOM加载完成。

这种差异可能看起来细微的,但想到这一点:我有一个需要被连接到以某种方式DOM模块,所以我可以依靠domReady并将其耦合在模块定义的时间,或放下$(document).ready()在它的一端与一个回调到了该模块的初始化功能。 我称之为第一种方法清洁。

同时,如果我有需要发生右为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是已经“准备好”,那么延期就已经被解决,这样的功能会立即执行。

这意味着,切实他们做同样的事情。



Answer 4:

与多个模块requirejs一些尝试后,我建议使用domready中 。

我注意到$(文件)。就绪(...)相关联的功能,当多个模块被加载requirejs不叫。 我怀疑在执行之前所有requirejs代码和以前被与主模块的代码在IE中用户定义函数结合jQuery的准备回调处理器被称为是DOM是准备。

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


Answer 5:

我发现我做这个作为主入口的一部分,所以我所有的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');
        });
    });
});


文章来源: Requirejs domReady plugin vs Jquery $(document).ready()?