观察者模式：当被观察的对象发生变化时，其所有的观察者都会受到通知并进行相应的操作。当对象间存在一对多的关系时，可以使用观察者模式。在js中，可以使用回调函数或事件监听来实现观察者模式。
在前端开发中，观察者模式常被用来实现组件间的数据传递和事件处理。比如一个组件的状态发生改变时，可以通过观察者模式通知其他组件更新自身的状态或者视图。
观察者模式中的2个角色：
- subject（主题）：被观察的对象，当其状态发生改变时会通知所有的观察者。
- Observer（观察者）：观察主题的对象，当主题状态发生改变时会接收通知并进行相应的处理。
react中的状态管理器redux和事件处理库EventEmitter可以实现观察者模式。
代码简单实现：
// 主题
class Subject {
constructor() {
// 观察者列表
this.observers = [];
}
// 添加观察者
addObserver(observer) {
this.observers.push(observer);
}
// 发布消息
notify(data) {
this.observers.forEach(obs => obs.update(data))
}
// 删除观察者
removeObserver(observer) {
this.observers = this.observers.filter(obs => obs !== observer)
}
}
// 观察者
class Observer {
// 接收消息后的处理
update(data) {
console.log(`Received data: ${data}`)
}
}
// 添加观察者
const subject = new Subject();
const observer1 = new Observer();
const observer2 = new Observer();
subject.addObserver(observer1);
console.log(subject.observers);
subject.addObserver(observer2);
console.log(subject.observers);
// subject发布消息
subject.notify('hello everyone')
// 删除观察者
subject.removeObserver(observer1);
console.log(subject.observers);
// subject再次发布消息
subject.notify('hello everyone2')
