PopulateJS: don’t repeat yourself в HTML-разметке

Распространение LESS/SCSS, а также ожидаемые движения в мире браузеров и стандартов, появление jQuery, наконец, вернуло фан в вёрстку HTML-страничек и во фронт-энд разработку.
Но представьте, что вам требуется сверстать раздел в интернет-магазине, раздел блога, или целую главную страницу Хабра? Да, мы делим страницу на отдельные блоки и делаем для них разметку, порождаем множество вложенных блоков, делаем для них CSS/LESS/SCSS. Безусловно, существуют такие замечательные средства как Zen-Coding, шаблонизатор jQuery Templates, а для построения сеток (grids) — всевозможные CSS-фреймворки, наподобие Bootstrap или же Zurb Foundation.

Но часто хочется посмотреть как же ведет себя вёрстка списков, когда в них не один только что свёрстанный элемент, а множество элементов. Наверняка, вы копипастили хотя бы раз в жизни разметку блока, чтобы заполнить страницу контентом, особенно когда под рукой нет запущенной любимой CMS или веб-фреймворка с шаблонизатором. А потом удаляли копипасту. Или что хуже, вы из тех, кто получает «в нарезку» HTML’ки от тех, кто верстает, и вам необходимо удалять эту копипасту самим.

Пару дней назад я создал библиотеку populatejs, которая призвана избавить вас от описанных неприятностей раз и навсегда. Фактически она даёт нам синтаксический сахар в CSS, позволяющий клонировать контент HTML-элементов с помощью CSS-свойств. К примеру, класс «populate-7» у любого элемента отобразит на веб-странице 7 точно таких же элементов вместо одного, а класс «populate-inner-3» отобразит трижды содержимое элемента.

Как использовать?

К примеру, требуется тестовый список из элементов , содержащий краткое описание предлагаемых товаров, который вы только что стилизовали:

<ul> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> <li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li> </ul>

Вместо копирования блока:

<li><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>

Используйте класс .populate-5:

<li class="populate-5"><img src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>

На странице появится список из 5 элементов. Требуется 5 элементов с двумя картинками товаров? Не проблема:

<li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title">Lorem ipsum dolor...</div></li>

Или больше текста описания:

<li class="populate-5"><img class="populate-2" src="images/thumb.jpg" /><div class="title populate-inner-3">Lorem ipsum dolor...</div></li>

Как закончите макет, удалите строчку с подключением библиотеки и можете смело преобразовывать в шаблон вашу чистую HTML-разметку!

Естественно, к элементам также будут применяться псевдоклассы :nth-child, декларированные в вашем CSS.

Чтобы подключить библиотеку и начать пользоваться ею прямо сейчас, просто вставьте следующий код в странице после jQuery:

<script type="text/javascript" src="https://raw.github.com/vladignatyev/populate-js/master/js/populate.js"></script>

А теперь поговорим о том, что под капотом.

Что внутри?

Внутри populatejs очень простой движок, использующий jQuery для селекторов и свой механизм обхода DOM-дерева и обработки деклараций CSS-классов элементов (через аттрибут ‘class’ в jQuery). Весь код библиотеки написан через тесты с использованием замечательного фреймворка QUnit. Чтобы запустить тесты, достаточно открыть test.html в вашем браузере.

Когда HTML-документ загружен браузером, библиотека в ходе инициализации находит узлы DOM-дерева, помеченные классами .populate-* и .populate-inner-* и формирует список терминальных узлов такого поддерева, а на самом деле леса. После этого происходит обратный ход, в ходе которого пройденные узлы помечаются классом .populated и к ним применяется операция «клонирования», копирующая всю иерархию наследников этих узлов.

Заключение

Буду рад любым отзывам сообщества, и буду особенно счастлив, если кому-то кроме меня эта библиотека сэкономит пару телодвижений, как уже сэкономила мне.

1. Zen coding — пишем HTML/CSS быстрее
2. Работаем с jQuery Templates
2. Bootstrap
3. Zurb Foundation
4. Официальная страница библиотеки PopulateJS
5. QUnit js testing framework
5. Исходный код на GitHub
6. Мой твиттер, если нужна более оперативная поддержка или вы хотите сказать «спасибо».

Fork me on GitHub!