事件发射器模式通过发布-订阅机制实现组件间解耦，核心为Emitter和Listener两个角色，使用EventEmitter类管理事件的监听、触发与移除，按钮组件通过emit发送事件，状态组件通过on接收并更新UI，适用于跨层级通信和全局通知场景，需注意避免事件滥用、及时解绑防止内存泄漏，并建议统一管理事件常量，结合状态库处理复杂逻辑。
在前端开发中，组件之间的通信往往容易导致强耦合，一旦某个组件发生变化，其他依赖它的组件也可能需要修改。使用事件发射器（Event Emitter）模式可以有效解耦组件间的直接依赖，让它们通过“发布-订阅”机制进行通信。
什么是事件发射器模式
事件发射器模式是一种行为设计模式，允许对象在特定事件发生时通知其他对象，而无需知道这些对象是谁。核心是两个角色：发布者（Emitter）和订阅者（Listener）。组件只需关注自身逻辑，触发事件或监听事件即可，不需要直接调用对方方法。
实现一个简单的事件发射器
可以自己封装一个轻量的事件中心，用于管理事件的监听与触发：
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]) {
this.events[event] = this.events[event].filter(cb => cb !== callback);
}
}
}
在组件中使用事件发射器
假设有一个按钮组件和一个显示状态的组件，它们不直接引用彼此，而是通过事件中心通信：
- 按钮点击时，调用 eventEmitter.emit('buttonClicked', { text: '按钮被点击了' })
- 状态组件在初始化时，调用 eventEmitter.on('buttonClicked', updateUI)
- 当按钮触发事件，所有监听该事件的回调都会被执行，状态组件自动更新
这样，按钮组件完全不知道谁在监听，状态组件也不关心谁触发了事件，实现了真正的松耦合。
实际应用场景与注意事项
事件发射器适用于跨层级组件通信、全局状态通知（如用户登录、网络状态变化）等场景。但要注意以下几点：
- 避免过度使用，否则会导致事件难以追踪，形成“事件地狱”
- 记得在组件销毁时移除事件监听（off），防止内存泄漏
- 建议对事件名称进行统一管理（如常量定义），减少拼写错误
- 复杂状态建议结合状态管理库，事件发射器更适合轻量级通知
基本上就这些。事件发射器模式简单却强大，合理使用能让代码更灵活、更易维护。
