常见的设计模式

1. 事件发射器

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

事件中心、事件发射器

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

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

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

on 注册：将函数放入集合

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

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

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

2. 观察者模式

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

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

// 被观察者：维护状态 + 维护观察者 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