синтаксис композиции объектов javascript

Question

В следующем коде я хочу иметь возможность вызывать 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();
});

Answer 1

Вы можете сделать это за один раз:

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

или, если хотите разбить это на отдельные шаги:

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

Кстати, со ссылкой на исходное название вопросаэто не цепочка объектов.Это объектная композиция.Цепочка объектов может вызывать методы в объекте несколько раз в одном выражении.

Answer 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();
});

Answer 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');
    });
};