前端小贴士 - 实现订阅发布模式

一、什么是发布订阅模式？

  发布订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象（发布者）的状态发生改变时，所有依赖它的对象（订阅者）都将得到通知。

二、发布订阅模式的身影

  在前端的开发中，发布订阅模式无处不在：

• addEventListener事件监听；
• Vue框架的数据双向绑定（数据劫持 + 发布订阅模式）；
• NodeJS中的EventEmitter模块。

三、实现

  JavaScript主要通过注册回调函数的方式实现发布订阅模式，核心点如下：

• 创建一个对象来维护订阅事件中的回调函数；
• on方法提供向订阅事件中注册回调函数的功能；
• emit方法则是执行订阅事件中的回调函数；
• once方法则是只触发一次订阅事件方法；
• remove方法删除订阅事件中的回调函数。

  function Event () {
    if (!(this instanceof Event)) {
      return new Event() // 确保用户采用构造函数的方式创建对象
    }
    this.events = {} // 用于维护订阅事件的回调函数
  }

  on方法的实现相对比较简单，主要给相应的订阅事件创建数组来保存订阅者的回调函数：