JavaScript设计模式 -- 观察者模式

[mengxiong10]

模式定义

观察者模式(Observer Pattern)：定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式又叫做发布-订阅（Publish/Subscribe）模式、模型-视图（Model/View）模式、源-监听器（Source/Listener）模式或从属者（Dependents）模式。

观察者模式是一种对象行为型模式。

自己的理解

JavaScript本身就是基于事件驱动的，所以观察者模式还是比较容易理解。像流行的MVVM也离不开观察者模式，数据的变化通知视图更新。在轻文的一个需求演绘登录后在不刷新页面的情况下更新评论框，个人信息等状态。使用观察者模式在各个模块中通信。

实例

自定义事件

class EventTarget {
  constructor () {
    this.subs = {}
  }
  on (type, listener) {
    if (!Array.isArray(this.subs[type])) {
      this.subs[type] = []
    }
    this.subs[type].push(listener)
  }
  trigger (type, ...args) {
    const handlers = this.subs[type]
    if (Array.isArray(handlers) && handlers.length) {
      handlers.forEach(handler => {
        handler.apply(this, args)
      })
    }
  }
  off (type, listener) {
    const handlers = this.subs[type]
    if (Array.isArray(handlers) && handlers.length) {
      const len = handlers.length
      for (let i = len - 1; i >= 0; i--) {
        if (listener === handlers[i]) {
          handlers[i].splice(i, 1)
          break
        }
      }
    }
  }
}

const test = new EventTarget()

test.on('test', function (...args) {
  console.log(args)
})

test.trigger('test', 1, 2)