常见的设计模式

1. 事件发射器

是一种发布-订阅（publish,subcription) 模型的实现

事件中心、事件发射器

本质是Map存储事件名→回调函数集合

这样彼此都不知道对方存在，都是被事件中心单向关联，实现解耦

tsx 复制代码

{
  "data": [fn1, fn2],
  "click": [fnA],
  "error": [fnX, fnY, fnZ]
}

on 注册：将函数放入集合

emit 遍历集合，依次执行回调

tsx 复制代码

emit(eventName, payload) {
  for (const fn of listeners[eventName]) {
    fn(payload);
  }
}

截图工具多语言中的事件发射器

2. 观察者模式

被观察者状态变化时通知所有观察者，触发update

之间通过 subjects 通信，需要维护观察者列表并实现广播，即调用观察者的 update 回调，所以解耦合得并不是很彻底

tsx 复制代码

// 被观察者：维护状态 + 维护观察者
class Subject {
  constructor() {
    this.observers = [];
    this.state = null;
  }

  setState(value) {
    this.state = value;
    this.notify(value);
  }

  addObserver(observer) {
    this.observers.push(observer);
  }

  removeObserver(observer) {
    this.observers = this.observers.filter(o => o !== observer);
  }

  notify(value) {
    this.observers.forEach(observer => observer.update(value));
  }
}

// 观察者：需要有 update 方法
class Observer {
  update(value) {
    console.log("收到更新：", value);
  }
}

// 使用
const subject = new Subject();
const obs1 = new Observer();
const obs2 = new Observer();

subject.addObserver(obs1);
subject.addObserver(obs2);

subject.setState(123);
// 输出：两次 "收到更新：123"

还有例如 useForm 中对表单状态 _formState 更新后通知相关组件的实现就是内部维护了一个观察者subjects

常见的设计模式

1. 事件发射器

本质是Map存储 事件名→回调函数集合

2. 观察者模式

本质是Map存储事件名→回调函数集合