用Require.js和Backbone定义一个全局的应用命名空间

Defining a global App Namespace with Require.js and Backbone

本文关键字：一个 全局 命名空间 应用 js Require Backbone 定义      更新时间：2023-09-26

我是Require.js的新手，我想做一些我认为很简单的事情，但开始成为一种痛苦。

我试图定义一个全局命名空间为我的骨干应用程序，并加载它作为一个模块。下面是我的命名空间(main.js):

define(
['jquery',
  'underscore',
  'backbone',
  'GlobalRouter'
],
function($, _, Backbone) {
var App= {
    Models: {},
    Views: {},
    Collections: {},
    Routers: {},
    init: function() {
        new App.Routers.GlobalRouter();
        Backbone.history.start();
    }
}
return App;
});
下面是我的config.js文件: 
require.config({
// your configuration key/values here
baseUrl: "js", // generally the same directory as the script used in a data-main attribute for the top level script
paths: {
    'jquery' : '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min',
    'underscore': 'vendor/underscore-min',
    'backbone': 'vendor/backbone-min',
    'marionette': 'vendor/backbone.marionette',
    'main' : 'main'
}, // set up custom paths to libraries, or paths to RequireJS plugins
shim: {
    'underscore': {
        exports: '_'
    },
    'backbone': {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    },
    'main' : {
        deps: ['underscore', 'jquery', 'backbone', 'GlobalRouter'],
        exports: 'TEWC'
    }
} // used for setting up all Shims (see below for more detail)
});
define([
'jquery',
   'underscore',
  'backbone',
  'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
  $(function() {
       App.init();
    });
 }

);下面是我的路由器:

define([
'jquery',
'underscore',
'backbone',
'main'
],
function($, _, Backbone, TEWC) {
TEWC.Routers.GlobalRouter = Backbone.Router.extend({
    routes: {
        "" : "index",
        "documents/:id" : "edit",
        "login" : "login"
    },
    edit: function(id) {
        alert('edit')
    },
    index: function() {
        alert('index')
    },
    login: function() {
        alert('login')
    }
});
});

在过去，我得到一个'应用程序是未定义的错误'。现在，几分钟后，我得到一个加载超时错误，上面写着:

Uncaught Error: Load timeout for modules: main

然而，警报没有触发，main.js似乎没有被加载，但我相信路由器，它没有吠叫，TEWC是未定义的-所以它可能正在加载，即使它不在我的网络选项卡?

这可能是一个新手问题——有人对此有什么见解吗?

下面的代码没有定义GlobalRouter，它被传递给定义回调

define([
'jquery',
   'underscore',
  'backbone',
  'main'
],
function($, _, Backbone, App, GlobalRouter) {
console.log(App)
alert('hit ')
  $(function() {
       App.init();
    });
 }

add GlobalRouter to define

其次，当main加载失败时。你能从控制台检查它试图访问的URL吗?很可能是配置错误。

如果我没有弄错你的问题是，在config.js中，在require.config()之后，你的define()应该是一个require()代替。

进一步解释。您目前有:

define([
'jquery',
   'underscore',
  'backbone',
  'main'
...

这个define应该是require，因为这是你想要执行的代码;它不是一个模块定义。

当然还有前面提到的缺失的GlobalRouter依赖

相关文章：