自定义事件系统是通过发布-订阅模式实现对象间解耦通信的机制，核心包括on、off、emit和once方法，可用于非DOM对象间的灵活消息传递，如购物车模块间通信，提升代码可维护性与扩展性。
在JavaScript中，自定义事件系统是一种强大的编程模式，它允许对象之间解耦通信。通过发布-订阅（Pub/Sub）机制，模块可以在不直接依赖彼此的情况下传递消息。这种模式广泛应用于前端框架、组件通信和状态管理中。掌握自定义事件系统，有助于构建更灵活、可维护的应用。
什么是自定义事件系统？
浏览器原生支持DOM事件，比如click、input等。但非DOM对象或业务逻辑之间也需要通信。自定义事件系统就是手动实现类似addEventListener和dispatchEvent的机制，让任意JavaScript对象可以监听和触发事件。
它的核心功能包括：
- on：注册事件监听器
- off：移除监听器
- emit（或trigger）：触发事件并传递数据
- once：绑定只执行一次的监听器
实现一个基础事件类
我们可以用一个简单的EventEmitter类来实现上述功能。使用对象存储事件名与回调函数列表的映射关系。
立即学习“Java免费学习笔记（深入）”；
class EventEmitter {
constructor() {
this.events = {};
}
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
}
once(event, callback) {
const wrapped = (...args) => {
callback.apply(this, args);
this.off(event, wrapped);
};
this.on(event, wrapped);
}
emit(event, ...args) {
if (this.events[event]) {
this.events[event].forEach(callback => {
callback.apply(this, args);
});
}
}
off(event, callback) {
if (this.events[event]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
}
这个类足够轻量，可用于组件间通信。例如，一个用户登录模块可以emit('login')，其他模块提前on监听该事件，收到通知后更新UI或请求数据。
实际应用场景举例
假设我们开发一个购物车系统，商品列表和总价显示是两个独立模块。使用事件系统可以让它们松耦合。
const eventBus = new EventEmitter();
// 商品列表模块
function addItemToCart(item) {
// 添加逻辑...
eventBus.emit('itemAdded', item);
}
// 总价模块
eventBus.on('itemAdded', function(item) {
console.log(`商品 ${item.name} 已加入，刷新总价`);
// 更新计算逻辑
});
addItemToCart({ name: '笔记本', price: 5000 });
这样，商品列表不需要知道谁接收消息，总价模块也不依赖具体添加逻辑，便于测试和扩展。
注意事项与优化建议
虽然事件系统灵活，但使用不当容易导致内存泄漏或调试困难。
- 始终提供off方法，并在适当时机清理监听器，特别是在单页应用中
- 避免频繁emit高频事件，考虑节流或合并
- 为事件命名加上命名空间，如'user:login'，减少冲突
- 可在emit中加入错误处理，防止某个回调出错影响后续执行
对于复杂项目，可引入成熟的库如mitt或events（Node.js风格），它们提供了更稳定的API和额外功能。
基本上就这些。自定义事件系统不复杂但容易忽略细节，合理使用能让代码结构更清晰。理解其原理有助于深入掌握现代前端架构的设计思想。
