Модуль 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 файлы, которые будут исключены из списка дефолтных
Типичный пример правила:
Или можно так:
Итак, правило обрабатываются в порядке их определения. В указанном примере сначала будет обработано правило 'page', затем 'about'. Для каждого нового правила модуль сначала сверяет текущий путь с указанным в вашем шаблоне.
Правила составления шаблонов путей:
— правило «срабатывает» на любое вхождение вашего шаблона в текущий путь. Т.е., если вы указали шаблон
Поэтому для более «плодотворного» поиска, рекомендуется начинать ваши шаблоны с константы 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 скриптов:
Для CSS файлов все аналогично.
Дополнительные опции правил:
— ['stop'] — если опция установлена в true, то если данное правило сработает система прекратит обработку. Т.е. все остальные правила будут проигнорированы.
— ['js']['empty'] и ['css']['empty'] — если установлены в true, то система сначала очистит дефолтный набор js и css соответственно, а потом продолжит работу.
3. Вы можете дополнить или удалить файлы из Action`а. Для этого используйте функции
4. Система контролирует дублирование, поэтому можете не волноваться, что какой-то файл будет подключен дважды.
Если по работе или настройке модуля возникнут вопросы — пишите в комментарии будем разбираться :)
P.S. Выношу благодарность пользователю avadim, у которого «позаимствовал» формат readme.txt файла.
В шаблоне 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 комментария
Хотя в них обычно кода мало)
А вообще, IE не люблю :)
Было б неплохо предусмотреть опцию — сливать/не сливать конкретный файл. Или указывать группу для слития.
— code.google.com/p/cssmin/
— code.google.com/p/jsmin-php/
—
—
У меня так реалиховано во всех моих проектах
Т.е. по умолчанию все равно будет загружен тот же самый набор. Но у вас есть возможность настроить модуль так, чтобы он удалял ненужные вам файлы или догружал нужные.
Сам посоздавал правил, все работает более менее, но использовал для составления правил не совсем правильный метод «тыка». Т.е. добавлял в правило все скрипты и начинал по одному убирать, и проверять каждый раз — остается ли страница в рабочем состоянии :)
Было бы супер узнать, например, для индекса нужно:
block_loader.js
Roar.js
mootools-1.2.js
JsHttpRequest.js
и т.п.
Спасибо!
Автору вдвойне ;)