观察者模式是前端事件驱动编程的核心，它通过被观察者在状态变化时通知观察者实现松耦合通信；JavaScript的DOM事件、自定义事件及事件循环机制均基于此模式实现异步回调与跨组件通信。
观察者模式是前端开发中非常核心的设计模式之一，JavaScript 的事件系统正是基于这种模式实现的。它让对象之间可以松耦合地通信：一个对象（被观察者）在状态改变时通知所有依赖它的对象（观察者），而无需知道这些观察者是谁。
观察者模式的基本结构
观察者模式包含两个主要角色：
- 被观察者（Subject）：维护一个观察者列表，提供添加、删除和通知观察者的方法。
- 观察者（Observer）：实现一个更新方法，当被观察者触发通知时被调用。
下面是一个简单的手动实现：
class Subject {
constructor() {
this.observers = [];
}
addObserver(observer) {
this.observers.push(observer);
}
removeObserver(observer) {
this.observers = this.observers.filter(obs => obs !== observer);
}
notify(data) {
this.observers.forEach(observer => observer.update(data));
}
}
class Observer {
constructor(name) {
this.name = name;
}
update(data) {
console.log(`${this.name} received:`, data);
}
}
// 使用示例
const subject = new Subject();
const obs1 = new Observer('Observer 1');
const obs2 = new Observer('Observer 2');
subject.addObserver(obs1);
subject.addObserver(obs2);
subject.notify('Hello from subject!');
DOM 事件系统：浏览器中的观察者模式
浏览器的事件机制是观察者模式的典型应用。DOM 元素作为被观察者，事件监听函数就是观察者。
立即学习“Java免费学习笔记（深入）”；
通过 addEventListener 添加监听，相当于注册观察者；事件触发时，浏览器自动调用回调函数，完成通知过程。
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log('Button was clicked!');
});
// 点击按钮后，回调函数被调用 —— 观察者收到通知
这种设计让 UI 行为与逻辑解耦，开发者无需轮询按钮状态，只需“订阅”感兴趣的事件即可。
自定义事件实现跨组件通信
除了 DOM 事件，JavaScript 还支持创建自定义事件，用于模块或组件间的通信。
利用 EventTarget 或 CustomEvent 可以轻松构建发布-订阅系统。
// 创建一个可绑定事件的对象
const eventBus = new EventTarget();
// 监听自定义事件
eventBus.addEventListener('dataReady', (e) => {
console.log('Data received:', e.detail);
});
// 分发事件
const event = new CustomEvent('dataReady', { detail: 'Some data' });
eventBus.dispatch(event);
这种方式在复杂应用中常用于非父子组件通信，避免层层传递 props。
事件循环与异步通知
JavaScript 的事件系统还与事件循环紧密结合。用户交互、定时器、网络请求等都会生成事件，推入任务队列，由事件循环在适当时机执行回调。
例如：
setTimeout(() => {
console.log('Timeout callback executed');
}, 0);
console.log('Sync code runs first');
尽管延时为 0，回调仍会在当前执行栈清空后才被调用，体现了观察者模式在异步环境下的延迟通知特性。
基本上就这些。理解观察者模式有助于掌握事件驱动编程的本质，无论是处理用户交互、实现状态管理，还是构建响应式系统，都是基础能力。
