javascript 如何正确使用domReady requireJS插件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9361737/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use the domReady requireJS plugin correctly
提问by mark
Here is my main.js before using domReady:
这是我在使用 domReady 之前的 main.js：
require.config({
paths : {
loader : 'libs/backbone/loader',
jQuery : 'libs/jquery/jquery-module',
Underscore : 'libs/underscore/underscore-module',
Backbone : 'libs/backbone/backbone-module',
templates : '../Templates'
}
});
require([ 'app' ], function(app) {
app.initialize();
});
And app.js:
和 app.js：
define([ 'jQuery', 'Underscore', 'Backbone', 'router',
'services/Initializers/MainFrameInitializer',
'services/Initializers/FlowsViewsInitializer',
'services/Initializers/EditModuleInitializer',
'services/Sandboxes/ModulesNavigationSandbox',
'services/Sandboxes/ApplicationStateSandbox', 'DataModel/Constants' ],
function($, _, Backbone, Router, MainFrameInitializer,
FlowsViewsInitializer, EditModuleInitializer, ModulesNavigationSandbox,
ApplicationStateSandbox, Constants) {
var initialize = function() {
// Pass in our Router module and call it's initialize function
MainFrameInitializer.initialize();
FlowsViewsInitializer.initialize();
EditModuleInitializer.initialize();
ApplicationStateSandbox.startCheckStatus();
ModulesNavigationSandbox.navigate(Constants.Modules.Home);
// Router.initialize();
};
return {
initialize : initialize
};
});
All works fine until I optimizethe project. I have figured out, that the script starts to run before the DOM is ready, something that was not true before the optimization. Anyway, I wish to use the domReadyplugin to make sure the DOM is loaded first.
一切正常，直到我优化项目。我发现，脚本在 DOM 准备好之前就开始运行，这在优化之前是不正确的。无论如何，我希望使用domReady插件来确保首先加载 DOM。
But, apparently, I have no idea how to do it correctly. Here is the new version of main.js:
但是，显然，我不知道如何正确地做到这一点。这是 main.js 的新版本：
require.config({
paths : {
loader : 'libs/backbone/loader',
jQuery : 'libs/jquery/jquery-module',
Underscore : 'libs/underscore/underscore-module',
Backbone : 'libs/backbone/backbone-module',
templates : '../Templates'
}
});
require([ 'domReady', 'app' ], function(domReady, app) {
domReady(app.initialize);
});
Very neat and very wrong, because appis loaded in parallel with domReadybefore the DOM is ready.
非常整洁也非常错误，因为app是在domReadyDOM 准备好之前并行加载的。
How do I fix it?
我如何解决它？
Thanks.
谢谢。
EDIT
编辑
I think I have understood our problem. The constructor functions of the appdependencies should not run any DOM dependent code. They should just return functions, capturing the DOM dependent logic. That logic should be executed from app.initialize, which is guaranteed to be run when the DOM is ready.
我想我已经理解我们的问题了。app依赖项的构造函数不应运行任何 DOM 依赖代码。他们应该只返回函数，捕获 DOM 依赖逻辑。该逻辑应该从 执行app.initialize，保证在 DOM 准备好时运行。
回答by ggozad
Perhaps I am missing something, but wouldn't you make your life a lot easier by doing:
也许我遗漏了一些东西，但你不会通过以下方式让你的生活更轻松：
require(['jQuery', 'app' ], function(jQuery, app) {
jQuery(function ($) {
app.initialize();
});
});
in your main.js?
在你的main.js？
回答by brent
By requiring the app from inside the domReady callback function, you should be able to require the domReady module, and then the app module synchronously.
通过从 domReady 回调函数内部请求应用程序，您应该能够同步请求 domReady 模块和应用程序模块。
define(['require', 'domReady'], function(require, domReady) {
domReady(function() {
require(['app'], function(app) {
app.initialize();
});
});
});
回答by widged
If you follow the doc at: http://requirejs.org/docs/jquery.html, you will be invited to embed a require-jquery library in the head of your document:
如果您遵循以下文档：http://requirejs.org/docs/jquery.html，您将被邀请在文档的头部嵌入一个 require-jquery 库：
<script data-main="main" src="libs/require-jquery.js"></script>
However, if you look at the source for the example, made available on github, you will see that 'require-jquery.js' is generated by simple concatenation of the require lib file and the jquery lib file:
但是，如果您查看示例的源代码，在github 上可用，您将看到“require-jquery.js”是通过 require lib 文件和 jquery lib 文件的简单连接生成的：
cat require.js jquery.js > ../jquery-require-sample/webapp/scripts/require-jquery.js
That means that you could replace the script embed in the head part with the following script embeds anywhere in your document (for instance at the very bottom of it).
这意味着您可以将嵌入在头部的脚本替换为以下嵌入文档中任何位置的脚本（例如在它的最底部）。
<script src="libs/require.js"></script>
<script src="libs/jquery-1.8.0.js"></script>
<script>require(["main"]);</script>
Because the jquery lib defines itself as a module with:
因为 jquery lib 将自己定义为一个模块，其中包含：
define( "jquery", [], function () { return jQuery; } );
You can thereafter use jquery as a require reference in any of your script. For instance:
此后，您可以在任何脚本中使用 jquery 作为需要引用。例如：
require(["jquery"], function($) { }
