JavaScript观察者模式实现
观察者模式通过主题与观察者解耦实现状态自动通知，JavaScript中可用于事件处理与数据绑定。
观察者模式是一种设计模式，用于在对象之间定义一对多的依赖关系，当一个对象的状态发生变化时，所有依赖它的对象都会自动收到通知。在JavaScript中，这种模式常用于事件处理、数据绑定等场景。下面是一个简洁而实用的观察者模式实现。
核心概念说明
观察者模式包含两个主要角色：
- 主题（Subject）：维护一组观察者，提供添加、删除和通知观察者的方法。
- 观察者（Observer）：订阅主题，一旦主题状态变化，就会收到通知并作出响应。
基本实现代码
以下是一个基于类的JavaScript实现：
class Subject {
constructor() {
this.observers = [];
}
// 添加观察者
addObserver(observer) {
if (typeof observer.update === 'function') {
this.observers.push(observer);
}
}
// 移除观察者
removeObserver(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
// 通知所有观察者
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
// 观察者类（可选，只是一个有update方法的对象）
class Observer {
constructor(name) {
this.name = name;
}
update(data) {
console.log(`${this.name} received:`, data);
}
}
使用示例
下面是具体的调用方式：
// 创建主题
const subject = new Subject();
// 创建观察者
const observer1 = new Observer('Observer 1');
const observer2 = new Observer('Observer 2');
// 注册观察者
subject.addObserver(observer1);
subject.addObserver(observer2);
// 发布通知
subject.notify('He
llo from the subject!');
// 可以动态移除
subject.removeObserver(observer1);
subject.notify('Second message');
llo from the subject!');
// 可以动态移除
subject.removeObserver(observer1);
subject.notify('Second message');
输出结果为：
Observer 1 received: Hello from the subject! Observer 2 received: Hello from the subject! Observer 2 received: Second message实际应用场景
这个模式非常适合用在以下情况：
- 组件间通信（如前端组件状态同步）
- 事件总线或自定义事件系统
- 数据模型变更通知视图更新（类似MVVM）
你可以将Subject扩展为EventEmitter的基础结构，支持不同事件类型、命名事件、once方法等。
基本上就这些。不复杂但很实用。