概述

![[observer1.excalidraw]]

特性

1. 它是一系列对象之间的一种一对多关系
2. 当订阅者有变动时，会通知对应的观察者
3. 订阅者可以添加多个观察者
4. 该模式是一种松耦合设计，观察者无需关注订阅者的内部细节，只需关于接口的定义即可

什么时候情况下用

1. 消息通知
2. 依赖于当订阅对象的变化时，需要执行动作

实现

class Subject {
  observer = []

  subscription(key, cb) {
    this.observer.push({
      key, cb
    })
  }

  cancel(key) {
    this.observer = this.observer.filter(v => v.key !== key)
  }

  notice(...args) {
    this.observer.forEach(v => v.cb(...args))
  }
}

const subject = new Subject()

subject.subscription('a1', (...args) => {
  console.log('a1:', ...args);
})
subject.subscription('a2', (...args) => {
  console.log('a2:', ...args);
})

console.log('first');
subject.notice('d', '1')
console.log('second');
subject.notice('c', '1',2,3,4)

# 输出：
first
a1: d 1
a2: d 1
second
a1: c 1 2 3 4
a2: c 1 2 3 4

当然上面是最简单的设计，复杂一些可以做成一个 EventBus，可以订阅不同的事件

总结

观察者模式在日常开发中，比较常用，但要和订阅发布模式区分好。