Question

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

JQuery未定义
Backbone未定义
未定义骨干的扩展视图
等等等

我无法确定原因，因为它有时有效，但当我刷新它时，它突然没有。我正在加载我的代码（库跟着视图）：

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 config（see docs）支持非AMD模块，它允许您声明这些库之间的依赖关系。配置填充程序后，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) { ... });

RequireJS随机中断

1 个答案: