手写EventHub

EventHub

eventHub是基于发布订阅模式实现的一个实例,常用于多模块(组件)间的通信

如何实现

首先确定API
通常有on(注册)/emit(触发)/off(取消)3三个api

eventHub事件总线

它身上有这三个方法

class EventHub{
	on(){},
    emit(){}
    off(){}
}

全部代码

class EventHub {
    cache: { [key: string]: Array<(data: unknown) => void> } = {}
    on(eventName: string, fn: (data: unknown) => void) {
        this.cache[eventName] = this.cache[eventName] || []
        this.cache[eventName].push(fn)
    }
    emit(eventName: string, data?: unknown) {
        (this.cache[eventName] || []).forEach(fn => {
            fn(data)
        })
    }
    off(eventName: string, fn?: (data?: unknown) => void) {
        if (arguments.length > 1) {
            if (this.cache[eventName]) {
                let index = this.cache[eventName].indexOf(fn)
                this.cache[eventName].splice(index, 1)
            }
        }
        this.cache[eventName] = []
    }
}
export default EventHub