设计模式 ~ 观察者模式

DGogoing2023-07-19 10:10

概念

观察者模式是一种设计模式，也被称为发布-订阅模式或事件模式；

用于在对象之间建立一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都会得到通知并自动更新；

如：DOM事件、vue / React 生命周期、各种异步回调 ~ 定时器、Promise.then、nodeJs 流式读取、端口监听

代码演示

存在两个角色：主题（Subject ）和观察者（Observer ）：

主题是被观察对象，它维护一组观察者对象并通知它们；

观察者是依赖于主题的对象，它们注册自己到主题以便于主题状态改变接收通知，并执行响应操作；

Subject： 可以理解为饮品店的吧台，当完成会通知你去拿取

javascript 复制代码

class Subject {
  private state: number = 0 // 状态
  private observers: Observer[] = [] // 观察者们
  // 获取状态
  getState(): number {
    return this.state
  }
  // 设置状态
  setState(newState: number) {
    this.state = newState
    this.notify() // 通知
  }
  // 添加观察者
  attach(observer: Observer) {
    this.observers.push(observer)
  }
  // 通知
  private notify() {
    this.observers.forEach(observer => {
      observer.update(this.state)
    })
  }
}

Observer : 可以理解为饮品店的顾客，等待吧台的通知

javascript 复制代码

class Observer {
  name: string
  constructor(name: string) {
    this.name = name
  }
  // 通知
  update(state: number) {
    console.log(`${this.name} updated, state is ${state}`)
  }
}

创建观察者对象

javascript 复制代码

const sub = new Subject()
const observer1 = new Observer('A')
const observer2 = new Observer('B')
sub.attach(observer1)
sub.attach(observer2)
sub.setState(1)

UML类图

~ 1:n 表示 1对多，一个主题对应多个观察者

VUE

vue 中的观察者模式：watch、watchEffect、包括组件更新过程

Watcher：监听器 ~ 监听 data 、当 data发生更新触发 re-render（重新渲染）