观察者模式和发布-订阅模式区别

观察者模式

一般至少有一个可被观察的对象subject，可以有多个观察者observer去观察这个对象。二者的关系是通过subject主动建立的，subject至少有三个方法：添加observer，删除observer，通知observer。

当subject将某个observer添加到自己的观察者列表后，二者的联系就建立起来了。此后只要subject在某种时机触发通知，observer即可接收到来自被观察者的消息。

发布-订阅模式

核心基于一个中心来建立整个体系，其中发布者和订阅者不能直接进行通信，而是发布者将要发布的消息交给中心管理，订阅者也是根据自己的情况，按需订阅中心的消息。

观察者模式实现

class Subject {
  constructor() {
    this.observerList = []
  }

  add(observer) {
    this.observerList.push(observer)
  }

  remove(observer) {
    const i = this.observerList.findIndex((item) => item.name === observer.name)
    this.observerList.splice(i, 1)
  }

  notify(msg) {
    this.observerList.forEach(item => {
      item.notify(msg)
    })
  }
}

class Observe {
  constructor(name, subject) {
    this.name = name
    subject && subject.add(this)
  }
  notify(msg) {
    console.log(`${this.name}接收到了${msg}`)
  }
}

const sub = new Subject()
const ob1 = new Observe('a1', sub)
const ob2 = new Observe('a2')
sub.add(ob2)
sub.notify('666')

发布-订阅模式实现

const Observe = (() => {
  const _message = new WeakMap()
  return class Observer {
    constructor() {
      _message.set(this, {})
    }

    on(key: string, fn: Function) {
      let message = _message.get(this)
      if (!message[key]) {
        message[key] = []
      }
      message[key].push(fn)
    }

    emit(key: string, args = {}) {
      let message = _message.get(this)
      if (!message[key]) return
      message[key].forEach((item: Function) => {
        item && item.call(this, { key, args })
      })
    }

    remove(key: string, fn: Function) {
      let message = _message.get(this)
      if (!message[key]) return

      for (let i = message[key].length; i >= 0; i--) {
        if (message[key][i] == fn) {
          message[key].splice(i, 1)
        }
      }
    }
  }
})()

let observer = new Observe()

function name(params:string) {
  console.log('name:', params)
}

observer.on('test', name)
observer.emit('test', 'neo')
observer.remove('test', name)
observer.emit('test', 'neo1')