不过是一个基类
使用方式
npm install --save but-base
继承
import ButBase from 'but-base'
class Component extends ButBase {
}
Component.name === 'Component'
const component = new Component()
使用描述项生成
import ButBase from 'but-base'
const Component = ButBase.compile({
name: 'Component'
})
Component.name === 'Component'
const component = new Component()
功能
数据存储
添加数据
component.data('key', 'sth')
component.data('key') === 'sth'
移除数据
const removedData = component.removeData('key')
removedData === 'sth'
component.data('key') === undefined
事件
监听
component.on('key', function (arg1, arg2) {
this === component
arg1 === 'foo'
arg2 === 'bar'
})
component.fire('key', ['foo', 'bar'])
改变监听函数的上下文
const person = {
name: 'butSalt'
}
component.on('key', function (arg1, arg2) {
this === person
}, person)
component.fire('key')
监听一次
component.once('key', function () {
})
component.fire('key')
component.fire('key')
移除监听
component.un('key')
component.un('key', handler)
模板
模板实例化
class Component extends ButBase {
getTemplate() {
return '<div></div>'
}
}
const component = new Component()
component.getEl()
挂载
new Component({
el: '#target'
})
new Component({
el: dom
})
component.mountTo('#target')
卸载
配置
一般使用方式
class Component extends ButBase {
updateFoo() {
const { foo } = this.config()
}
updateBar() {
const { bar } = this.config()
}
}
const component = new Component()
component.config({
foo: 1,
bar: 2
})
调用config方法时暂时关闭事件机制
class Component extends ButBase {
updateData() {
this.fire('change')
}
}
const component = new Component()
component
.config({
data: {}
})
component
.config(
{
data: {}
},
true
)
控制更新方法的执行先后顺序
class Component extends ButBase {
updateFirst() {
}
updateSecond() {
}
updateThird() {
}
getExecOrder() {
return {
updateSecond: ['updateFirst'],
updateThird: ['updateSecond']
}
}
}
const component = new Component()
component.config({
third: true,
second: true,
first: true
})
component.config({
first: true
})
component.config({
second: true
})
组件默认配置
class Component extends ButBase {
updateFoo() {
}
updateBar() {
}
getDefaultConfig() {
return {
foo: true
}
}
}
const component = new Component({
bar: true
})
{
foo: true,
bar: true
}
组件初始化配置
class Component extends ButBase {
inited() {
return {
goo: true
}
}
getDefaultConfig() {
return {
foo: true
}
}
}
const component = new Component({
baz: true
})
{
foo: true,
bar: true,
baz: true
}
配置合并逻辑
component.config({
arr: [1, 2, 3],
obj: {
foo: true
},
dataA: {
foo: true
},
bData: {
foo: true
}
})
component.config({
arr: [4, 5, 6],
obj: {
bar: true
},
dataA: {
bar: true
},
bData: {
bar: true
}
})
{
arr: [4, 5, 6],
obj: {
foo: true,
bar: true
},
dataA: {
bar: true
},
bData: {
bar: true
}
}
生命周期
class Component extends ButBase {
beforeInit() {
}
inited() {
}
beforeDestroy() {
}
destroyed() {
}
}
注册插件
const plugin = function mounter(ButBase, config) {
if (config.foo === true) {
}
}
ButBase.use(plugin, {
foo: true
})