RequireJS 随机中断

Question

我正在尝试使用 Jquery Mobile、Backbone 和 RequireJS 创建一个站点。但我遇到的问题是网站随机中断以及中断不同的原因：

• JQuery 未定义
• 主干未定义
• 未定义主干的扩展视图
• 等等等等等等

而且我无法确定我们的原因，因为它有时会起作用，但是当我刷新它时，它突然不起作用。我正在像这样加载我的代码（库后跟视图）：

requirejs(["/js/libs/jquery-1.8.3.min", "/js/libs/jquery.mobile-1.2.0.min", "/js/libs/underscore-1.4.3", "/js/libs/json2", "/js/libs/backbone.0.9.9"], function($,JQM, underscore, json2, bb) {

});

requirejs(["/js/views/pageview", '/js/views/home'], function(util) {

    HomeView = new HomeView({el : '#home', 'id' : 'home'})
});

我这样做是不是做错了什么？

Answer 1

像 jQuery Mobile、Backbone 和 Underscore 这样的库不是 AMD 模块，只是普通的旧 javascript 文件。而且因为它们不是模块，它们不声明依赖关系，它们只是希望在全局范围内找到$ 或_。

RequireJS 的加载顺序是不确定的——所以不知道哪个会先加载。如果首先评估 Backbone，它将找不到它正在寻找的 window._ 并崩溃。

RequireJS 通过 shim 配置 (see docs) 支持非 AMD 模块，它允许您声明这些库之间的依赖关系。配置 shim 后，RequireJS 知道如何在依赖库之前加载依赖库。

带有 shim 元素的典型 RequireJS 配置如下所示：

requirejs.config({
  //libraries
  paths: {
      jquery:       'libs/jquery/jquery',
      backbone:     'libs/backbone/backbone',
      underscore:   'libs/underscore/underscore',
      jquerymobile: 'libs/jquery.mobile-1.2.0/jquery.mobile-1.2.0',
  },

  //shimming enables loading non-AMD modules
  //define dependencies and an export object
  shim: {
      jquerymobile: {
          deps: ['jquery'],
          exports: 'jQuery.mobile'
      },
      underscore: {
          exports: '_'
      },
      backbone: {
          deps: ['jquerymobile', 'jquery', 'underscore'],
          exports: 'Backbone'
      }
  }
});

paths 部分不是强制性的，您可以只使用文件路径作为 shim 部分中的键。但是，当您使用 paths 别名时，您可以使用短名称而不是整个路径导入这些库：

define(['jquery', 'backbone'], function($, Backbone) { ... });