On this page

手写发布订阅模式

什么是发布订阅模式？

发布-订阅模式是一种对象间一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到状态改变的通知。

订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel）;
当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

发布订阅模式的实现

首先创建一个调度中心的类及它的构造器

使用对象作为事件容器，当同一个事件存在多个订阅者时，使用数组存放。

js

class EventCenter {
  constructor() {
    // 事件容器，用于存放事件数组
    this.events = {};
  }
}

添加订阅事件方法

js

// 订阅事件
on(type, callback) {
  // 创建数组容器
  if (!this.events[type]) {
    this.events[type] = [callback];
  } else {
    // 向数组容器中添加事件
    this.events[type].push(callback);
  }
}

添加事件触发方法

js

// 触发事件
emit(type, ...args) {
  // 判断是否存在事件
  if(!this.events[type]) {
    return;
  }
  // 依次触发事件
  this.events[type].forEach((cb) => {
    cb(...args)
  })
}

添加取消订阅方法

js

// 取消订阅
off(type, callback) {
  if(!this.events[type]) {
    return
  }
  if(callback) {
    this.events[name].filter(cb => cb !== callback)
  } else {
    // 不指定回调函数时，删除所有订阅
    delete this.events[name]
  }
}