Каков правильный способ структурирования/организации javascript для большого приложения?

Скажем, вы строите большое приложение, и вы ожидаете, что на сайте будет множество javascript. Даже если вы разделили javascript на 1 файл на странице, где используется javascript, у вас все равно будет около 100 файлов javascript.

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

Ответы

Ответ 1

Лично я предпочитаю шаблон модуля для структурирования кода, и я думаю, что эта статья дает отличное введение: http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

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

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

У меня есть опыт работы с YUI Compressor (для которого есть плагин Maven: http://alchim.sourceforge.net/yuicompressor-maven-plugin/compress-mojo.html - я не использовал это сам). Если вам нужно заказать файлы javascript определенным образом (также применительно к CSS), вы можете сделать оболочку script, объединив файлы в заданном порядке заранее (Совет: YUI Compressor по умолчанию - STDIN).

Кроме того, в любом случае вы решите минимизировать свои файлы, вероятно, будет хорошо. Вместо этого вам следует сосредоточиться на том, как вы структурируете свой код, чтобы он хорошо работал на клиенте (должен быть наивысшим приоритетом, чтобы удовлетворить хороший UX), и поддерживается в том виде, который работает для вас.

Вы называете пространства имен, что является хорошей идеей, но я был бы осторожен, чтобы принять слишком много концепций из традиционной объектно-ориентированной области и вместо этого научиться использовать многие из превосходных функций языка javascript:)

Ответ 2

Если общий размер не слишком большой, я бы использовал script для компиляции всех файлов в один файл и минимизации этого файла. Затем я бы использовал агрессивное кеширование и mtime в URL-адресе, чтобы люди загружали этот файл только один раз, но получили новый, как только он был доступен.

Ответ 3

Использование:

  • jslint - следить за качеством кода.
  • require.js - получить только код, необходимый для каждой страницы (или эквивалент).

Организуйте свои js, как и любой другой программный проект, разложите его на роли, обязанности и разделите проблемы.