Как я должен думать о пространствах имен моего приложения JavaScript?

Question

Я создаю приложение, которое имеет единственное глобальное пространство имен, например:

var myApp = {};

У меня есть куча различных «модулей» многократного использования, состоящих из моделей, представлений и контроллеров.

//Bar chart module code
org.example.chart.bar.module
org.example.chart.bar.model
org.example.chart.bar.view
org.example.chart.bar.controller

У меня также есть большой одноэлементный источник данных и DataManager для загрузки данных в источник данных:

org.example.data.dataSource
org.example.data.dataManager //populates the dataSource with CSV data

И, наконец, строки перевода и настройки, которые должны быть доступны в приложении:

org.example.static.translations
org.example.static.settings

Как бы вы (ре) организовали это так, чтобы у меня был легкий доступ к синглетонам уровня приложения (таким как dataSource, dataManager, переводы и т. Д.) И можно было легко создавать экземпляры многократно используемых модулей, которые попадают в область действия текущегоЭкземпляр приложения?

(Например, вы уже с самого начала использовали одно и то же пространство имен для своих «классов» и своего приложения? Или, возможно, вы бы делали ссылки следующим образом: myApp.translations = org.example.static.translations?)

Answer 1

Нет, у нас нет пространства имен.Мы пишем модульный код и используем загрузчики модулей.

Примером загрузчика модулей будет require.js или browserify или seajs .

И пример модуля будет что-то вроде:

(function () {
  var jQuery = require("jQuery");
  var chart = require("chart"); 

  ...

  define("moduleName", moduleObject);
})();

Answer 2

Попробуйте использовать что-то вроде RequireJS для организации ваших модулей.

Несколько отличных ресурсов от Адди Османи:

http://addyosmani.com/largescalejavascript/

http://addyosmani.com/blog/large-scale-jquery/

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

Answer 3

Ничто не мешает вам добавить другое имя в класс. Например.

 org.ds = org.example.data.dataSource;

тогда вы можете позвонить

 org.ds.getDatasource();

вместо

 org.example.data.dataSource.getDatasource();

но оба будут работать.

РЕДАКТИРОВАТЬ: Вы также можете создавать другие более простые функции, которые вызывают его, вынимая его из структуры oo

 var dataSource = function () { return org.example.data.dataSource.getDatasource(); };