JavaScript应用程序架构:引用对象属性

JavaScript App Architecture: Referencing Object Properties

本文关键字:引用 对象 属性 应用程序 JavaScript      更新时间:2023-09-26

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

您可以通过将空对象定义为App来解决它,这样处理器就知道它是什么:

var App = {};
App.Templates = { ... }
App.Views = { ... }

第二种解决方案是将其拆分为数据部分和功能部分(例如,通过创建init函数来创建Views sub(

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

问题的产生是因为处理器首先创建对象(并执行所有函数(,然后才将其分配给变量。您可以玩其他构造。

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

代码的执行顺序如下:

  1. 创建一个对象
  2. y属性与x(42(的值相加
  3. 对象被指定给x变量

一个简单而明显的解决方案是首先定义App对象,然后定义属性:

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

您有没有想过使用构造函数来创建它?

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=新应用程序((;