js两种简单方式实现发布订阅

1. 这种用到了浏览器 window 的事件方法

 function test (data){
  console.log(data.detail+'收到数据了');
}
window.on = window.addEventListener
window.off = window.removeEventListener
window.emit = (type,data) => window.dispatchEvent(new CustomEvent(type,{detail:data}))
window.on('myevent',test)
window.emit('myevent','i love')
// window.off('myevent',test)
// window.emit('myevent','i love 2')

2.第二种用 class 以及一个 object 模拟消息队列

class Observer{
  constructor(){
    this.message = {}
  }
  $on(type,callbalck){
    if(!this.message[type]){
      this.message[type] = []
    }
    this.message[type].push(callbalck)
  }

  $off(type,callbalck){
    if(!this.message[type]){
      this.message[type] = undefined
      return
    }
    this.message[type] = this.message[type].filter(item=>item !== callbalck)
  }

  $emit(type,...args){
      if(!this.message[type]) return;
      this.message[type]
.forEach(item => item(...args))
  }

}

//const ob = new Observer()
//function test (data){
//  console.log(data+'收到数据了');
//}
// ob.$on('my',test)
// ob.$emit('my','cmn')