我正在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,
....