JS 的手写发布订阅

有两种方法实现

• 常规写法
• 用class 写法

• 常规写法：查看 以下 code

const eventHub = {
    map:{
        // click:[f1,f2]
    },
    on:(name:fn) =>{
        eventHub.map[name] = eventHub.map[name] || []
        eventHub.map[name].push(fn)
    },
    emit:(name,data)=>{
       const q = eventHub.map[name]
       if(!q) return 
       q.map(f => f.call(null,data))
       return undefined
    },
    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.on('click',console.error)

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

• 用 class 实现

class EventHub{
    map ={}
    on(name,fn){
        this.map[name] = this.map[name] || []
        this.map[name] = this.push(fn)
    }
    emit(name,data){
        const fnList = this.map[name] || []
        fnList.forEach(fn => fn.call(undefined,data))
    }
    off(name,fn){
        const fnList = this.map[name] || []
        const index = fnList.indexOf(fn)
        if(index < 0) return 
        fnList.splice(index,1)
    }
}
// 使用
const e = new EventHub()
e.on('click',(name)=>{
    console.log('hi'+name)
})
e.on('click',(name)=>{
    console.log('hello '+ name)
})
setTimeout(()=>{
    e.emit('click','jack')
},3000)