Меню
Что нового?

Организация CSS и JS

igortik

igortik

Новичок
Организация CSS и JS

Всем привет!

Стоит вопрос как лучше организовывать СSS в системе, которая построена по принципу MVC, где в каждом модулей разделяются css экшенов модуля.

Я думаю подключать все, используя функцию-хелпер, которая, в зависимости от модуля и его акта будет подтягивать содержимое нужного файла и ссылка на него будет примерно такой в теле документа: style.css?mod=news

Какие "за" и "против" этого метода?

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

1. css акта модуля (будет описывать скелет шаблона акта)
2. css форм акта (для каждой формы автоматически подключается свой css)
3. js акта
4. js формы акта (для каждой формы автоматически подключается свой js)

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

Предложенная структура логически ясна и уже реализована у нас, но меня беспокоит как с этим всем потом работать ...
С одной стороны уходим от "простыни" в 200 строк, с другой стороны нагромождаем файлами, запросами к серверу на их получение на выходе и т.д.

Как вы решали эту задачу?
 
igortik

igortik

Новичок
Да, уже учел.
Сделал "полотенце" CSS в продакшн-версии, состоящее из всех css глобальных и css абсолтно всех подключенных модулей.
Туда же и css всех форм ...

JS только не трогал, они вызываются по мере необходимости, чтобы избежать возможных "пересечений" и проблем связанных с этим явлением.
 

Kirill

Новичок
Css и JS лучше посылать одним минимизированным файлом.
Минимизацию, как и объединение сделать автоматом.
К примеру так (js):

на стороне сервера:
в шаблоне/контроллере дергаем хелпер:
$this->script()->append('js/modules/default/basket/index.js');

в начале этого js скрипта список зависимостей:

/**
* @requires js/modules/loading.js
* @requires js/modules/popup.js
* @requires js/libs/phpjs/number_format.js
*/

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

Клиент получает урл вида:
<script type="text/javascript" src="/packed/script/d8c9caee80768dc0719deb906005af95"></script>

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

-~{}~ 23.05.10 12:58:

аналогично со стилями
 
grigori

grigori

( ͡° ͜ʖ ͡°)
Команда форума
если у вас меньше десяти тысяч пользователей в день, значения это не имеет
впрочем, если больше - тоже
например, fotostrana.ru - десятки запросов при открытии 1й страницы, но это не ощущается
настройте сервер и хедеры кеширования
 
grigori

grigori

( ͡° ͜ʖ ͡°)
Команда форума
"оптимизация под говнохостинг" ... психологические проблемы стоит решать с другими специалистами
 
Войдите или зарегистрируйтесь для ответа.
Сверху