观察者模式通过发布者-订阅者机制实现对象间松耦合通信。JavaScript中可封装EventEmitter类，提供on、emit、off方法实现事件订阅与触发，支持多模块响应同一事件，如用户登录后更新UI、记录日志等。核心是维护事件回调列表并在状态变化时通知所有观察者。示例中EventEmitter解耦了业务模块，提升可维护性。进阶优化包括添加once、命名空间、clear方法及错误处理，有效管理监听器可避免内存泄漏。该模式广泛用于前端事件系统与组件通信。
在JavaScript中，观察者模式是一种非常实用的设计模式，常用于实现自定义事件系统。它允许对象（称为“观察者”）订阅另一个对象（称为“主题”或“发布者”）的特定事件。当事件发生时，所有订阅者都会收到通知并执行相应逻辑。这种机制解耦了代码模块，提升了可维护性和扩展性。
核心概念：观察者模式的工作原理
观察者模式包含两个主要角色：
- 发布者（Subject）：维护一个观察者列表，负责在状态变化时通知所有观察者。
- 观察者（Observer）：注册到发布者，接收更新通知。
在前端开发中，这种模式广泛应用于DOM事件、状态管理、组件通信等场景。通过手动实现一个轻量级事件系统，可以更灵活地控制程序行为。
实现一个简单的自定义事件系统
我们可以封装一个EventEmitter类，提供on、emit和off方法来管理事件订阅与触发。
立即学习“Java免费学习笔记（深入）”；
class EventEmitter {
constructor() {
this.events = {};
}
// 订阅事件
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
// 触发事件
emit(event, data) {
if (this.events[event]) {
this.events[event].forEach(callback => callback(data));
}
}
// 移除事件监听
off(event, callback) {
if (!this.events[event]) return;
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}这个类支持多个回调函数绑定到同一事件，并能传参通知所有监听者。
ShopWind网店系统
下载
ShopWind网店系统是国内最专业的网店程序之一，采用ASP语言设计开发，速度快、性能好、安全性高。ShopWind网店购物系统提供性化的后台管理界面，标准的网上商店管理模式和强大的网店软件后台管理功能。ShopWind网店系统提供了灵活强大的模板机制，内置多套免费精美模板，同时可在后台任意更换，让您即刻快速建立不同的网店外观。同时您可以对网模板自定义设计，建立个性化网店形象。ShopWind网
使用示例：模拟用户登录通知
假设我们希望在用户登录后通知多个模块（如更新UI、发送日志、加载数据）：
const eventBus = new EventEmitter();
// 模块1：更新界面
eventBus.on('userLogin', user => {
console.log(`欢迎 ${user.name}！`);
});
// 模块2：记录日志
eventBus.on('userLogin', user => {
console.log(`日志：${user.name} 在 ${new Date().toLocaleString()} 登录`);
});
// 模拟用户登录
eventBus.emit('userLogin', { name: 'Alice' });输出结果：
欢迎 Alice！ 日志：Alice 在 2025/4/5 10:00:00 登录
这样，各个模块无需直接引用彼此，只需依赖事件系统即可完成通信。
进阶优化建议
- 添加once方法，支持一次性事件监听。
- 增加事件命名空间或通配符匹配功能（如user:*"）。
- 提供clear方法清空所有事件，防止内存泄漏。
- 支持错误处理，在回调执行时捕获异常。
基本上就这些。一个轻量的事件系统能让代码结构更清晰，尤其适合组件化或状态驱动的应用场景。不复杂但容易忽略的是对监听器的管理和及时解绑，避免重复绑定和内存浪费。
