Bemer — БЭМ-шаблонизатор

БЭМ — это методология эффективной разработки веб-приложений. Большое количество информации размещено на официальном сайте http://ru.bem.info.

Bemer — шаблонизатор, стремящийся идти по пути упрощения работы с БЭМ. Он должен быть очень удобным для разработки малых и средних проектов.

Исходный код шаблонизатора разделён на подробно задокументированные модули с помощью definer.

Рекомендуется использовать bemer совместно с i-bem.

Установка

Bemer доступен в Bower.

bower install bemer

Bemer доступен в NPM.

npm install bemer

Подключение

В браузере

<script src="bower_components/bemer/bemer.min.js"></script>

В Node.js

var bemer = require('bemer');

Форматы данных

Входящие данные

Общепринятым форматом входящих данных для БЭМ-шаблонизаторов является BEMJSON.

Выходящие данные

На выходе bemer возвращает простую HTML-строку, готовую для отображения в браузере.

Получение результата

Единственная переменная, предоставляемая шаблонизатором — bemer и она является функцией, которая принимает на вход один параметр — объект в формате BEMJSON.

Один блок

bemer({ block: 'page' });

Результат:

<div class="page"></div>

Блок с элементами

bemer({
    block: 'item',
    content: [
        { elem: 'title', content: 'Фотоаппарат' },
        { elem: 'price', content: '14999' }
    ]
});

Результат:

<div class="item">
    <div class="item__title">Фотоаппарат</div>
    <div class="item__price">14999</div>
</div>

Оглавление

• Методы
  • Метод match
    • Синтаксис селекторов
      • Примеры селекторов
      • Примеры селекторов со звёздочкой
    • Синтаксис полей шаблона
      • Стандартные поля шаблона
        • Поле construct
        • Поле tag
        • Поле single
        • Поле attrs
        • Поле js
        • Поле bem
        • Поле cls
        • Поле mods
        • Поле elemMods
        • Поле mix
        • Поле content
        • Поле options
      • Функция в значении стандартного поля шаблона
        • Параметр функции стандартного поля шаблона
        • Объект this.bemjson
      • Приоритеты в стандартных полях шаблона
        • Примитивные типы
        • Массивы и объекты
        • Функции
      • Произвольные поля шаблона
      • Наследование шаблонов
        • Получение предыдущего значения поля через this.__base
  • Метод config
    • Изменение настроек шаблонизации
    • Сброс настроек шаблонизации до стандартных
  • Метод clean
  • Метод modules
  • Метод helper
    • Добавление помощника
• Функции-помощники
  • Помощники для работы с деревом
    • Помощник isFirst
    • Помощник isLast
    • Помощник isBlock
    • Помощник isElem
    • Помощник id
  • Помощники для работы со строками
    • Помощник escape
    • Помощник unEscape
    • Помощник htmlEscape
    • Помощник unHtmlEscape
    • Помощник collapse
    • Помощник stripTags
    • Помощник upper
    • Помощник lower
    • Помощник repeat
  • Помощники для работы с числами
    • Помощник random
  • Помощники для работы с объектами
    • Помощник extend
    • Помощник deepExtend
    • Помощник clone
    • Помощник deepClone
  • Помощники для работы с типами данных
    • Помощники для проверки на определённый тип данных
    • Помощник is.type
    • Помощники для проверки чисел
    • Помощник is.primitive
    • Помощник is.every

Методы

Метод match

Предназначен для добавления шаблона на одну или несколько БЭМ-сущностей.

В качестве параметров принимает неограниченное количество селекторов на БЭМ-сущности и последним параметром простой объект с полями шаблона.

Возвращает: {bemer}

bemer.match('block1', 'block2', 'blockN', {});

Синтаксис селекторов

По умолчанию для отделения блока от элемента используется двойное подчёркивание: block__element. А для отделения модификаторов одиночное подчёркивание: block_mod_val.

Примеры селекторов

Блок header:

header

Элемент logo блока header:

header__logo

Блок header с булевым модификатором adaptive:

header_adaptive

Блок header с модификатором theme в значении red:

header_theme_red

Элемент logo блока header с модификатором theme в значении blue:

header_theme_blue__logo

Элемент logo с модификатором size в значении s:

header__logo_size_s

Модификатор у блока и у элемента одновременно:

header_adaptive__logo_size_m

На месте любой части селектора можно записать *, что будет означать произвольное значение.

Примеры селекторов со звёздочкой

Любой блок:

*

Любой элемент блока footer:

footer__*

Любое значение модификатора theme блока footer:

footer_theme_*

Любое значение модификатора size любого элемента блока footer:

footer__*_size_*

Синтаксис полей шаблона

Поля шаблона содержат информацию по шаблонизации. В основе технической реализации лежит помощник создания классов inherit. Шаблон может иметь произвольный набор полей.

Стандартные поля шаблона

Поле construct

Тип: {function}

Поле construct устанавливает конструктор, который вызывается в начале шаблонизации БЭМ-сущности.

Конструктор принимает два параметра:

• {object} bemjson — BEMJSON БЭМ-сущности
• {object} data — данные о БЭМ-сущности в дереве
  • {number} data.index — индекс сущности среди сестринских элементов
  • {number} data.length — количество сестринских элементов, включая текущий
  • {object} [data.context] — информация о контексте родительского блока
    • {string} [data.context.block] — имя родительского блока
    • {object} [data.context.mods] — модификаторы родительского блока
    • {string} [data.context.elem] — имя родительского элемента
    • {object} [data.context.elemMods] — модификаторы родительского элемента

Получение данных о блоке menu из параметров конструктора:

bemer.match('menu', { construct: function(bemjson, data) {
    console.log('bemjson:', bemjson);
    console.log('data:', data);
}});
bemer({ block: 'menu' });

Вывод:

bemjson: { block: 'menu' }
data: { index: 0, length: 1 }

Кроме того, в this существуют поля bemjson и data, аналогичные параметрам конструктора.

Получение данных об элементе item с булевым модификатором active из полей контекста:

bemer.match('menu__item_active', { construct: function(bemjson, data) {
    console.log('bemjson:', this.bemjson);
    console.log('data:', this.data);
}});

bemer({ block: 'menu', content: [
    { elem: 'item' },
    { elem: 'item', elemMods: { active: true }},
    { elem: 'item' }
] });

Вывод:

bemjson: {
    block: 'menu',
    mods: {},
    elem: 'item',
    elemMods: { active: true }
}
data: {
    index: 1,
    length: 3,
    context: {
        block: 'menu',
        mods: {}
    }
}

Поле tag

Тип: {string} {boolean}

По умолчанию: div

Поле tag устанавливает имя тега.

Блок в представлении тега span:

bemer.match('text', { tag: 'span' });
bemer({ block: 'text' });

<span class="text"></span>

Для указания стандартного тега div может быть использовано значение true.

Для отмены строкового представления тега используется значение false. При этом вместо текущего тега будет представлено его содержимое:

bemer.match('anonymous', { tag: false });
bemer({ block: 'anonymous', content: { block: 'inner' }});

<div class="inner"></div>

Поле single

Ти