Объектный литературный или модульный шаблон дизайна Javascript

Это, возможно, уже было задано много раз, и я искал вокруг SO, но пока все ответы, которые я прочитал, не совсем то, что я ищу.

Я работаю над сайтом с умеренными элементами DOM, показывающими/скрывающимися, некоторыми вызовами AJAX и, возможно, чем-то другим. Таким образом, у меня будут два основных файла script (стандарт HTML-Boilerplate)

plugins.js // third party plugins here
site.js // all my site specific code here

Раньше я использую шаблон шаблона объектного литерала, поэтому мой site.js выглядит примерно так:

var site = {
  version: '0.1',
  init: function() {
    site.registerEvents();
  },
  registerEvents: function() {
    $('.back-to-top').on('click', site.scrollToTop);
  },
  scrollToTop: function() {
    $('body').animate({scrollTop: 0}, 400);
  }
};

$(function() {
  site.init();
});

До сих пор это было хорошо, это хорошо читаемо, все методы являются общедоступными (я вроде как это, так как я могу проверить их с помощью инструментов Chrome Dev прямо, если это необходимо). Тем не менее, я намерен отделить некоторые функциональные возможности сайта от более модульного стиля, поэтому я хочу иметь что-то вроде этого ниже кода выше (или в отдельных файлах):

site.auth = {
  init: function() {
    site.auth.doms.loginButton.on('click', site.auth.events.onLoginButtonClicked);
  },
  doms: {
    loginButton: $('.login'),
    registerButton: $('.register')
  },
  events: {
    onLoginButtonClicked: function() {
    }
  },
  fbLogin: function() {
  }
};

site.dashboard = {
};

site.quiz = {
};

// more modules

Как вы можете видеть, это очень читаемо. Однако есть один очевидный недостаток, и я должен написать код типа site.auth.doms.loginButton и site.auth.events.onLoginButtonClicked. Вдруг становится трудно читать, и он будет только увеличиваться дольше, чем сложнее получить функциональность. Затем я попробовал модульный шаблон:

var site = (function() {
  function init() {
    $('.back-to-top').on('click', scrollToTop);
    site.auth.init();
  }

  function scrollToTop() {
    $('body').animate({scrollTop: 0}, 400);
  }

  return {
    init: init
  }
})();

site.auth = (function() {
  var doms = {
    loginButton: $('.login'),
    registerButton: $('.register')
  };

  function init() {
    doms.loginButton.on('click', onLoginButtonClicked);
  }

  function onLoginButtonClicked() {

  }

  return {
    init: init
  }
})();

// more modules

Как вы можете видеть, эти длинные имена исчезли, но потом, наверное, мне нужно запустить все остальные модули в функции site.init(), чтобы построить их все? Тогда я должен помнить о том, чтобы возвращать функции, которые должны быть доступны другими модулями. Оба они в порядке, я думаю, хотя и немного хлопот, но в целом, я на лучший рабочий процесс, работающий с модульным шаблоном?

// ex: var rectangle = { width : 12, height : 24, area : 0, perimeter : 0, init_area : function () { this.area = this.width * this.height; return this; }, // buh... init_perimeter : function () { this.perimeter = (this.width * 2) + (this.height * 2); return this; } // double-buh... }.init_area().init_perimeter();

var rectangle = (function (width, height) { var public_interface = { width : width, height : height, area : width * height, perimeter : (2 * width) + (2 * height) }; return public_interface; }(12, 24));

Ответ 1