【NOTE】观察者模式VS订阅发布模式 | MARKSZのBlog

最近在看了一篇《不好意思，观察者模式跟发布订阅模式就是不一样》的文章之后对于这两个模式产生了比较浓厚的兴趣。不过奈何我的水平有限，看完那篇文章还是不能理解。不过在和朋友讨论之后，我想我应该是弄懂了。所以特地记下一篇笔记，以便回头翻阅的时候能够想起来。如果理解有误，欢迎在下方评论指出，一起讨论！

概述

有人说这两个模式其实是一个模式。我想这句话的对错对半分吧。它们有类似的地方，不过也不能说完全一致。先来一张图，这张图解释了观察者模式和发布订阅模式在流程上的一些区别：

左边是观察者模式，右边是订阅发布模式。

简单阐述二者的模型：

观察者模式里，观察者（Observer）直接订阅（subscribe）主题（Subject），而当主题被激活的时候，会触发（fire）观察者里的事件。

订阅发布模式里，订阅者（Subscriber）通过监听（on）事件总线（Event Bus）里的事件，当事件总线里的事件被触发（emit）的时候，订阅者将会执行相应的操作。而这里需要注意的是，事件总线里的事件是通过发布者（Publisher）进行发布（publish）和通知事件总线触发的。

注：事件总线也有说法叫为调度中心。本质上是一样的。不过因为写Vue时候习惯用Event Bus来说了，所以本文的调度中心皆以事件总线称呼。

所以事件总线本身不独自发布和触发事件，它会借由发布者来操作。这是跟观察者模式有着比较大的区别的地方。

当然只看这两张图和上面的解释，应该还是无法很好的理解。下面这张图能把流程讲得更清楚点。

这个例子可以理解为这样：左边是微信里的微商-顾客之间的关系。右边是商家-淘宝-顾客之间的关系。

观察者模式：顾客关注了微商的商品，微商会记住顾客关注的商品，一旦上新就直接私聊通知所有关注这个商品的顾客。这里的顾客就相当于观察者，这里的微商就相当于主题。
订阅发布模式：顾客通过淘宝（APP或者网站）关注了商家的商品，商家一旦上新就通过淘宝（APP或者网站）向关注了它的顾客群发消息。这里的顾客就是订阅者，这里的淘宝就是事件总线，这里的商家就是发布者。

所以可以看出，观察者模式的模型跟发布订阅模型里，差距就差在有没有一个中央的事件总线。如果有这个事件总线，我们就可以认为是个发布订阅模型。如果没有，那么就可以认为是个观察者模型。因为其实它们都实现了一个关键的功能：发布事件-订阅事件并触发事件。

下面用代码简单解释一下。

观察者模式

由于最近在学习TypeScript，所以下面的代码也会用TypeScript来书写。

我们先写一个定义观察者和主题的文件。



interface Subjects {
  [key: string]: any
}

class Observer {
  subject: string
  constructor (subject: string) {
    this.subject = subject
  }
  notify () {
    console.log(`This ${this.subject} was fired!`)
    this.subject = `Done`
  }
}


class Subject {
  
  subjects: Subjects = {}
  
  add (subject, observer: Observer): void {
    if (!this.subjects[subject]) {
      this.subjects[subject] = []
    }
    this.subjects[subject].push(observer)
  }
  
  remove (subject, observer: Observer): void {
    this.subjects[subject].forEach((item, index) => {
      if (item === observer) {
        this.subjects[subject].splice(index, 1)
      }
    })
  }
  
  fire (subject): void {
    this.subjects[subject].forEach(item => item.notify())
  }
}

export {
  Observer,
  Subject
}

于是在调用的时候，是这样调用的：

import * as op from './observer-pattern'
let observer = new op.Observer('click')
let subjects = new op.Subject()
subjects.add('click', observer)
subjects.fire('click')

经过上述调用，subjects触发观察者订阅的click事件，observer.subject的值将会变为Done（原先为click）。

订阅发布模式

接下来我们来实现一些订阅发布模式。订阅发布模式最关键的地方就在于中间的Event Bus部分。它接管着事件总线的订阅和发布。



interface Subjects {
  [key: string]: any
}


class EventBus {
  subjects: Subjects = {}
  on (subject, callback): void {
    
    if (!this.subjects[subject]) {
      this.subjects[subject] = []
    }
    this.subjects[subject].push(callback)
  }
  off (subject, callback = null): void {
    if (callback === null) {
      this.subjects[subject] = []
    } else {
      this.subjects[subject].forEach((item, index) => {
        
        if (item === callback) {
          this.subjects[subject].splice(index, 1)
        }
      })
    }
  }
  emit (subject, data = null): void {
    this.subjects[subject].forEach(item => item(data))
  }
}

export default new EventBus()

可以看出在这里的EventBus和观察者模式里的Subject几乎一致对吧。但是需要注意的是，最后一行里，我们export default new EventBus()，所以我们在项目里不同的地方import它，都会指向同一个Event Bus实例，这样的话就可以起到一个事件总线的作用了。它不在乎谁来监听，谁来发布。只要有人监听了，就把它放进监听队列中。只要有人发布了事件，就从相应的监听队列中触发回调。不过所有相关的事件都必须经过Event Bus这个实例，而不能越过它直接由发布者通知监听者。

再次祭出这张图

所以在订阅发布模型里，发布者或者订阅者的身份已经被弱化。发布者可以在任何时候发布事件，而订阅者可能只是一个回调函数。而最关键的事件总线部分，则是发布订阅模型的核心。

如果你用过Vue的Event Bus，相信不会陌生。接下来我们来用用我们刚才写的简单的Event Bus。

import bus from './pubsub.ts'
const people = function (val) {
  console.log('我收到了新的商品通知：', val) 
}

bus.on('newItem', people) 

const merchant = function (val) { 
  const item = {
    item: val
  }
  bus.emit('newItem', item)
}

merchant('Book')