我使用RequireJS和需要初始化的DOM准备的东西。 现在,RequireJS提供domReady
的插件 ,但我们已经拥有jQuery的$(document).ready()
这是提供给我,因为我需要jQuery的。
所以,我有两个选择:
使用domReady
的插件:
require(['domReady'], function (domReady) { domReady(function () { // Do my stuff here... }); });
使用$(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...
});
});
要对我的问题更加明确: 什么是需要之间的区别domReady
或jQuery
?
好像所有的关键点已经击中,但有几个细节告吹了裂缝。 主要是:
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负载是否有任何准备的回调(你的代码不应该关心它首先发生)。
在回答您的主要问题的尝试:
为什么requirejs
提供domReady
插件的时候,我们可以有jQuery的$(document).ready();
?
他们做两个不同的东西,真的。 RequireJS” domReady
的依赖性意味着这个模块需要被完全加载的DOM可以运行之前(并且因此可以在任何数量的应用程序中的模块,如果你愿意的话中找到),而$(document).ready()
代替打完它的回调函数,当DOM加载完成。
这种差异可能看起来细微的,但想到这一点:我有一个需要被连接到以某种方式DOM模块,所以我可以依靠domReady
并将其耦合在模块定义的时间,或放下$(document).ready()
在它的一端与一个回调到了该模块的初始化功能。 我称之为第一种方法清洁。
同时,如果我有需要发生右为DOM就绪事件,在$(document).ready()
事件将是去到,因为这确实对RequireJS没有特别的依赖正在做加载模块,提供代码的依赖你调用它得到满足。
这也是值得考虑的是,你不一定用RequireJS使用jQuery。 然后需要访问DOM(但不依赖于jQuery的)任何库模块仍然是通过使用有用domReady
。
回答你的子弹出场顺序:
- 他们都做完成同样的事情
- 如果您对jQuery的不管是什么原因,然后使用domready中保留
- 正确的,所以只使用jQuery
- 因为不是每个人都用了jQuery
- 我同意,只是使用jQuery
- 通过定义插件“喂需求”。
- 跨浏览器的AJAX不是一回事。 跨域? 有可能是的,如果没有那么有没有需要养活。
- , -, -, - 好
当它发生的时候,你这个得太多。 这是对domready中执行JavaScript的一种机制。 如果你没有jQuery的我会主张domready中的插件。 既然你有jQuery的话就不会加载多个脚本做一些事情,已经可用。
清晰更新
在domready中插件收集功能调用时该文件是“准备好”。 如果已经加载然后他们立即执行。
JQuery的收集功能并绑定一个延迟对象的DOM是“准备好”。 当DOM准备的延迟对象将被解决,功能将闪光。 如果DOM是已经“准备好”,那么延期就已经被解决,这样的功能会立即执行。
这意味着,切实他们做同样的事情。
与多个模块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.');
});
});
我发现我做这个作为主入口的一部分,所以我所有的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');
});
});
});