JavaScript 应用架构：引用对象属性答案

【问题标题】：JavaScript App Architecture: Referencing Object PropertiesJavaScript 应用架构：引用对象属性
【发布时间】：2014-05-06 21:49:22
【问题描述】：

我有一个名为 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()),
            ...
           )},

        ...

        }),
      
      ...
}

【问题讨论】：

是不是有错别字？您可以在 Views 函数开始的调试控制台中检查 App 对象中的内容吗？从这一小块来看，一切似乎都是正确的。并且在您读取之前创建了对象（我假设您在对象定义后调用 App.Views）
@SergeS 我无法在调试控制台中对其进行评估，因为在定义 App 时会发生错误。这是它抛出的错误消息：Uncaught TypeError: Cannot read property 'templates' of undefined
我的错误，我读错了你的代码
this 函数内部的@jOshT 指的是主干视图。我不能使用 self 因为它还没有定义。

标签： javascript jquery backbone.js architecture

【解决方案1】：

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

代码执行顺序如下：

创建了一个对象
y 属性被添加到它的值 x (42)
对象已分配给 x 变量。

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

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

【讨论】：

很好的解释。这让我很容易理解 +1 发生了什么。

【解决方案2】：

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

var App = {};

App.Templates = { ... }

App.Views = { ... }

第二种解决方案是将其拆分为数据部分和函数部分（例如通过创建将创建视图子的init函数。）

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

问题是因为处理器首先创建对象（并执行所有功能）然后才将其分配给变量。您可以玩弄其他构造。

【讨论】：

init 方法的伟大思考。它让我保持我想要的结构并取悦处理器，+1。虽然，我认为你提到的第一种方法更干净，更好的做法。

【解决方案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();

【讨论】：