javascript - 使用 requirejs 和 backbonejs 创建/访问全局对象

Question

本文以通俗易懂的方式呈现，请尽情阅读:)

我有一个主干应用程序，它使用 main.js 文件初始化，如下所示:

require([
    'backbone',
    'app',
    'models/session'
], function (Backbone, Application, SessionModel) {


    //new Application();
    window.App = {
      session: new SessionModel()
    };

    new Application();

    Backbone.history.start();
});

如您所见，requirejs 需要“app”作为第二个参数。

App 只是一个路由器，看起来像这样(不太重要的部分已被删除)

define(function(require){
    'use strict';

    var Backbone = require('backbone'),
        Header = require('views/header'),
        Login = require('views/login');

    var Router = Backbone.Router.extend({

        initialize: function(){
            this.header = new Header();
            this.header.render();
        },


        routes: {
            'login': 'showLogin'
        },

        showLogin: function() {
            this.showView(new Login(), {requiresAuth: false});
            this.header.model.set('title', 'Login');
        },

        showView: function(view, options) {

            if(this.currentView) this.currentView.remove();
            $('.content').html(view.render().$el);
            this.currentView = view;

            return view;
        }

    });

    return Router;
});

这里重要的一点是在第一行我需要

Header = require('views/header');

标题 View 以标准方式需要另一个 View :

LogoutView = require('views/logout');

注销 View 看起来像这样，这里我谈到了问题的本质:

define(function(require){
    'use strict';

    var Backbone = require('backbone'),
        JST = require('templates')

    return Backbone.View.extend({
        model: App.session,

        template: JST['app/scripts/templates/logout.hbs'],

        events: {
            'submit form': 'logout'
        },

        initialize: function(){
            this.listenTo(this.model, 'change', this.render)
        },

        render: function(){
            this.$el.html(this.template(this.model.toJSON()));

            return this;
        },

        logout: function(e){
            //nothing important here
        }

    });
});

正如您在 Backbone.View.extend 之后的第一行看到的，我正在尝试定义 View 的模型属性:

model: App.session,

我认为应该可以访问，因为我正在定义:

window.App = {
      session: new SessionModel()
    };

在 main.js 文件中。

但是好像有个require的问题，因为as require是试图获取程序第一行的所有文件:

require([
    'backbone',
    'app', <<--- in this line it's trying to get all the files required in the app.js 
    'models/session'
], function (Backbone, Application, SessionModel) {

然后我收到这个错误:

Uncaught ReferenceError: App is not defined   logout.js:8

这正是试图访问 App 全局变量的行:

 model: App.session,

这应该在运行 main.js 文件后定义，但它甚至没有达到 require 获取文件的程度，并在 LogoutView 中发现未定义的 App 变量。

我可以通过在 View 的初始化函数中定义模型来解决这个问题，如下所示:

initialize: function(){
    this.model = App.session;
    this.listenTo(this.model, 'change', this.render)
},

但我真正想要的是了解为什么会出现此错误，以及使用 Backbone.js 和 Require.js 创建全局模型的最佳实践是什么。

Answer 1

define 或 require 中的依赖项列表(require 中的第一个参数或您在其他中使用的 simplified wrapper modules) 告诉 RequireJS 它应该在解释当前文件之前加载并解释那些模块。

这是发生了什么:

1. 第一个require有backbone、app、models/session作为依赖
2. 在评估其功能之前，它会加载其依赖项并依次查找它们的依赖项
3. 冲洗并重复，直到达到views/logout
4. views/logout 被解释，您尝试将 App.session 分配给您的 view.model 但那时候不存在你得到一个App is not defined错误

---

一种解决方案是为您的 Session 对象创建一个单例，并在您需要时要求它。

例如，假设您有 globals/session

define(['models/session'], function (SessionModel) {
    return new SessionModel();
});

您可以将您的应用定义为

require([
    'backbone',
    'app',
    'globals/session'
], function (Backbone, Application, session) {

    //new Application();
    window.App = {
      session: session
    };

    new Application();

    Backbone.history.start();
});

并且在您的view/logout

中进行相同的更改

define(function(require){
    'use strict';

    var Backbone = require('backbone'),
        JST = require('templates')

    return Backbone.View.extend({
        model: require('globals/session'),
        ...
    });
});