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 быстрее ^[1]
2. Работаем с jQuery Templates ^[2]
2. Bootstrap ^[3]
3. Zurb Foundation ^[4]
4. Официальная страница библиотеки PopulateJS ^[5]
5. QUnit js testing framework ^[6]
5. Исходный код на GitHub ^[7]
6. Мой твиттер ^[8], если нужна более оперативная поддержка или вы хотите сказать «спасибо».