BH (BEMHTML) — компилирующий обработчик декларативных шаблонов для 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" : "Кнопка отправить по старому стилю" } ]Получим результат:
<buttonclass="button">Просто кнопкаbutton><inputclass="button button_submit"type="submit"value="Кнопка отправить"/><inputclass="button button_legacy"type="button"value="Кнопка по старому стилю"/><inputclass="button button_legacy button_submit"type="submit"value="Кнопка отправить по старому стилю"/>Реализации
Официальные реализации BH написаны на JavaScript и PHP.
См. также
Ссылки
- Официальный сайт
- Официальный сайт методологии БЭМ
- Документация на сайте методологии БЭМ
- BH.js на GitHub
- BH.php на GitHub
Это заготовка статьи о программном обеспечении. Помогите Википедии, дополнив её.
