BH (BEM HTML) — компилирующий обработчик декларативных шаблонов для JS.
BH позволяет видоизменять узлы DOM-дерева аналогично тому, как это делает CSS — в декларативной форме.
Пример
Имея декларацию на JS: bh.match('button', function(ctx) { ctx.tag('button'); }); bh.match('button_legacy', function(ctx, json) { ctx.tag('input'); ctx.attr('type', 'button'); ctx.attr('value', json.content); }); bh.match('button_submit', function(ctx, json) { ctx.tag('input'); ctx.attr('type', 'submit'); ctx.attr('value', json.content); });
Или аналогичную декларацию в синтаксисе PHP: $bh->match('button', function($ctx) { $ctx->tag('button'); }); $bh->match('button_legacy', function($ctx, $json) { $ctx->tag('input'); $ctx->attr('type', 'button'); $ctx->attr('value', $json->content); }); $bh->match('button_submit', function($ctx, $json) { $ctx->tag('input'); $ctx->attr('type', 'submit'); $ctx->attr('value', $json->content); });
И входные данные: [ { "block" : "button", "content" : "Просто кнопка" }, { "block" : "button", "mods" : { "submit": true }, "content" : "Кнопка отправить" }, { "block" : "button", "mods" : { "legacy": true }, "content" : "Кнопка по старому стилю" }, { "block" : "button", "mods" : { "legacy": true, "submit": true }, "content" : "Кнопка отправить по старому стилю" } ]
Получим результат: <button class="button">Просто кнопка</button> <input class="button button_submit" type="submit" value="Кнопка отправить"/> <input class="button button_legacy" type="button" value="Кнопка по старому стилю"/> <input class="button button_legacy button_submit" type="submit" value="Кнопка отправить по старому стилю"/>
Реализации Официальные реализации BH написаны на JavaScript и PHP.
См. также БЭМ BEMHTML
Ссылки Официальный сайт Официальный сайт методологии БЭМ Документация на сайте методологии БЭМ BH.js на GitHub BH.php на GitHub
Категория:Шаблонные системы Категория:JavaScript Категория:PHP Категория:Программное обеспечение с лицензией MIT