JsClasses 1.3.1 Download

Описание

Я предлагаю Вам подход, которий применяется в нашей компании для увеличения скорости разработки на JavaScript.

Сейчас серверная часть реализована и оформлена в виде нескольких PHP классов, а также есть "обертка" для интеграции JsClasses в Zend Framework"

При создании класса были использованы следующие идеи:

  1. Использование JavaScript фреймворка MooTools 1.2 в качестве ядра, где реализованы псевдо-классы, которые объявляются с помощью создания объекта Class.
    Так как использование MooTools не принципиально для нашего подхода, начиная с версии 1.3 вы можете увидеть примеры также на jQuery.
  2. Улучшение структурированности кода достигается путем использования принципов названий классов (модулей) и их расположения по папкам, по стилю похожему на Zend Framework: стандарт наименование классов в Zend Framework
  3. Каждый класс (модуль) должен быть документирован с помощью стандарта JsDoc (опционально)
    Обязательным условием является тег @requires в коментариях к классам (модулям).
    С помощью которого указываются зависимости между классами (модулями)
  4. Результирующий файл должен быть один. Он собирается из классов, код которых расположен по разным папкам, учитывая зависимости и порядок следования классов при сборке.
  5. Результирующий файл пересобирается и у него меняется имя, если были внесены изминения хотя бы в один из классов (или зависимых классов), затребованых вашим php-скриптом
  6. Результирующий файл "сжимается" модулем JSMin, что увеличивает скорость отдачи и не влияет на удобство разработки
  7. Результирующий файл пакуется по методу gzip, что позволяет браузерам, поддерживающим технологию упаковки gzip, еще больше увеличить скорость загрузки.

Пример подключения

В архиве вместе с классом JsClasses есть готовый пример работы модуля для работы с MooTools и jQuery.

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

 
require 'JsClasses.php';    # JsClasses Required
require 'CssOptimizer.php'; # CssOptimizer Required

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

$cssOptimizer = new CssOptimizer(array(
 	'cssCacheDir' => '../cache'
));
$cssOptimizer->optimize('css/screen_orig.css');
$cssResultFileName = $cssOptimizer->getCssFileName();

В заголовке шаблона страницы, который формирует 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>
    
	<link rel="stylesheet" href="<? echo $cssResultFileName ?>" type="text/css" media="screen, projection">
	<script type="text/javascript" src="js/mootools-1.2.1-core-nc.js"></script>
	<script type="text/javascript" src="<? echo $classesResultJsFileName ?>"></script>
</head>

Вот и вся настройка. Пользуйтесь на здоровье!


Дополнительные возможности

Начиная с версии 1.2 в вкласс включен оптимизатор CSS-файлов, который "собирает" все CSS-файлы в один, список файлов формируется путем анализа CSS-файлов на предмет тега @import. Результирующий файл оптимизируется с помощью библиотеки Minify и пакуется gzip-ом.

В дистрибутив включен рабочий пример на Blueprint CSS фреймворке


Состав а

История изминений


Установка

Распакуйте архив, все рабочие примеры запускаются из папки www. В паке www вы найдете:

Этот раздел не закончен, полное описание появиться в ближайшее время.



Пример

Я не успел создать страничку с рабочим примером (рабочий пример есть в архиве). Сделаю это в ближайшее время.

Текущую стадию разработки можно посмотреть на страничке JsClasses Integrator на Google Code