JavaScript App Architecture：引用对象属性

Question

我有一个名为App的对象，它包含我的骨干应用程序的所有相关部分。

问题：当我从App中的其他对象中调用App中的对象时，它们是未定义的。

我认为这种情况正在发生，因为它们在App对象中被称为表单，然后定义了它自己的App对象。

如何在app中的对象调用App中的其他对象之前定义app？

我的App对象的一个​​示例，其中App.templates.restaurant对象在Restaurant视图中被调用并返回undefined：

var App = {
      ...

      templates: {
        restaurant: "#RestaurantModel__template",
        menu: "#MenuItemsModel__template"
      },

      ...

      Views: {
        Restaurant: Backbone.View.extend({
            tagName:  "li",
            template: Handlebars.compile($(App.templates.restaurant).html()),
            ...
           )},

        ...

        }),

      ...
}

Answer 1

var x = 42;
x = { y : x }

执行代码的顺序如下：

1. 创建了一个对象
2. 将y属性添加到其中，其值为x（42）
3. 将对象分配给x变量。

一个简单而明显的解决方法是首先定义App对象，然后定义属性：

var App = {};
App.templates = { /* ... */ }
App.Views = { /* ... */ }

Answer 2

您可以通过将空对象定义为App来解决它，以便处理器知道它是什么：

var App = {};

App.Templates = { ... }

App.Views = { ... }

第二个解决方案是将其拆分为数据部分和功能部分（例如，通过创建将创建Views子的init函数。）

var App = {
    Templates : { ... },
    init : function() {
        App.Views = { ... }
    }
}

问题是由于处理器首先创建对象（并执行所有函数）而导致问题，然后它才会将其分配给变量。你可以玩其他结构。

Answer 3

您是否考虑过使用构造函数创建它？

function App() {
    this.templates = {
        restaurant: "#RestaurantModel__template",
        menu: "#MenuItemsModel__template"
    };

    var that = this;
    this.views = {
        Restaurant : Backbone.View.extend({
            tagName:  "li",
            template: Handlebars.compile($(that.templates.restaurant).html()),
        ...
       )},
    }
}

var App = new App（）;