11

我的应用程序使用 require.js，我有一个随机错误（50 次重新加载发生 1 次）Require.js 在控制台中写入：

加载资源失败：服务器响应状态为 404（未找到）

确实，require.js 尝试从错误的目录中包含 jquery ......我不知道为什么，大多数时候应用程序工作正常......

我的配置很简单：

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',
  }

});

谢谢

4

1 回答 1

20

除了数据主脚本 (js/main.js) 之外，您似乎还有另一个进入应用程序的入口点。即使它是同一页面中的后续脚本，您也不能依赖数据主脚本在下一个脚本运行之前完成，因为它加载了 async 属性。

<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 分之 1 的情况下，你会看到它们以另一种顺序发生。

有几种策略可以解决这个问题：

1 - 从您的数据主脚本中执行所有应用程序启动和后续要求

当然，适用于单页应用程序。全部在一个文件中：

require.config({
  // snip
});
require(['mymodule'], function( mymodule ) {
  // do stuff
});

2 - 在 require.js 脚本标记之后使用内联脚本

无需将上述脚本放在 data-main 引用的单独文件中，只需在下方添加第二个脚本标记即可。这是文档中列出的第一个示例。

主要适用于单页应用

3 - 在 require.js 脚本标记之前将您的要求配置加载到全局变量中

文档中列出的第二个示例。

<script>
    var require = {
        paths: { // define them}
        shim: { // define them }
    };
</script>
<script src="scripts/require.js"></script>

主要适用于单页应用

4 - 嵌套您的 require 调用以首先加载配置

这对多页应用程序最有效，并且是多页 shim 应用程序示例中推荐的应用程序

<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>

相关问题在这里、这里和这里

于 2013-06-11T12:52:07.817 回答