Есть ли лучший способ организовать код Javascript? - PullRequest
Новая
       35

Есть ли лучший способ организовать код Javascript?

2 голосов
/ 14 апреля 2011

Я делал небольшое веб-приложение, добавлял поведения и добавлял объекты DOM в Javascript, используя jQuery.Проблема в том, что код начинает расти очень быстро, и я не знаю, где его хранить (на той же странице, где он используется, или в большом js-файле).На данный момент у меня есть:

  • 1 js-файл с объектом, хранящим некоторую синхронизированную информацию с сервера, и с наиболее важными методами (которые должны использоваться в приложении).Один из этих методов включает генератор элементов DOM (который я затем добавляю из нужной веб-страницы).
  • 1 js-файл с большим методом, который вызывается когда window.ready, который добавляет поведение в группу DOMобъект (относится только к веб-странице).
  • Некоторые теги заполнены кодом на страницах, которые не используют второй файл js.Этот код также относится к веб-странице.

Теперь вы можете убить меня своими глазами, и я знаю.Это определенно не очень хороший (или, по крайней мере, непоследовательный) способ хранения Javascript.Итак, мой вопрос:

Есть ли лучший способ организовать код Javascript?

Я полагаю, что по крайней мере я должен следовать правилу, хотя проблема в том, чтоЯ не уверен, лучше ли иметь js-файл для всех «глобальных данных и методов», а затем хранить остальные в js-файлах меньшего размера или, или просто сдаться и пойти выпить чаю.

Что, вы парни, думаете?Заранее спасибо!

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

Ответы [ 4 ]

4 голосов
/ 14 апреля 2011

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

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

Кроме того, вы можетеиспользуйте пространства имен для дальнейшей организации вашего кода.

3 голосов
/ 14 апреля 2011

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

Правила, которым я стремлюсь следовать:

  • Весь код, который можно использовать более чем в одном месте, отправляется во внешние файлы
  • Нет внешних файлов, содержащих код, которыйфактически делает что-нибудь, файлы служат библиотеками кода, который я могу использовать.
  • Сама страница содержит минимальный код javascript для инициализации кода в моих библиотеках.
  • Если этот код инициализации занимает более 10 или около того строк кода, то стоит обратить его на то, чтобы поместить его в функцию / метод в библиотеке
  • Весь javascript идет так же близко к нижней части страницы.насколько это возможно, перед тегом </body>.Это связано с тем, что когда браузер обнаруживает тег <script>, он останавливает рендеринг страницы и оценивает сценарий, прежде чем продолжить.Это может сделать страницу более медленной для пользователя (хотя нет реальной разницы во времени загрузки, восприятие имеет значение!)
  • Только сценарии, которые обязательно должны идти в голову, помещаются туда по причине, описанной выше.

РЕДАКТИРОВАТЬ: Если вы включаете много файлов javascript на страницу, то стоит объединить их в один файл.Это связано с тем, что каждый тег <script src="..."> на странице будет вызывать HTTP-запрос, а спецификации говорят, что на каждый домен может быть открыто только два запроса одновременно.Помещение их всех в один файл также увеличит выгоду, которую вы получите от использования JS-компрессора, такого как замыкание или YUI, а выгода от использования mod_gzip

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

1 голос
/ 14 апреля 2011

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

Для модулей вы можете использовать метод CommonJS.Это выглядит так: 

(function(window) {
  var Module = {};

  window.Module = Module;
})(window);

И дополнение: 

(function(module) {
  module.NewProp = {};

})(window.Module);

Конечно, вы можете использовать свои собственные переменные вместо окна и т. Д.

И, если вы будетеиспользуйте Node.js - это хороший способ обмена переменными между сервером и клиентом. 

(function(exports) {
  exports.Func = function(){};

})(typeof exports === 'undefined' ? wow : exports);

Надеюсь, это поможет!

1 голос
/ 14 апреля 2011

Если вы используете объектно-ориентированную стратегию проектирования, ответ на вопрос «в каком файле идет код» почти сам отвечает.

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

jQuery предлагает хороший пример:

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

Как только вы захотите использовать jQuery, простодобавьте скрипт jQuery.Хотите плагин на этой странице тоже?добавьте и это.

...