自定义事件总线

1.自定义事件总线

• 自定义事件总线属于一种观察者模式，其中包括三个角色：

  • 发布者(Publisher)：发出事件(Event)
  • 订阅者（Subscriber）：订阅事件（Event）、并且会进行响应(Handler)
  • 事件总线（EventBus）：无论是发布者还是订阅者都是通过事件总线作为中台的。

• 当然我们可以选择一些第三方的库

  • Vue2默认是带有事件总线的功能

  • Vue3中推荐一些第三方库，比如mitt

• 当然我们也可以实现自己的事件总线
  • 事件的监听方法on
  • 事件的发射方法emit
  • 事件的取消监听off

class JYEventBus{
  constructor(){
    this.eventBus={}
  }

  // * 监听,可以监听对次
  on(eventName,eventCallback,thisArg){
    let handlers=this.eventBus[eventName];
    if(!handlers){
      handlers=[];
      this.eventBus[eventName]=handlers;
    }
    handlers.push({
      thisArg,
      eventCallback
    });
  }

  off(eventName,eventCallback){
    let handlers=this.eventBus[eventName];
    if(!handlers) return;
    const newHandlers=[...handlers];
    for(let i=0;i<newHandlers.length;i++){
      const handler=newHandlers[i];
      if(handler.eventCallback==eventCallback){
        const index=handlers.indexOf(handler);
        handlers.splice(index,1)
      }
    }
  }

  emit(eventName,...payload){
    const handlers=this.eventBus[eventName];
     if(handlers){
       handlers.forEach(handler=>{
        handler.eventCallback.apply(handler.thisArg,payload);
       })
     }
  }
}

const eventBus=new JYEventBus();

// main.js
eventBus.on("abc",function(v){
 console.log("监听1vvv",v,this);
},{name:"why"})

// main.js
const handleCallback=function(v){
  console.log("监听2vvv",v,this);
 }
eventBus.on("abc",handleCallback,{name:"why"})
// utils.js
eventBus.emit("abc",123);

eventBus.off("abc",handleCallback)

eventBus.emit("abc","哈哈哈哈");