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

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

18.08.2008 23:45:14
8 ОТВЕТОВ
РЕШЕНИЕ

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

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

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

11
19.08.2008 00:02:42
я не думаю, что это хорошая идея - вы, скорее всего, окажетесь в джунглях тега скрипта внутри вашего HTML-документа. рассмотрите возможность использования загрузчика AMD, такого как: requirejs.org
martyglaubitz 27.07.2013 14:48:48

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

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

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

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

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

2
19.08.2008 00:09:03
Я думал, что javascript предназначен для загрузки в голову, но вы говорите, чтобы подтолкнуть JS к телу?
Andrew 2.09.2010 09:31:22
@SocialAddict Да, почти во всех случаях вы хотите, чтобы ваш JS был последним в теге body. Они только в тот момент, когда вы должны поставить JS наверх, - это если вам нужно выполнить его перед обработкой остальной части содержимого на странице. Поскольку JS блокирует рендеринг, размещение его в нижней части ускоряет загрузку, поскольку позволяет браузеру загружать больше контента асинхронно. Ознакомьтесь с рекомендациями Yahoo !. на сайте JS: developer.yahoo.com/performance/rules.html#js_bottom
Dan Herbert 2.09.2010 11:00:14
+1 - не знал, что, как кажется, всегда подразумевается, что голова предназначена для включения файлов JS. :)
Andrew 2.09.2010 15:35:18

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

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

3
19.08.2008 00:42:51

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

5
11.01.2013 10:44:54
можно также найти
Stephane Rolland 11.01.2013 10:49:34

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

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

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

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

1
24.08.2008 20:32:26

Кроме того, я предлагаю вам использовать 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");
8
2.09.2008 08:18:15

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

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

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

1
27.07.2013 14:59:28