【个人前端笔记】手写EventHub

一、EventHub
EventHub是对发布-订阅模式的一种实现。它是一种集中式事件处理机制，允许不同的模块之间进行彼此通信而又不需要相互依赖，达到一种解耦的目的。

二、EventHub优缺点
优点：
1.通过EventHub实现所有模块之间通信的技术。在vue2中可以用事件总线实现任意组件间传递数据
2.EventHub可以在不引入第三方库实现
缺点：
1.共用同一个命名空间，后期代码可维护性差
2.若不及时销毁不再使用的监听器，容易引发内存泄漏

三、EventHub代码实现（ts）

type EventFn = (data?:any) => void

interface eventhub {
  eventMap:{[k:string]:EventFn[]}
  on:(eventName:string,eventFn:EventFn) => void
  emit:(eventName:string,data?:[any],thisObj?:object) => void
  remove:(eventName:string,eventFn:EventFn) => void
}

class EventHub implements eventhub {
  eventMap:eventhub["eventMap"] = {}

  on(eventName:string,fn:EventFn){
    if (fn instanceof Function === false) throw new Error("仅支持函数！");
    
    this.eventMap[eventName] = this.eventMap[eventName] || []
    this.eventMap[eventName].push(fn)
  }

  emit(eventName: string,data?:[any],thisObj?:object){
    if (data && thisObj) {
      this.eventMap[eventName]?.forEach(fn => fn.apply(thisObj,data))
    }else if (data) {      
      this.eventMap[eventName]?.forEach(fn => fn(...data))
    }else{
      this.eventMap[eventName]?.forEach(fn => fn())
    }
  }

  remove(eventName:string,fn:EventFn){
    let index = -1
    index = this.eventMap[eventName].indexOf(fn)
    if (index === -1) return;
    this.eventMap[eventName].splice(index,1)
  }
}

export default EventHub