JavaScript中介者模式_组件通信方案
中介者模式通过引入中间对象管理组件交互，降低耦合度。例如，登录组件发布事件，头部和日志组件订阅该事件，实现解耦通信。适用于表单联动、状态同步等场景。
在前端开发中，多个组件之间频繁通信容易导致代码耦合度高、维护困难。JavaScript 中的中介者模式（Mediator Pattern）提供了一种解耦组件间直接依赖的解决方案，让组件通过一个“中间人”进行通信，而不是彼此直接调用。
什么是中介者模式
中介者模式定义了一个封装一组对象交互的中介对象，代替对象之间显式的直接引用。通过集中管理交互逻辑，对象只需与中介者通信，从而降低系统各部分之间的耦合度。
这种模式特别适合处理多个组件需要协作的场景，比如表单控件联动、页面状态同步、事件广播等。
组件通信中的问题
在没有使用中介者的情况下，组件通信往往表现为：
- 组件A直接调用组件B的方法
- 通过回调层层传递数据
- 过度依赖全局变量或事件总线
这些方式会导致代码难以测试和重构。一旦某个组件被修改，其他依赖它的组件也可能需要调整。
实现一个简单的中介者
可以创建一个轻量级的事件中心作为中介者：
class Mediator {
constructor() {
this.channels = {};
}
// 订阅事件
subscribe(channel, fn) {
if (!this.channels[channel]) {
this.channels[channel] = [];
}
this.channels[channel].push(fn);
}
// 发布事件
publish(channel, data) {
if (this.channels[channel]) {
this.channels[channel].forEach(fn => fn(data));
}
}
// 取消订阅
unsubscribe(channel, fn) {
if (this.channels[channel]) {
this.channels[channel] = this.channels[channel].filter(handler => handler !== fn);
}
}
}
使用示例：
const mediator = new Mediator();
// 组件A：发送用户登录消息
function loginComponent() {
const user = { id: 1, name: 'Alice' };
mediator.publish('userLoggedIn', user);
}
// 组件B：接收并更新UI
function headerComponent() {
mediator.subscribe('userLoggedIn', (user) => {
document.getElementById('header').textContent = `欢迎 ${user
.name}`;
});
}
// 组件C：记录日志
function loggerComponent() {
mediator.subscribe('userLoggedIn', (user) => {
console.log('用户已登录:', user.name);
});
}
// 触发登录
loginComponent(); // 其他组件自动响应
.name}`;
});
}
// 组件C：记录日志
function loggerComponent() {
mediator.subscribe('userLoggedIn', (user) => {
console.log('用户已登录:', user.name);
});
}
// 触发登录
loginComponent(); // 其他组件自动响应
实际应用场景
中介者模式适用于以下情况：
- 表单联动：一个下拉框的选择影响其他输入项的显示或取值
- 页面状态管理：多个模块响应主题切换、语言变更等全局事件
- 模块解耦：不同功能模块之间需要通信但不应互相依赖
例如，在后台管理系统中，左侧菜单展开状态变化时，顶部导航和主内容区可能都需要调整布局。通过中介者通知这些变化，避免组件间硬编码引用。
基本上就这些。中介者模式不是万能方案，但对于减少组件间的直接依赖非常有效。合理使用能让代码更清晰、更容易扩展。不复杂但容易忽略。
