Require.js bug random无法加载资源 [英] Require.js bug random Failed to load resource
问题描述
我的应用程序使用require.js,我有一个随机错误(50次重新加载时发生1次)
在控制台中写入Require.js:
My application use require.js, I have a random bug (happens 1 time for 50 reload) Require.js write in the console :
无法加载资源:服务器响应状态为404(未找到)
Failed to load resource: the server responded with a status of 404 (Not Found)
确实,需要.js尝试从错误的目录中包含jquery ...
我不知道为什么,大多数时候应用程序工作正常...
Indeed, require.js try to include jquery from a wrong directory... I don't know why, most of the time the application works fine...
我的配置非常简单:
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
animate_from_to: {
deps: ['jquery']
},
bootstrap: {
deps: ['jquery']
},
zoom: {
deps: ['jquery']
},
shop_util: {
deps: ['jquery']
},
pricer: {
deps: ['jquery']
},
filter: {
deps: ['jquery']
},
paginator: {
deps: ['jquery']
},
},
paths: {
bootstrap: 'lib/bootstrap',
jquery: 'lib/jquery-1.9.1',
zoom: 'lib/jquery.zoom.min',
animate_from_to: 'lib/jquery.animate_from_to-1.0.min',
backbone: 'lib/backbone.min',
underscore: 'lib/underscore.min',
text: 'lib/require-text',
shop_util: 'lib/shop_util',
pricer: 'lib/pricer',
filter: 'lib/filter',
paginator: 'lib/paginator',
}
});
谢谢
推荐答案
除了数据主脚本(js / main.js)之外,您的应用程序似乎还有另一个入口点。即使它是同一页面中的后续脚本,也不能依赖于在下一个脚本运行之前完成的数据主脚本,因为它加载了异步属性。
It seems you have another entry point into your application somewhere other than your data-main script (js/main.js). Even if it's a subsequent script in the same page, you cannot depend on your data-main script being completed before the next script runs, since it's loaded with async attribute.
<script data-main="js/main" src="js/lib/require.js"></script>
<!-- foo.js might run before js/main.js !!! -->
<script src="js/foo.js"></script>
您可以通过在js / main.js末尾添加console.log语句来证明这一点。一个在foo.js(或其他)。通常你会看到来自js / main.js然后是foo.js的那个,但是在50个案例中你会看到它们以其他顺序发生。
You can prove this by adding a console.log statement at the end of js/main.js and one in foo.js (or whatever). Normally you will see the one from js/main.js and then foo.js , but in that 1 out of 50 case you'll see them happen in the other order.
有几种策略可以解决这个问题:
There are several strategies to deal with this:
1 - 从数据主脚本中启动所有应用启动和后续要求
当然适用于单页应用程序。所有在一个文件中:
Applies to single-page apps, of course. All in one file:
require.config({
// snip
});
require(['mymodule'], function( mymodule ) {
// do stuff
});
2 - 在require.js脚本标记后面使用内联脚本
不要将上述脚本放在data-main引用的单独文件中,而是在下面放置第二个脚本标记。这是第一个在文档中列出的示例。
Instead of having the above script inside a separate file referenced by data-main, just have a 2nd script tag right below. This is the first example listed in the docs.
主要适用于单页应用
3 - 在require.js脚本标记之前将require config加载到全局变量中
第二个例子已列出在文档中。
<script>
var require = {
paths: { // define them}
shim: { // define them }
};
</script>
<script src="scripts/require.js"></script>
主要适用于单页应用
4 - 嵌入您的必需电话以首先加载配置
这最适合多页应用,并且是推荐的多页垫片应用示例
This works best for multi-page apps and is the one recommended in the multi-page shim app example
<script src="js/lib/require.js"></script>
<script>
//Load common code that includes config, then load the app
//logic for this page. Do the require calls here instead of
//a separate file so after a build there are only 2 HTTP
//requests instead of three.
require(['./js/common'], function (common) {
//js/common sets the baseUrl to be js/ so
//can just ask for 'app/main1' here instead
//of 'js/app/main1'
require(['app/main1']);
});
</script>
这篇关于Require.js bug random无法加载资源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!