Лучшие практики для управления и развертывания больших приложений JavaScript - PullRequest
Новая
       29

Лучшие практики для управления и развертывания больших приложений JavaScript

27 голосов
/ 19 августа 2008

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

Наш код JavaScript примерно "namespaced" как: 

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? Любые другие полезные советы или лучшие практики?

Ответы [ 8 ]

11 голосов
/ 19 августа 2008

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

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

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

8 голосов
/ 02 сентября 2008

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

Это инструмент разработчика 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");
5 голосов
/ 20 августа 2008

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

3 голосов
/ 20 августа 2008

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

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

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

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

2 голосов
/ 19 августа 2008

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

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

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

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

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

1 голос
/ 27 июля 2013

Моя стратегия состоит из 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

1 голос
/ 25 августа 2008

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

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

...