加载requireJS模块内联HTML正文？ [英] Load requireJS module inline the HTML body?
问题描述
我正在将RequireJS集成到CMS中，因此我将其放在页面模板的底部：
I am integrating RequireJS in a CMS so I placed this on the bottom of my page template:
<html>
<body>
{Placeholder1}
<script src="scripts/require.js" data-main="scripts/main"></script>
{Placeholder2}
</body>
</html>
然后在每个页面上，我想创建一个利用RequireJS的函数。所以我尝试将它放在页面底部：
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:
<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>
但我在jquery，utils和slider js文件上获得了404。好像它没有读我的main.js配置：
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:
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();
});
我尝试在页面头部加载RequireJS和main，但是这样得到了不一致的结果。有时jquery，utils和slider会及时加载，有时则不加载。就好像页面底部的内联require不知道页面上的主要RequireJS或依赖规则，但是我的断点在main.js中命中，所以我知道它正被调用。是因为main.js是异步加载的，但页面底部的内联require块是否在页面渲染中加载？我如何解决这个问题？
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但没有使用CMS。我总是使用define并且总是异步调用模块，但是不必像这样调用RequireJS函数内联。有关正确方法的任何想法吗？
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?
推荐答案
这里重要的是配置选项在任何模块之前设置请求。正如您所正确识别的那样，有竞争条件意味着 main.js 中的配置选项未及时加载。最简单的方法是在加载 require.js 脚本之前将配置选项置于内联。
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.js aren't loaded in time. Simplest way round it would be to put the config options inline before the require.js script is loaded.
<script>
var require = {
baseUrl: <?= $someVar ?>,
paths: {
// etc
}
}
</script>
<script src="scripts/require.js" data-main="scripts/main"></script>
在页面下方：
<script>
require([
'jquery',
'utils',
'slider'
], function ($, utils, slider) {
slider.start();
});
</script>
这篇关于加载requireJS模块内联HTML正文？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
