javascript - RequireJS 随机中断

Question

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

• JQuery 未定义
• 主干未定义
• 主干的扩展 View 未定义
• 等等等等

而且我无法确定原因，因为它有时可以工作，但当我刷新它时，它突然不工作了。我正在像这样加载我的代码(库后跟 View ):

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 通过垫片配置 ( 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) { ... });