Creating/Accessing 全局 object 使用 requirejs 和 backbonejs

Question

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

我有一个 backbone 应用程序，它使用 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');

Header 视图需要标准方式的另一个视图：

LogoutView = require('views/logout');

注销视图看起来像这样，这里我谈到了问题的本质：

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 之后的第一行看到的，我正在尝试定义视图的模型属性：

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 变量。

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

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

但我真正想要的是了解为什么会出现此错误，以及使用 Backbone.js 和 Require.js.

创建全局模型的最佳实践是什么

Answer 1

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

事情是这样的：

第一个 require 有 backbone、app、models/session 作为依赖项
在评估其功能之前，它会加载其依赖项并依次查找它们的依赖项
冲洗并重复，直到达到 views/logout
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'),
        ...
    });
});

Answer 2

下面的代码或多或少是我在发布这个问题之前试图解决这个问题的方法：

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

    var SessionModel = require('models/session')

    var session = (function(){
        if(App.session instanceof SessionModel.constructor){
            return App.session;
        } else {
            App.session = new SessionModel()
            return App.session;
        }
    })();

    return session;
});

但我想我出于某种原因放弃了它，要么是因为 App 没有定义，要么似乎有更好的解决方案。

肮脏的 hack 是我必须创建：

window.App = {};

就在我运行整个申请之前。

Creating/Accessing 全局 object 使用 requirejs 和 backbonejs

Creating/Accessing Global object with requirejs and backbonejs

javascript

global

object

requirejs

backbone.js