手写发布订阅

手写发布订阅

const eventHub = {
    map:{
        // click: [f1,f2]
    },
    on: (name, fn) => {
        eventHub.map[name] = event.map[name] || []
        eventHub.map[name].push(fn)
    },
    emit: (name, data) => {
        const q = eventHub.map[name]  //alias缩写
        if(!q) return // 为空就return
        q.map(f => f.call(undefined, 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.on('click', '李智恩')
}, 3000)

// once 只监听一次 监听完之后自动取消掉 （这里省略）

用class实现

// 也可以用 class 实现
class EventHub {
    map = {}
    on(name, fn) {
        this.map[name] = this.map[name] || []
        this.map[name].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', '李智恩')
},3000)