事件总线EventBus

一、基于Vue的EventBus 

 使用Vue中的eventBus - 掘金

/*
 * @Author: guhua
 * @Description: 实现全局eventBus
 */
import Vue from 'vue'
const Bus=new Vue()
const eventBus={
  // 注册事件函数
  emit(eventType,args){
    Bus.$emit(eventType,args)
  },
  // 触发事件函数
  on(eventType,callback){
    Bus.$on(eventType,(val) => {
      callback(val)
    })
  },
  // 销毁注册事件函数
  off (eventType) {
    Bus.$off(eventType)
  },
  // 注册事件触发一次后销毁函数
  once(eventType,callback){
    Bus.$on(eventType,(val) => {
      callback(val)
      Bus.$off(eventType)
    })
  }
   
}

export default eventBus

eventBus.emit('txt',val)

 eventBus.on('txt',(val) => {
      console.log('aaaaa')
      this.text=val
 })

二、JS实现EventBus

用JS实现EventBus - 知乎

本质就是一个发布订阅模式

//声明类
class EventBus(){
     constructor(){
       //定义事件总线对象
       this.eventList={};
  }
//监听，或者说是发布
  $on(event,fn){
      let  eventList=this.eventList[event];
      eventList? eventList.push(fn) : this.eventList[event]=[]
  }
//触发，订阅
  $emit(event,...arg){
    this.event[name]&&this.event[name].forEach(fn => {
                fn(...args)
            });
}
}

let  eventbus=new  EventBus();
eventbus.$on('sayHi',function(msg){
    console.log(msg)
});
eventbus.$emit('sayHi',Math.random())