Подтвердить что ты не робот

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

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

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

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

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

Ответ 3

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

Ответ 4

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

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

Ответ 5

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

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

Ответ 6

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

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

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

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

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

Ответ 7

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

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

Ответ 8

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

Модули 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