Руководство по стилю JavaScript для организации файлов

Question

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

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

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

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

Answer 1

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

Итак, я отвечу на ваши вопросы с помощью подхода позднего завтрака . Поздние проекты используют библиотеку 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. Однако это не имеет значения, если речь идет об организации файлов, и выходит за рамки вашего вопроса.)

Answer 2

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

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

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

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

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

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

Answer 3

У Крокфорда есть несколько стилистических рекомендаций , а на сайте исключительной производительности Yahoo есть подробности , которые могут быть вам полезны.

Answer 4

Могу порекомендовать книгу: JavaScript Patterns от Стояна Стефанова. Я думаю одна из лучших книг о javascript