发布订阅模式通过事件中心实现组件间解耦，支持跨层级通信。使用eventhub类可实现on、emit、off方法，用于订阅、发布和取消事件。组件a触发事件，组件b监听并响应，无需直接引用。建议统一事件常量、及时取消订阅以防内存泄漏，可扩展once功能，大型项目推荐mitt等库。该模式适用于非父子组件通信与全局状态通知，提升代码可维护性。
在前端开发中，组件之间的通信是常见需求。当组件层级复杂或跨层级通信时，直接的父子传参会变得繁琐。发布订阅模式（Pub-Sub）是一种解耦组件依赖的有效方式，能让多个组件通过事件进行通信，而无需彼此了解对方的存在。
什么是发布订阅模式
发布订阅模式是一种消息传递机制：
- 发布者（Publisher）：发出某个事件，不关心谁接收。
- 订阅者（Subscriber）：监听特定事件，事件触发时执行回调。
- 事件中心（Event Bus）：作为中介管理事件的注册、触发和移除。
这种模式让组件之间松耦合，适合用于非父子关系组件通信、全局状态通知等场景。
实现一个简单的事件中心
我们可以用 JavaScript 实现一个轻量的 EventHub 类，支持 on、emit、off 方法。
立即学习“Java免费学习笔记（深入）”；
睿拓智能网站系统-网上商城
下载
睿拓智能网站系统-网上商城1.0免费版软件大小:5M运行环境：asp+access本版本是永州睿拓信息专为电子商务入门级用户开发的网上电子商城系统，拥有产品发布，新闻发布，在线下单等全部功能，并且正式商用用户可在线提供多个模板更换，可实现一般网店交易所有功能，是中小企业和个人开展个人独立电子商务商城最佳的选择，以下为详细功能介绍：1.最新产品-提供最新产品发布管理修改，和最新产品订单查看2.推荐产
class EventHub {
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);
}
}
}
在组件中使用 EventHub
假设我们有两个独立组件：一个按钮组件发送通知，一个显示组件接收并更新内容。
// 创建全局事件中心实例
const eventHub = new EventHub();
// 组件 A：发布事件
function ButtonComponent() {
function handleClick() {
eventHub.emit('message', '按钮被点击了！');
}
return <button onclick="handleClick()">发送消息</button>;
}
// 组件 B：订阅事件
function DisplayComponent() {
const display = document.getElementById('display');
// 组件挂载时订阅事件
eventHub.on('message', (msg) => {
display.innerText = msg;
});
}
// 初始化两个组件
ButtonComponent();
DisplayComponent();
点击按钮后，DisplayComponent 会接收到消息并更新页面内容，两个组件没有任何直接引用，完全通过事件通信。
注意事项与优化建议
虽然发布订阅模式灵活，但也需注意以下几点：
- 避免频繁创建事件名，建议统一定义常量，防止拼写错误。
- 及时取消订阅，防止内存泄漏，尤其是在组件销毁时调用 off。
- 可扩展支持 once 方法，实现只监听一次的事件。
- 大型项目中可用第三方库如 mitt 或 tiny-emitter，更稳定且功能完整。
基本上就这些。发布订阅模式简单却强大，掌握它能让你更好地处理复杂的组件通信问题。
