Bas*_*sem 13 javascript asynchronous requirejs js-amd
我正在将RequireJS集成到CMS中,因此我将其放在页面模板的底部:
<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函数内联.有关正确方法的任何想法吗？
Sim*_*ith 12
这里重要的是在请求任何模块之前设置配置选项.正如您所正确识别的那样,有竞争条件意味着您的配置选项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>
似乎正在发生的事情是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,
....
| 归档时间： |
|
| 查看次数： |
15556 次 |
| 最近记录： |