HTML-темплейты

[s0rr0w]

Рассмотрим тему, которая является логическим продолжением темы про фреймворки.

Есть куча темплейт-систем для серверных языков программирования, но почему бы не применять аналогичный подход для темплейтирования HTML блоков? Что же такое, это HTML-темплейтирование? Все очень просто. Это способ использования неких HTML-структур для быстрого изменения дизайна различных фукнциональных компонентов.

Давайте рассмотрим следующий пример. Возьмем простой компонент - таббер. По сути таббер состоит из двух частей - блока переключателей-закладок и нескольких контентов.

Вариантов решения задачи множество. Давайте начнем с простого и пойдем по пути усложнения.

Первое, что приходит в голову, сделать контейнер для закладок и несколько контейнеров с контентом. На табы вешаем обработчик, который бдует показывать или скрывать нужный контейнер при нажатии. Решение простое, но не сильно удобное. Неудобное, потому что при наполнении нужно следить за тем, чтобы количество табов совпадало с количеством контейнеров.

Это можно решить на этапе формирования контента, создавая контент серверным скриптом, тогда проблема равного количества отпадет. Есть другой способ - выводить таб и контейнер в одном блоке, а потом собрать все табы и переместить их в нужный контейнер. Это решение красиво с многих сторон, но у него есть ряд недостатков. Это стандартизация обработчиков, которые нужно повесить на переключатель. Это можно сделать при помощи JS, создавая переключатель динамически. Решается множество головных болей, вроде бы кажется красиво и понятно.

Теперь ложка дегтя. Автоматическое создание табов при помощи JS не сильно удобно с точки зрения редизайна. Придется лепить кучу дополнительного, зачастую неудобного кода, чтобы добавить простые вещи. И вот тут (та-да-дам!) ... приходит на помощь подход HTML-темплейта. Мы подготавливаем некий шаблон таба, который будет использоваться по умолчанию. Это будет кусочек кода, который будет заполняться нужными данными. Если нам нужно сделать один таб сильно отличный от других, то мы добавляем уникальный шаблон вместе с контентом таба в код, а потом уже используем его как болванку. Вуаля!

Какие выводы можно сделать из сказанного?

Если генерировать ноды при помощи JS, то создание уникальных функций или стилистических конструкций будет схоже на Ад, потому что вместо того, чтобы написать простой кусок HTML кода и предусмотреть его в качестве темплейта, вам придется написать множество JS-кода. И никакие фреймворки не спасут. Ваш скрипт можно считать одноразовой поделкой, которую невозможно использовать повторно в других проектах. HTML-темплейтирование поможет легко переносить функциональность практически на любые проекты с любым дизайном или функциональностью.

Да, решения "в лоб" иногда можно сделать быстрее. Но это в единоразовой перспективе. Если брать долгосрочную перспективу, то нужно использовать другие принципы.