Как структурировать проект JavaScript?

В настоящее время я работаю над большим проектом JavaScript, для которого мы хотим определить наш собственный API. Я использую RequireJS в качестве загрузчика зависимостей, и он мне подходит, что позволяет мне определять модули в соответствующих файлах. Я не использую свое собственное пространство имен, модуль возвращает экземпляр, который можно использовать в других модулях, а именно:

define(
    ['imported_module'],
    function(module){
        module.doSomething();
    }
)

Однако по мере того, как количество файлов растет, я бы хотел решить, как структурировать эти файлы в папках. В настоящее время я использую следующую схему для именования моих файлов:

[projectname].[packagename].[ModuleName]

Примером может служить stackoverflow.util.HashMap.js. Я хотел бы представить папку проекта, папку для каждого пакета и переименовать файлы в имя модуля, например:

stackoverflow/util/HashMap.js

Это довольно аккуратно структурирует мой код в папки, однако имя файла теперь отражает только модуль. Я хотел бы определить некоторую маршрутизацию, чтобы иметь возможность определить, как RequireJS должен искать файлы. Пример:

Файл

stackoverflow/util/stackoverflow.util.HashMap.js

Должен быть импортирован выражением

define(['stackoverflow.util.HashMap'],function(HashMap){});

Кто-нибудь имел опыт структурирования больших проектов JavaScript, и если да, не могли бы вы поделиться своим подходом?

Ответы

Ответ 1

Вы не должны указывать информацию о маршрутизации в именах файлов js, это задание пространства имен и путей папки. Так что stackoverflow/util/HashMap.js просто отлично. И вы можете использовать define ( "stackoverflow/util/HashMap",....), чтобы сообщить о зависимости.

Если вам нужно поместить свои модули в разные папки, вы можете настроить пути для своего загрузчика, см. это руководство из RequireJS API.

Нет лучшего способа структурирования ваших js файлов. Но размещение корневого пространства имен в папке src всегда является хорошей практикой. Вы можете увидеть dojo исходный код и исходный код YUI и используйте аналогичные способы для вашего проекта. Они оба являются крупномасштабными проектами Javascript.

Ответ 2

на самом деле лучше получить js lib routing для загрузки всех js с использованием стандартного интерфейса: "js.yoursite.com/lib-0.2.js" должен быть маршрутизатор (php или другой, и может кэшировать запросы). Таким образом, вы можете определить и контролировать целые шаблоны, которые вы используете. Поскольку обычный плагин jquery должен находиться в одном каталоге, с jQuery и с вашими собственными плагинами.

И там вы управляете каждым проектом своими собственными правилами:

jquery/
  plugins/
    jquery.prettyPhoto.js
  jquery.min.js

mySuperJS/
  stable.0/ -- there your production version for 1.0 branch
    module.js
  0.1/
    module.js
  0.2/
    module.js
  0.3/
    module.js

myOtherlib/
  stable.0/ -- production version for all 0.* versions
  stable.1/ -- production version for all 1.0 versions
  0.1/
  0.2/
  0.3/
  0.4/
  0.4.1/
  0.4.1.18/

Мы используем такую ​​структуру около года, и это лучшее для нас. Но иногда мы используем более сложное решение и разделяем все модули для libs, плагинов, инструментов, компонентов и приложений.