JavaScript styleguide для организации файлов

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

  • Как файлы JavaScript должны быть организованы в файловой системе во время разработки?
  • Как разделы JavaScript должны быть отделены от HTML и других частей приложения?
  • Как файлы JavaScript должны быть доставлены в реальном приложении, так что меньше кода необходимо загружать по каждому запросу и не слишком много запросов должны быть отправлены?

Есть ли что-то общедоступное в качестве отправной точки для разработки нашего собственного стиля? Каковы ваши впечатления от использования вашего стиля? Легко ли разработчики следуют за этим, какие простые и в чем их трудные части?

(Я знаю, больше вопросов, чем один, но меня интересует вся история здесь. В качестве фона мы использовали JQuery и JSF, но я не думаю, что это повлияет на ответ.)

Ответы

Ответ 1

Если вы делаете большую клиентскую сторону, вы, вероятно, переходите к пути MVC.

Поэтому я отвечу на ваши вопросы с помощью подхода brunch. Проекты Brunch используют библиотеку MVC Backbone.js и имеют строгую структуру каталогов.

Как файлы JavaScript должны быть организованы в файловой системе во время разработки?

src/
  app/
    collections/
    controllers/
    models/
    styles/
    templates/
    views/
  vendor/
build/
  web/
config.yaml

Используйте Stitch для организации ваших файлов в качестве модулей CommonJS. Затем вы сможете использовать require(), чтобы определить зависимость между ними, а также объединить их в один файл позже.

Как разделы JavaScript будут отделены от HTML и других частей приложения?

Каталог

build используется для хранения html; build/web используется для хранения javascript, изображений и css.

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

На этапе сборки весь JavaScript минимизируется и объединяется в один файл (build/web/js/app.js), поэтому клиенту придется делать только один HTTP-запрос, когда он/она посещает ваш сайт в первый раз.

Это, вероятно, хорошая идея сделать процесс строительства максимально простым. Brunch делает это, предлагая команду brunch watch, которая контролирует файловую систему для изменений и мгновенно создает код с помощью Stitch и некоторых других инструментов.

(Следует отметить, что во время разработки проекты бранча также используют CoffeeScript в качестве основного языка, он прозрачно компилируется на бранч перед сшиванием результирующего JavaScript. Однако это не имеет значения, если речь идет о организации файлов, и вне сферы вашего вопроса.)

Ответ 2

Для всех файлов JavaScript определенно используется отдельный каталог. Как можно больше файлов семантически. Один большой конструктор должен соответствовать отдельному файлу. Никогда не используйте префиксы имен файлов, в которых вы можете создать каталог.

Структура каталога в стиле Unix часто встречается на GitHub:

  • src - для исходного JavaScript.
  • lib - для библиотек.
  • tests - для модульных тестов.
  • bin - для исполняемых файлов.
  • dist - для скомпилированных файлов.

Для компиляции мы используем Makefile с целями для производства и разработки. Производственная версия - это все файлы JSHint` ed, обобщенные и объединенные в один. Цель разработки - создание серверной версии script, которая включает все файлы JavaScript динамически (для легкого включения в HTML).

Но в целом это зависит. Мы использовали каталог widget для одного проекта. Этот каталог widget имел набор отдельных подкаталогов виджетов (например, slider, tabs, modal-window), каждый из которых имел следующий макет (вдохновленный DOMLoader):

  • html - для шаблонов HTML.
  • css - для файлов CSS, необходимых для виджета.
  • js - для конструктора JavaScript виджета.

Ответ 4

Я могу порекомендовать книгу: Шаблоны JavaScript Stoyan Stefanov. Я думаю, что одна из лучших книг о javascript