javascript 加载 requireJS 模块内联 HTML 正文？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12697238/
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
Load requireJS module inline the HTML body?
提问by Basem
I am integrating RequireJS in a CMS so I placed this on the bottom of my page template:
我将 RequireJS 集成到 CMS 中，因此我将其放在页面模板的底部：
<html>
<body>
{Placeholder1}
<script src="scripts/require.js" data-main="scripts/main"></script>
{Placeholder2}
</body>
</html>
Then on each page, I would like to create a function that leverages RequireJS. So I tried placing this on the bottom of the page:
然后在每个页面上，我想创建一个利用 RequireJS 的函数。所以我试着把它放在页面的底部：
<html>
<body>
<h1>Home</h1>
<div class="slider">Slider content</div>
<script src="scripts/require.js" data-main="scripts/main"></script>
<script type="text/javascript">
require([
'jquery',
'utils',
'slider'
], function ($, utils, slider) {
slider.start();
});
</script>
</body>
</html>
But I am getting 404's on jquery, utils and slider js files. It seems like it is not reading my main.js configs that I have:
但是我在 jquery、utils 和滑块 js 文件上得到了 404。它似乎没有读取我的 main.js 配置：
require.config({
paths: {
jquery: 'libs/jquery-1.8.1.min',
utils: 'libs/utils',
slider: 'libs/jquery.slider.min'
},
shim: {
slider: ['jquery']
}
});
require([ 'utils' ], function (utils) {
utils.init();
});
I tried loading RequireJS and main in the page head, but got inconsistent results that way. Sometimes jquery, utils and slider would be loaded in time and other times not. It is as if the inline "require" on the bottom of the page is not aware of the main RequireJS on page or the dependency rules, but my breakpoint hits in main.js so I know it is being called. Is it because main.js gets loaded asynchronously but my inline "require" block on the bottom of the page is loaded on page render? How do I get around this?
我尝试在页面头中加载 RequireJS 和 main，但以这种方式得到了不一致的结果。有时 jquery、utils 和滑块会及时加载，有时则不会。就好像页面底部的内联“require”不知道页面上的主要 RequireJS 或依赖项规则，但我的断点在 main.js 中命中，所以我知道它正在被调用。是不是因为 main.js 是异步加载的，但是页面底部的内联“require”块是在页面渲染时加载的？我该如何解决这个问题？
I have used RequireJS successfully before but without a CMS. I always used "define" and had modules always called asychronously, but never had to call RequireJS function inline like this. Any ideas on the correct way to do this?
我之前成功使用过 RequireJS，但没有使用 CMS。我总是使用“定义”并且总是异步调用模块，但从来没有像这样内联调用 RequireJS 函数。关于正确方法的任何想法？
采纳答案by Simon Smith
The important thing here is that the config options are set before any modules are requested. As you have rightly identified, there are race conditions that mean the config options in your main.jsaren't loaded in time. Simplest way round it would be to put the config options inline before the require.jsscript is loaded.
这里重要的是在请求任何模块之前设置配置选项。正如您正确识别的那样，存在竞争条件意味着您的配置选项main.js未及时加载。最简单的方法require.js是在加载脚本之前将配置选项内联。
<script>
var require = {
baseUrl: <?= $someVar ?>,
paths: {
// etc
}
}
</script>
<script src="scripts/require.js" data-main="scripts/main"></script>
Further down the page:
在页面下方：
<script>
require([
'jquery',
'utils',
'slider'
], function ($, utils, slider) {
slider.start();
});
</script>
See also How does RequireJS work with multiple pages and partial views?
回答by Basem
It seems like what is happening is that the main.js is being loaded asynchronously while the inline require is called right away. This is why there are inconsistent results. The solution is to NOT use the data-main attribute and call the main.js file via script tag underneath the require.js script tag.
似乎正在发生的事情是 main.js 正在异步加载，而立即调用内联 require。这就是结果不一致的原因。解决方案是不使用 data-main 属性并通过 require.js 脚本标签下的脚本标签调用 main.js 文件。
You can still determine the baseUrl from the loaded main.js file by doing this in there:
您仍然可以通过在那里执行此操作来从加载的 main.js 文件中确定 baseUrl：
//DETERMINE BASE URL FROM CURRENT SCRIPT PATH
var scripts = document.getElementsByTagName("script");
var src = scripts[scripts.length-1].src;
var baseUrl = src.substring(src.indexOf(document.location.pathname), src.lastIndexOf('/'));
//CONFIGURE LIBRARIES AND DEPENDENCIES VIA REQUIREJS
require.config({
baseUrl: baseUrl,
....
