@zhengxs/bem - v1.1.0

component('button')
// -> "c-button"

component('button', 'md')
// -> "md-button"

const bem = createBEM()
const button = bem('button')

 console.log(button.component())
// -> 'c-button'

 console.log(button.element('icon'))
// -> 'c-button__icon'

 console.log(button.elem('icon')) // alias for element
// -> 'c-button__icon'

 console.log(button.modifier('default'))
// -> 'c-button--default'

 console.log(button.mod('default')) // alias for modifier
// -> 'c-button--default'

 console.log(button.state('is', 'default'))
// -> 'is-default'

 console.log(button.is('loading'))
// -> 'is-loading'

 console.log(button.has('error'))
// -> 'has-error'

// 不管调用几次，拿到的都是同一个对象
 console.log(button === bem('icon'))
// -> true

// 不同名称拿到的是不同的对象
 console.log(button === bem('icon'))
 // -> false

// 不同的 create，即使是相同的名称拿到的也不一样的
 console.log(button === createBEM()('button'))
// -> false

const options = {
  namespace: { component: 'ux' }
}

const bem = createBEM(options)

const button = bem('button')

console.log(button.component())
//-> 'ux-button'

console.log(button.element('icon'))
//-> 'ux-button__icon'

console.log(button.modifier('default'))
//-> 'ux-button--default'

// 修改命名空间
options['namespace']['component'] = 'md'

console.log(button.component())
//-> 'md-button'

console.log(button.element('icon'))
//-> 'md-button__icon'

 console.log(button.modifier('default'))
//-> 'md-button--default'

// 再次修改命名空间
options['namespace']['component'] = 'c'

console.log(button.component())
//-> 'c-button'

console.log(button.element('icon'))
//-> 'c-button__icon'

console.log(button.modifier('default'))
//-> 'c-button--default'

// 直接重置对象
options['namespace'] = { 'component': 'ux' }

console.log(button.component())
//-> 'ux-button'

console.log(button.element('icon'))
//-> 'ux-button__icon'

console.log(button.modifier('default'))
//-> 'ux-button--default'

const options = {
  separator: {
    element: '-',
    modifier: '-',
    state: '#',
  }
}

console.log(button.element('icon'))
//-> 'c-button-icon'

console.log(button.modifier('default'))
//-> 'c-button-default'

console.log(button.state('is', 'default'))
//-> 'is#default'

console.log(button.is('loading'))
//-> 'is#loading'

console.log(button.has('error'))
//-> 'has#error'

// 修改单个修饰符
options['separator']['element'] = '__'

console.log(button.element('icon'))
//-> 'c-button__icon'

// 重置配置
options['separator'] = {
  element: '__',
  modifier: '--',
  state: '-',
}

console.log(button.element('icon'))
//-> 'c-button__icon'

console.log(button.modifier('default'))
//-> 'c-button--default'

console.log(button.state('is', 'loading'))
//-> 'is-loading'

console.log(button.is('loading'))
//-> 'is-loading'

console.log(button.has('error'))
//-> 'has-error'

element('button', 'icon')
// -> "button__icon"

element('button', ['icon', 'text'])
// -> ["button__icon", "button__text"]

element('button',{ icon: true, text: false })
// -> ["button__icon"]

element('button', { icon: true, text: false }, 'demo', [['doc']], null, undefined, false)
// -> ["button__icon", "button__demo", "button__doc"]

has('success')
// -> "has-success"

has(['success', 'error'])
// -> ["has-success", "has-error"]

has({ success: true, error: false })
// -> ["has-success"]

has({ success: true, error: false }, 'demo', [['doc']], null, undefined, false)
// -> ["has-success", "has-demo", "has-doc"]

is('loading')
// -> "is-loading"

is(['loading', 'disabled'])
// -> ["is-loading", "is-disabled"]

is({ loading: true, disabled: false })
// -> ["is-loading"]

is({ loading: true, disabled: false }, 'demo', [['doc']], null, undefined, false)
// -> ["is-loading", "is-demo", "is-doc"]

modifier('button', 'default')
// -> "button--default"

modifier('button', ['default', 'primary'])
// -> ["button--default", "button--primary"]

modifier('button',{ default: true, primary: false })
// -> ["button--default"]

modifier('button', { default: true, primary: false }, 'demo', [['doc']], null, undefined, false)
// -> ["button--default", "button--demo", "button--doc"]

state('is', 'loading')
// -> "is-loading"

state('is', ['loading', 'disabled'])
// -> ["is-loading", "is-disabled"]

state('is', { loading: true, disabled: false })
// -> ["is-loading"]

state('is', { loading: true, disabled: false }, 'demo', [['doc']], null, undefined, false)
// -> ["is-loading", "is-demo", "is-doc"]