javascript对象组合语法答案

【问题标题】：javascript object composition syntaxjavascript对象组合语法
【发布时间】：2012-02-03 22:27:54
【问题描述】：

在下面的代码中，我希望能够像这样调用 bindClickEvents()：

App.Utils.Modal.bindClickEvents();

但是，我不明白执行此操作所需的语法。

当前代码：

var App = new Object;

App.Modal = {
  bindClickEvents: function() {
    return $('a.alert-modal').click(function(e) {
      return console.log('Alert Callback');
    });
  }
};

$(document).ready(function() {
  return App.Modal.bindClickEvents();
});

【问题讨论】：

始终使用{} 而不是new Object
如果你不介意我问为什么会这样？
看到这个问题：stackoverflow.com/questions/251402/…

标签： javascript object syntax

【解决方案1】：

你可以一口气完成：

var App = {
  Modal : {
    bindClickEvents : function () {/* ... */}
  }
}

或者如果您想将其分解为单独的步骤：

var App = {};
App.Modal = {};
Modal.bindClickEvents = function () {/* ... */};

顺便说一句，关于您的原始问题标题，这不是对象链接。这是对象组合。对象链能够在单个语句中多次调用对象中的方法。

【讨论】：

【解决方案2】：

这是你想要做的吗？

var App = {};

App.Utils = {};

App.Utils.Modal = {
  bindClickEvents: function() {
    return $('a.alert-modal').click(function(e) {
      return console.log('Alert Callback');
    });
  }
};

$(document).ready(function() {
  return App.Utils.Modal.bindClickEvents();
});

【讨论】：

我猜 OP实际上不想要一个 Utils 对象 :-)

【解决方案3】：

对象字面量语法优于 Object 构造函数；一些作者甚至称后者为反模式

这是设置App.Utils.Modal.bindClickEvents();的最简单方法

var App = {
      Utils: {
           Modal: {
               bindClickEvents: function() {
                    return $('a.alert-modal').click(function(e) {
                        return console.log('Alert Callback');
                    });
               }
           }
      }
 };

或者你可以一步一步拼凑：

var App = {};
App.Utils = {};
App.Utils.Modal = {};
App.Utils.Modal.bindClickEvents = function() {
    return $('a.alert-modal').click(function(e) {
      return console.log('Alert Callback');
    });
};

【讨论】：