中介者模式通过引入中介者对象封装组件交互，实现解耦。组件间通信由中介者统一管理，如搜索框触发事件、结果列表监听渲染，避免直接依赖。优势为降低耦合、提升可维护性与扩展性，适用于表单联动、状态同步等场景。但需防中介者臃肿，避免过度抽象，适合复杂交互而非简单逻辑。
在前端开发中，多个组件之间频繁交互容易导致代码耦合度高，维护困难。JavaScript 中的中介者模式（Mediator Pattern）提供了一种优雅的解耦方案，让组件不再直接通信，而是通过一个“中介者”统一管理消息流转，从而降低模块间的依赖。
什么是中介者模式？
中介者模式通过引入一个中间对象来封装一组对象之间的交互。组件不需要相互引用，而是将消息发送给中介者，由中介者决定如何处理或转发这些消息。这种集中式通信机制让系统更灵活、更易扩展。
典型应用场景包括：表单验证与提交联动、多组件状态同步（如购物车与库存显示）、页面事件协调等。
手动实现一个简单的中介者
可以基于发布-订阅机制构建一个轻量级中介者对象，管理事件的订阅与触发。
立即学习“Java免费学习笔记（深入）”；
const Mediator = {
events: {},
// 订阅事件
on(event, callback) {
if (!this.events[event]) {
this.events[event] = [];
}
this.events[event].push(callback);
},
// 触发事件
trigger(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);
}
}
};
有了这个中介者，不同组件就可以通过它进行通信。
组件通过中介者通信示例
假设有两个UI组件：搜索框和结果列表。传统方式下，搜索框需要直接调用结果列表的更新方法；使用中介者后，两者完全解耦。
// 搜索框组件
const SearchBox = {
submit(query) {
// 不直接操作 ResultList，而是发布事件
Mediator.trigger('search', query);
}
};
// 结果列表组件
const ResultList = {
init() {
Mediator.on('search', (query) => {
this.render(query);
});
},
render(query) {
console.log(`正在搜索并渲染: ${query}`);
}
};
// 初始化监听
ResultList.init();
// 用户操作
SearchBox.submit("JavaScript 设计模式");
// 输出：正在搜索并渲染: JavaScript 设计模式
这样，SearchBox 和 ResultList 没有任何直接依赖，更换或新增组件不影响原有逻辑。
中介者带来的优势与注意事项
使用中介者模式的主要好处：
- 降低组件间耦合，提升可维护性
- 便于集中管理复杂交互逻辑
- 支持动态注册和移除组件
- 利于测试，组件可独立运行
但也要注意：
- 中介者本身可能变得臃肿，需合理拆分职责
- 过度使用可能导致通信流程不透明，调试困难
- 不适合简单场景，增加不必要的抽象层
基本上就这些。中介者模式不是银弹，但在需要协调多个组件行为时，它是一种清晰有效的解耦手段。结合现代框架（如 Vue 的 EventBus 或 React 的 context + reducer），思想依然适用。关键是把握好“何时该解耦”，而不是一味追求设计模式本身。
