微内核模型(学习笔记)

针对 xx复杂业务组件，各业务方UI要求一致，但数据格式不统一的问题，设计SDK,提供插件机制，满足不同数据来源进行统一样式的xxx渲染，xx个业务方接入，整体研发提效xxx

const events = {}
const type = ['created','mount']
class Core {
    context = {}
    defaultOpts = {
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('mounted')
        },
        destroyed(){
            console.log('destroyed')
        }
    }
    constructor(opts){
        this.opts = {
            ...this.defaultOpts,
            ...opts
        }
    }
    addPlugin({type,run}){
        events[type] = events[type] || []
        events[type].push(run)
    }
    pluginRunByLifeCycle(type){
        events[type]?.forEach(fn=>fn(this.context))
    }
    start(){
        this.opts.beforeCreate(this.context);
        this.pluginRunByLifeCycle('create')
        this.opts.created(this.context)

        this.opts.beforeMount(this.context);
        this.pluginRunByLifeCycle('mount')
        this.opts.mounted(this.context)

        this.engine()
        return ()=>this.stop()
    }
    stop(){
        this.opts.beforeDestroy(this.context);
        this.pluginRunByLifeCycle('destroy')
        this.opts.destroyed(this.context)

    }
}
class DrawCore Extetnds Core{
    engine(){
        console.log('i am drawing...')
    }
}
// user apis
const core = new Core({
    beforeCreate(context){
        context.payload = {foo:'foo'}
    }
})
core.addPlugin({
    type: 'created',
    run: (context)=>{
        console.log('plugin')
    }
})
core.start()
core.stop()