手写发布订阅(eventHub)

其实是一个出名的设计模式，js的面向对象已经走入死胡同了，js现在往函数式和响应式的方向走。

一个对象能够发布一个事件，一个对象能够订阅这个事件，这就是发布订阅。

两个对象A和B，不直接交流，而通过中间的e来发布事件和订阅，简单来说，设计模式就是一种写代码的套路。

const eventHub ={
    map:{},
    on:(name,fn)=>{ 
        //入队
        eventHub.map[name] = eventHub.map[name] || []
        eventHub.map[name].push(fn)
        return undefined
    }, //监听事件 on把对应名字的事件加入事件队列（先进先出）里。
    emit:(name,data)=>{
        const q = eventHub.map[name]
        if(!q) { return }
        q.map(f => f.call(undefined, data))
        return undefined
    }, //trigger
    off:(name,fn)=>{
        const q = eventHub.map[name]
        if(!q){ return }
        const index = q.indexOf(fn)
        if(index < 0) { return }
        q.splice(index,1)
    } //取消监听事件
}

eventHub.on('click',console.log)
eventHub.off('click',console.error)

setTimeout(()=>{
    eventHub.emit('click','frank')
},3000)

测试结果，三秒后：