Рекомендации по управлению и развертыванию больших приложений на JavaScript

StackOverflow https://stackoverflow.com/questions/15390

Вопрос

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

Наш код JavaScript примерно "распределен по именам" следующим образом:

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

На данный момент у нас есть один (распакованный, необработанный, легко читаемый) файл JavaScript для обработки всей бизнес-логики веб-приложения.Кроме того, существует jQuery и несколько расширений jQuery.Проблема, с которой мы сталкиваемся, заключается в том, что для этого требуется навсегда чтобы найти что-либо в коде JavaScript, в браузере все еще есть дюжина файлов для загрузки.

Часто ли бывает несколько "исходных" файлов JavaScript, которые "компилируются" в один конечный сжатый файл JavaScript?Есть еще какие-нибудь полезные советы или рекомендации?

Это было полезно?

Решение

Подход, который, как я обнаружил, работает для меня, заключается в создании отдельных JS-файлов для каждого класса (точно так же, как вы бы делали в Java, C # и других).В качестве альтернативы вы можете сгруппировать свой JS по функциональным областям приложения, если вам так проще ориентироваться.

Если вы поместите все свои JS-файлы в один каталог, вы можете заставить свою серверную среду (например, PHP) перебирать каждый файл в этом каталоге и выводить <script src='/path/to/js/$file.js' type='text/javascript'> в каком-нибудь заголовочном файле, который включен во все ваши страницы пользовательского интерфейса.Вы найдете эту автоматическую загрузку особенно удобной, если вы регулярно создаете и удаляете JS-файлы.

При развертывании в производство у вас должен быть скрипт, который объединяет их все в один JS-файл и "минимизирует" его, чтобы уменьшить размер.

Другие советы

Кроме того, я предлагаю вам воспользоваться услугами Google API библиотек AJAX для того, чтобы загрузить внешние библиотеки.

Это инструмент Google для разработчиков, который объединяет основные библиотеки JavaScript и упрощает их развертывание, обновление и облегчение, всегда используя сжатые версии.

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

Используйте это таким образом :

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

Есть отличная статья о Vitamin Кэла Хендерсона из Flickr fame о том, как они оптимизируют доставку своих CSS и JavaScript: http://www.iamcal.com/serving-javascript-fast/

Просто боковой код - Стив уже указывал, что вам действительно следует "минимизировать" свои JS-файлы.В JS пробелы действительно имеют значение.Если у вас есть тысяча строк JS и вы удаляете только ненужные новые строки, вы уже сохранили около 1 тыс.Я думаю, вы поняли, в чем дело.

Для этой работы есть инструменты.И вы никогда не должны изменять "уменьшенный" / урезанный / запутанный JS вручную!Никогда!

В наших больших приложениях на javascript мы записываем весь наш код в небольшие отдельные файлы - по одному файлу на "класс" или функциональную группу, используя структуру пространства имен / каталогов, подобную Java.Тогда мы имеем:

  • Этап компиляции, который берет весь наш код и минимизирует его (используя вариант JSMin), чтобы уменьшить размер загрузки
  • Этап компиляции, который берет классы, которые всегда или почти всегда необходимы, и объединяет их в большой пакет, чтобы сократить количество обходов сервера
  • "Загрузчик классов", который загружает остальные классы во время выполнения по требованию.

Для повышения эффективности сервера лучше всего объединить весь ваш javascript в один уменьшенный файл.

Определите порядок, в котором требуется код, а затем поместите сокращенный код в том порядке, в каком он требуется, в один файл.

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

Я бы рекомендовал разделить файлы для разработки, а затем создать скрипт сборки, чтобы объединить / скомпилировать все.

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

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

Единственная причина, по которой я бы не объединял файлы, заключается в том, что мне не нужны все файлы на всех страницах.

Моя стратегия состоит из 2 основных приемов:Модули AMD (чтобы избежать десятков тегов скрипта) и шаблон модуля (чтобы избежать тесной связи частей вашего приложения)

Модули AMD:очень прямолинейно, смотрите здесь: http://requirejs.org/docs/api.html кроме того, он способен упаковать все части вашего приложения в один уменьшенный JS-файл: http://requirejs.org/docs/optimization.html

Шаблон модуля:я пользовался этой Библиотекой: https://github.com/flosse/scaleApp теперь вы спрашиваете , что это ?больше информации здесь: http://www.youtube.com/watch?v=7BGvy-S-Iag

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top