实现发布订阅

概述

日常开发中，必定会写很多的事件，对应就会有事件的发布与订阅，比如dom事件监听addEventListener，框架vue中的父子组件通信，事件总线等，都是发布订阅的思想。发布订阅者模式，一种对象间一对多的依赖关系，但一个对象的状态发生改变时，所依赖它的对象都将得到状态改变的通知。

主要的作用(优点)：

1. 广泛应用于异步编程中(替代了传递回调函数)
2. 对象之间松散耦合的编写代码 缺点：

• 创建订阅者本身要消耗一定的时间和内存
• 多个发布者和订阅者嵌套一起的时候，程序难以跟踪维护

实现的思路：

• 创建一个对象(缓存列表)
• on方法用来把回调函数fn都加到缓存列表中
• emit 根据key值去执行对应缓存列表中的函数
• off方法可以根据key值取消订阅

实现

class EventEmiter {
  constructor() {
    // 事件对象，存放订阅的名字和事件
    this._events = {}
  }
  // 订阅事件的方法
  on(eventName,callback) {
    if(!this._events) {
      this._events = {}
    }
    // 合并之前订阅的cb
    this._events[eventName] = [...(this._events[eventName] || []),callback]
  }
  // 触发事件的方法
  emit(eventName, ...args) {
    if(!this._events[eventName]) {
      return
    }
    // 遍历执行所有订阅的事件
    this._events[eventName].forEach(fn=>fn(...args))
  }
  off(eventName,cb) {
    if(!this._events[eventName]) {
      return
    }
    // 删除订阅的事件
    this._events[eventName] = this._events[eventName].filter(fn=>fn != cb && fn.l != cb)
  }
  // 绑定一次 触发后将绑定的移除掉 再次触发掉
  once(eventName,callback) {
    const one = (...args)=>{
      // 等callback执行完毕在删除
      callback(args)
      this.off(eventName,one)
    }
    one.l = callback // 自定义属性
    this.on(eventName,one)
  }
}

测试用例

let event = new EventEmiter()

let login1 = function(...args) {
  console.log('login success1', args)
}
let login2 = function(...args) {
  console.log('login success2', args)
}
// event.on('login',login1)
event.once('login',login2)
event.off('login',login1) // 解除订阅
event.emit('login', 1,2,3,4,5)
event.emit('login', 6,7,8,9)
event.emit('login', 10,11,12)

其他工程化库

基于发布订阅实现的库常见如下

• mitt
• eventemitter3