Модуль Loader - управление js и css файлами

Суть проблемы:

В шаблоне new на каждой странице выводиться 18 js файлов и 6 css. Достаточно много, особенно если учесть, что на многих страницах не нужна и половина из них. Хотелось бы избавиться от ненужного баласта. Но… Файлы жестко прописаны в template, поэтому стандартными средствами с этим трудно бороться.

Решение проблемы:

Выкладываю в свободный доступ модуль «Loader», который использую для своего проекта.

Модуль Loader предоставляет вам возможность просто управлять совокупностью подключаемых к странице css и js файлов, используя шаблоны адресов или непосредственно из кода Action`a.

Скачать модуль. (в данный момент на модерации).

Используя модуль вы можете:

1) задать набор файлов, выводимых по умолчанию. Стартовый default-набор состоит из файлов подключаемых в скине new версии livestreet 0.3.1
2) создавать правила включения и\или исключения некоторых (или всех) файлов для путей любого вида.
3) подключать или удалять файлы прямо из кода Action`a

О том, как установить модуль — в readme.txt файле (это совсем не сложно). Как пользоваться — под катом.


Итак, разберемся как модуль работает.

1. Настройки модуля содержаться в папке /classes/modules/loader/config/. В файле default.php. Если модуль не получает никаких указаний, то на страницу будут выведены именно эти файлы.

2. В файле rules.php можно определять «Правила» кастомизации вывода скриптов и стилей. Каждое правило состоит из:
— шаблон пути, для которого это правило будет использовано
— js и css файлы, которые будут подключены дополнительно к дефолтным
— js и css файлы, которые будут исключены из списка дефолтных

Типичный пример правила:

// шаблон пути
$aRules['page']['path'] = DIR_WEB_ROOT.'/page/';

// js файлы, которые нужно исключить
$aRules['page']['js']['exclude'] = array(
	DIR_STATIC_SKIN."/js/vote.js",
	DIR_STATIC_SKIN."/js/favourites.js",
	DIR_STATIC_SKIN."/js/questions.js",
);

// js файлы, которые нужно включить
$aRules['page']['js']['include'] = array(
	DIR_STATIC_SKIN."/js/my.js",
);
// указывает на то, что default`ный набор css нужно очистить
$aRules['page']['css']['empty'] = true;


Или можно так:

// "короткий" синтаксис
$aRules['about'] = array(
    // шаблон пути, для которого правило будет использовано
    'path' => DIR_WEB_ROOT.'/page/about/$',
    // правило обработки css
    'css'  => array(
	'empty'=>false,
    ),
    // "стоп" символ - означает, что если правило "сработало",
    // то обработка правил на этом закончится
    'stop' => true
);


Итак, правило обрабатываются в порядке их определения. В указанном примере сначала будет обработано правило 'page', затем 'about'. Для каждого нового правила модуль сначала сверяет текущий путь с указанным в вашем шаблоне.

Правила составления шаблонов путей:

— правило «срабатывает» на любое вхождение вашего шаблона в текущий путь. Т.е., если вы указали шаблон
$aRules['first1']['path'] = 'page'
то правило сработает на любой из этих страниц: _http://site.com/page/, _http://site.com/blogs/page3, _http://mypages.ru/index.php
Поэтому для более «плодотворного» поиска, рекомендуется начинать ваши шаблоны с константы DIR_WEB_ROOT — это сделает шаблоны путей независимыми от вашего домена.

— для указания конца строки используйте знак $. Пример: DIR_WEB_ROOT.'/page/' сработает на любой странице, начинающейся также, например, на странице _http://site.com/page/about/. Если вас это не устраивает, и вы хотите, чтобы правило работало только на _http://site.com/page/ и никакой другой — укажите шаблон DIR_WEB_ROOT.'/page/$'

— символ * будет заменен при поиске на любую не пустую буквенно-числовую последовательность. Это означает, что правило DIR_WEB_ROOT.'/page/*/' будет работать на страницах _http://site.com/page/about/, _http://site.com/page/contact/, но не на странице _http://site.com/page/.

— если вы знакомы с PCRE-синтаксисом регулярных выражений, то можете использовать любые конструкции из него. Но помните, слеш (/) будет автоматически экранирован, а * заменено на [\w+].

Следующая часть правила — массивы js и css. Здесь поддерживается include и exclude. На примере подключения и исключения js скриптов:

