Простой и быстрый генератор класса(html) в стиле BEM

[vflash]

Для формирования className на js в большинстве случаев использую обычное сложение строк.

var b = 'pe-input';

{
    class: (b + '__icon'
        + (isShowIcon ? ' -show' : '')
        + (minIcon ? '  ' + mixIcon : '')
    ),
}

в случаи сокращенных модификаторв этого подхода достаточно. Он прост, выглядит понятно, работает быстро. Но когда нужен полный модификатор немного неудобен.

var b = 'pe-input';

{
    class: (b + '__icon'
        + (isShowIcon ? '  ' + b + '__icon--show' : '')
        + (minIcon ? '  ' + mixIcon : '')
    ),
}

когда такой модификатор один или два это не сильно мешает. но когда больше и чаше в проекте, то раздражает.

Упростит эту ситуацию поможет простая функция. Задумал ее еще в прошлом году. Но долго думал "А стоит ли оно того", так как по производительности функция по шаблону будет медленнее.
Но решил всеже написать и вот что получилось

var mix = 'myForm__button';
var b = bem('myButton');

var x = b(); // myButton
var x = b('icon'); // myButton__icon
var x = b('icon', mix
    , 'x-glob-xxxx'
    , ['-open', true]
    , ['-size', 14]
    , {
        type: 'red',
        show: true
    }
);
// 'myButton__icon myButton__icon--type-red myButton__icon--show -size-14 -open x-glob-xxxx myForm__button'

Думаю по коду все сразу понятно как она работает. Но стоит обратить внимание что первое правило будет в конце генерированной строки. Это нужно что бы указывая миксы первыми, они оказывались в конце строки.

исходник тут https://github.com/vflash/bem-name