是否在HTML正文中加载requireJS模块



我正在CMS中集成RequireJS,所以我把它放在页面模板的底部:

<html>
<body>
{Placeholder1}
<script src="scripts/require.js" data-main="scripts/main"></script>
{Placeholder2}
</body>
</html>

然后,在每个页面上,我想创建一个利用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>

但是我得到了关于jquery、utils和slider 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();
});

我尝试在页头中加载RequireJS和main,但结果不一致。有时jquery、utils和slider会及时加载,而其他时候则不会。就好像页面底部的内联"require"不知道页面上的主RequireJS或依赖规则,但我的断点在main.js中命中,所以我知道它正在被调用。是因为main.js是异步加载的,但页面底部的内联"require"块是在页面渲染时加载的吗?我该如何解决这个问题?

我以前成功使用过RequireJS,但没有CMS。我总是使用"define",并且模块总是异步调用,但从来没有像这样内联调用RequireJS函数。有什么正确的方法吗?

这里重要的是在请求任何模块之前设置配置选项。正如您正确指出的,存在竞争条件,这意味着main.js中的配置选项没有及时加载。最简单的方法是在加载require.js脚本之前将配置选项内联。

<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如何处理多个页面和部分视图?

现在发生的事情似乎是异步加载main.js,同时立即调用内联require。这就是为什么会出现不一致的结果。解决方案是不使用data-main属性,并通过require.js脚本标记下面的脚本标记调用main.js文件。

您仍然可以通过在加载的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,
....

最新更新