// js файлы, которые нужно исключить
$aRules['page']['js']['exclude'] = array(
	DIR_STATIC_SKIN."/js/vote.js",
	DIR_STATIC_SKIN."/js/favourites.js",
	DIR_STATIC_SKIN."/js/questions.js",
);
// js файлы, которые нужно включить
$aRules['page']['js']['include'] = array(
	DIR_STATIC_SKIN."/js/my.js",
);


Для CSS файлов все аналогично.

Дополнительные опции правил:
— ['stop'] — если опция установлена в true, то если данное правило сработает система прекратит обработку. Т.е. все остальные правила будут проигнорированы.
— ['js']['empty'] и ['css']['empty'] — если установлены в true, то система сначала очистит дефолтный набор js и css соответственно, а потом продолжит работу.

3. Вы можете дополнить или удалить файлы из Action`а. Для этого используйте функции
$this->Loader_AppendScript($sJsPath) // добавить js файл в начало списка 
    $this->Loader_PrependScript($sJsPath) // добавить js файл в конец списка
    $this->Loader_AppendStyle($sCssPath) // добавить css файл в начало списка
    $this->Loader_PrependStyle($sCssPath) // добавить css файл в конец списка


4. Система контролирует дублирование, поэтому можете не волноваться, что какой-то файл будет подключен дважды.

Если по работе или настройке модуля возникнут вопросы — пишите в комментарии будем разбираться :)

P.S. Выношу благодарность пользователю avadim, у которого «позаимствовал» формат readme.txt файла.
Начинаете изучать PHP? На форуме http://www.cyberforum.ru/php/ представлена огромная база знаний, накопленная за много лет. Там же вы можете задать свой вопрос и получить компетентный ответ.

23 комментария

avatar
Вот за это Огромное Спасибо! Этого действительно не хватало.
  • _et
  • +1
avatar
Единственное — костыли под IE.
Хотя в них обычно кода мало)
  • _et
  • 0
avatar
Я это обязательно доделаю. Версия только 0.2 — почти пробная.
А вообще, IE не люблю :)
avatar
в 0.4 он будет?
avatar
Будет, только другая его версия — с возможностью слияния файлов.
avatar
Верной дорогой идете, товарищи!

Было б неплохо предусмотреть опцию — сливать/не сливать конкретный файл. Или указывать группу для слития.
avatar
Или ты имеешь ввиду в ядре?
avatar
да, в ядре
avatar
Время покажет, вообще что-то такое хотелось бы увидеть, совместно с другими ViewHelper`ами. Этот вопрос обсуждается, на все затеи времени не хватает :)
avatar
Предлагаю еще добавить два класса для сжатия css и JS:
— code.google.com/p/cssmin/
— code.google.com/p/jsmin-php/
avatar
не могу скачать Ошибка: 404
avatar
Там же написано,
(в данный момент на модерации).
Когда модуль пройдет модерацию, можно будет скачивать.
avatar
Предлагаю еще добавить два класса для сжатия css и JS:
code.google.com/p/cssmin/
code.google.com/p/jsmin-php/
avatar
И еще закешировать слитый файл для каждой запрашиваемой совокупности — вообще будет сказка.
avatar
Это естественно :)
У меня так реалиховано во всех моих проектах
avatar
этот модуль снижает количество запросов к файлам css? так что ли?
  • F-5
  • +1
avatar
Нет, модуль дает возможность это сделать вам :)

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

Сам посоздавал правил, все работает более менее, но использовал для составления правил не совсем правильный метод «тыка». Т.е. добавлял в правило все скрипты и начинал по одному убирать, и проверять каждый раз — остается ли страница в рабочем состоянии :)

Было бы супер узнать, например, для индекса нужно:
block_loader.js
Roar.js
mootools-1.2.js
JsHttpRequest.js

и т.п.

Спасибо!
Автору вдвойне ;)
avatar
Или можно ссылку на сайт, где у Вас это реализовано, я сам выцеплю нужную инфу.
avatar
Точных данных у меня нет, сейчас я работаю над сливание файлов. После этого попробую описать, где какие файлы нужны. В любом случае, сделаю об этом отдельный анонс на сайте.
avatar
Ок, спасибо. Обожду :)
avatar
И как успехи? Можно ожидать хотя бы список нужных файлов?
avatar
Тоже хотелось бы знать какие css и js для каких страниц выводить. Давайте здесь напишем кто что знает по этому вопросу, тем самым облегчим свои проекты от лишних выводов.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.