apelsyn Sep 18 2008 at 09:29

RIA JsClasses Integrator: Оптимизируем разработку на JavaScript

4 min

1.2K

Чем ближе Ваш сайт приближается к концепции Web2.0 тем больше JavaScript-кода появляется на Ваших страницах. Очевидно, что разработчику все больше времени приходится тратить на интеграцию своего серверного кода на php/java/python… с клиентской частью на JavaScript.

Большое количество кода требует какой-то систематизации, например, разнести логически связанные части кода по разным файлам, имена файлов привязать к контроллеру/событию/блоку… Наверняка у многих разработчиков есть свое решение этой проблемы.
На Хабре, например, JS-код разбит на небольшие блоки, которые запрашиваются в зависимости от страницы. Код написан красиво, откоментирован, стоят отступы. Небольшой минус такого подхода большое количество блоков (около 25) на каждой странице. В начале я использовал похожую схему, но сейчас, все же, хочу представить хабрасообществу немного другой подход.

Факторы, ускоряющие разработку

Я выделил несколько идей, которые, на мой взгляд, делают процесс разработки JS-кода более эффективным:

Использование JS-фреймворка. Многие фреймворки помимо готового богатого функционала и плагинов делают код более понятным для восприятия.
Например JS-код:

document.getElementById(‘myElemrnt’).innerHTML=’Test’;

на MooTools выглядит намного эстетичнее и компактнее:

$(‘myElemrnt’).set(‘html’,’Test’);
Фреймворк может быть любой, просто я уже привык к MooTools. У этого фреймворка есть очень мощный компонент — это классы. Конечно, речь идет не о полноценных классах (их в JavaScript нет), а о пcевдо-описании класса с помощью объекта Class. У объекта Class реализовано наследование (Extends) с доступом к переопределенным методам наследуемого класса, а также множественное наследование (Implements) методов без возможности доступа к переопределенным методам. Боле подробно о классах можно почитать в документации по mootools-классам.
Нужна система в именовании классов, а также в именовании директорий, в которые эти классы помещаются. ”Правила игры” очень важны именно для коммандной разработки.Изобретать свою систему, на мой взгляд, нету смысла. Мне нравятся правила кодирования для Zend Framework. Остается только их немного адаптировать для написания JS (вместо расширения .php писать .js). Ну и, естественно, выполнять условие — один класс в одном файле. Как будет решаться проблема большого количества файлов я напишу ниже.
Каждый класс должен быть документирован. Я отдаю предпочтение стандарту JsDoc. Обязательным условием является тег @requires в коментариях к классам, с помощью которого указываются зависимости между классами.
Результирующий файл должен быть один. Он собирается из классов, код которых расположен по разным папкам (вне видимости веб-сервера), учитывая зависимости и порядок следования классов при сборке.
Результирующий файл пересобирается и у него меняется имя, если были внесены изменения хотя бы в один из классов (или зависимых классов), затребованых «движком» вашего сайта.
Результирующий файл упаковывается модулем JSMin, что увеличивает скорость отдачи и не влияет на удобство разработки.
Результирующий файл «сжимается» по методу gzip, что позволяет браузерам, поддерживающим технологию упаковки gzip, еще больше увеличить скорость загрузки.

Реализация на PHP

Поскольку «голые» идеи звучат неубедительно, вышеизложенные пункты я воплотил в PHP-класс RIA JsClasses Integrator. Класс подключается к вашему движку добалением нескольких строк в php-код и одной строчки в шаблон.

В примере я написал пару базовых классов для Ajax-запросов. Для того, чтобы «пощупать» этот класс, Вам необходимо его установить у себя на компе и попробовать внести изменения в тестовый класс и увидеть, как будет вести себя движок. Данные о нахождении класса, времени модификации и зависимостях между классами кешируются в текстовый файл, но с легкостью можно переписать кеширование, например, в memcached.

Настраивается довольно просто.
В своем «движке» пишите приблизительно следующие строчки:

require ('../libs/JSMin.php');
require ('../libs/JsClasses.php');

$jsClasses = new JsClasses();
$jsClasses->setClassesPath('../js');
$jsClasses->setClassesCacheFile('../cache/jsClasses.cache');
$jsClasses->make(array('Ria_JsonRequest_Test'));
$classesResultJsFileName = $jsClasses->getJsFileName();

В заголовке шаблона страницы, который формирует html-код размещаем ссылку на созданный нашим модулем упакованный JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=«http://www.w3.org/1999/xhtml»>
<head>
        <meta http-equiv=«Content-Type» content=«text/html; charset=utf-8» />
        <title>Simple JsClasses Integration on PHP Site Engine</title>
        <script type=«text/javascript» src=«js/mootools-1.2-core-nc.js»></script>
        <script type=«text/javascript» src="<? echo $classesResultJsFileName ?>"></script>
</head>

Для отдачи браузеру запакованных файлов в директории c автособраными JS-файлами (по умочанию js/cache/) создаем .htaccess следующего содержания:

<FilesMatch "\.js.gz$">
ForceType text/javascript
Header set Content-Encoding: gzip
</FilesMatch>
<FilesMatch "\.js$">
RewriteEngine On
RewriteCond %{HTTP_USER_AGENT} !".*Safari.*"
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]
ForceType text/javascript
</FilesMatch>

Ccылки по теме

Объединение JS-файлов 2.0 (1/2). Некоторые идеи по склейке файлов взял отсюда. Алгоритм сборки использовал свой с отслеживанием зацикливания.
Оптимизация JavaScript — делаем билд процесс
Блог MooTools на Хабре
UPD: Еще немного о сжатии.
Скачать RIA JavaScript Classes Integrator с примером базовой настройки

Tags:

Hubs:

Website development