中介者模式通过引入中间人协调对象交互，降低组件间耦合度，提升可维护性与复用性，适用于复杂表单等多组件联动场景。
中介者模式在JavaScript里，简单来说，就是引入一个“中间人”角色，专门负责协调一组对象之间的交互。它把原本可能错综复杂的直接点对点通信，集中到一个地方处理，让各个对象之间不再直接打交道，从而大大降低了它们之间的耦合度。它的核心作用，就是让系统里的组件能更独立地发展，同时又能高效地协作。
要实现中介者模式，我们通常会定义一个中介者对象，以及若干个“同事”对象。这些同事对象不再直接引用或调用其他同事对象的方法，而是通过中介者来发送消息或请求服务。中介者接收到请求后，根据内部逻辑决定如何转发或处理，再通知相关的同事。
举个例子，想象一个复杂的表单，里面有多个输入框、下拉菜单和按钮，它们之间有很多联动逻辑：一个输入框的值变化可能影响另一个下拉菜单的可用选项，一个按钮的点击可能需要根据多个输入框的状态来决定是否启用。如果没有中介者，这些组件会直接互相监听和操作，代码很快就变成一团乱麻。
用中介者模式来组织，大概是这样：
// 中介者
class FormMediator {
constructor() {
this.components = {}; // 存储所有注册的组件
}
register(name, component) {
this.components[name] = component;
component.setMediator(this); // 让组件知道自己的中介者是谁
}
notify(sender, event) {
// 根据发送者和事件类型，决定通知哪些组件
switch (event) {
case 'inputChanged':
if (sender.name === 'usernameInput') {
// 假设用户名输入后，需要验证并可能影响提交按钮状态
const username = this.components['usernameInput'].getValue();
if (username.length > 5) {
this.components['submitButton'].enable();
} else {
this.components['submitButton'].disable();
}
}
break;
case 'dropdownSelected':
if (sender.name === 'countryDropdown') {
const country = this.components['countryDropdown'].getValue();
// 根据国家选择，更新城市下拉列表
this.components['cityDropdown'].updateOptions(country);
}
break;
// 更多事件处理...
}
}
}
// 同事组件基类 (为了演示，简化处理)
class Component {
constructor(name) {
this.name = name;
this.mediator = null;
}
setMediator(mediator) {
this.mediator = mediator;
}
// 抽象方法，子类实现具体业务逻辑
// 当自身状态变化时，通知中介者
changed(event) {
if (this.mediator) {
this.mediator.notify(this, event);
}
}
}
// 具体同事组件
class InputField extends Component {
constructor(name, value = '') {
super(name);
this._value = value;
}
getValue() {
return this._value;
}
setValue(newValue) {
this._value = newValue;
console.log(`${this.name} 值变为: ${newValue}`);
this.changed('inputChanged'); // 状态变化时通知中介者
}
}
class Dropdown extends Component {
constructor(name, options = []) {
super(name);
this._selected = options[0] || null;
this.options = options;
}
getValue() {
return this._selected;
}
select(value) {
if (this.options.includes(value)) {
this._selected = value;
console.log(`${this.name} 选中: ${value}`);
this.changed('dropdownSelected');
}
}
updateOptions(basedOn) {
// 模拟根据其他组件状态更新选项
console.log(`${this.name} 根据 ${basedOn} 更新了选项。`);
// 实际中这里会有复杂的逻辑来获取新的选项
this.options = basedOn === 'USA' ? ['New York', 'Los Angeles'] : ['London', 'Paris'];
this._selected = this.options[0]; // 默认选中第一个
}
}
class Button extends Component {
constructor(name, text) {
super(name);
this.text = text;
this._enabled = false;
}
enable() {
this._enabled = true;
console.log(`${this.name} 按钮已启用。`);
}
disable() {
this._enabled = false;
console.log(`${this.name} 按钮已禁用。`);
}
click() {
if (this._enabled) {
console.log(`${this.name} 按钮被点击。`);
this.changed('buttonClicked'); // 通知中介者，可能触发提交
} else {
console.log(`${this.name} 按钮被点击，但当前禁用。`);
}
}
}
// 使用示例
const mediator = new FormMediator();
const usernameInput = new InputField('usernameInput');
const countryDropdown = new Dropdown('countryDropdown', ['USA', 'UK', 'France']);
const cityDropdown = new Dropdown('cityDropdown'); // 初始为空
const submitButton = new Button('submitButton', '提交');
mediator.register('usernameInput', usernameInput);
mediator.register('countryDropdown', countryDropdown);
mediator.register('cityDropdown', cityDropdown);
mediator.register('submitButton', submitButton);
// 模拟用户操作
usernameInput.setValue('john_doe_123'); // 触发中介者，可能启用提交按钮
countryDropdown.select('USA'); // 触发中介者，更新城市下拉列表
submitButton.click(); // 尝试点击
usernameInput.setValue('jo'); // 再次改变值，可能禁用提交按钮
submitButton.click(); // 再次尝试点击这段代码展示了核心思想：所有组件的交互都通过
FormMediator来协调。组件自身只关心自己的状态变化并通知中介者，而无需知道其他组件的存在。
中介者模式解决了哪些痛点？
在我看来，中介者模式最显著的价值在于它能有效缓解“网状”依赖的困境。在一个大型或复杂的系统中，如果每个组件都需要直接知道并操作其他多个组件，那代码的耦合度会高到令人发指。这种情况下，修改一个组件可能会牵一发而动全身，维护成本呈指数级增长。
它解决的痛点主要体现在几个方面：
- 降低耦合度：这是最直接的好处。组件之间不再直接通信，而是通过中介者间接沟通。这使得每个组件可以独立地进行开发、测试和修改，而不会对其他组件产生意料之外的影响。就像一个交通指挥员，车辆只和指挥员打交道，不用关心其他车辆的具体位置和意图。
-
提高可维护性：当所有交互逻辑都集中在中介者中时，调试和理解系统行为变得容易得多。你不需要在多个组件之间跳来跳去追踪调用链，只需要查看中介者的
notify
方法就能大致了解系统的协作流程。这对于团队协作和新成员理解项目尤其重要。 - 简化对象交互：原本复杂的N对N交互，现在变成了N对1（所有同事都只与中介者交互）和1对N（中介者与所有同事交互）的模式。这种结构上的简化，让系统的整体架构更加清晰。
- 促进组件复用：因为组件不再直接依赖于特定其他组件，它们变得更加通用。你可以在不同的上下文或项目中复用这些组件，只要为它们提供一个新的中介者实例即可。
我个人在处理一些前端复杂表单或仪表盘时，
