JavaScript实现中介者模式及其应用

什么是中介者模式

中介者模式(Mediator Pattern)是一种行为设计模式，它通过引入一个中介对象来封装一系列对象之间的交互关系。这种模式的核心思想是减少对象之间的直接通信，转而通过中介者进行间接通信，从而降低对象之间的耦合度。

在JavaScript中，中介者模式特别适用于以下场景：

1. 对象之间存在大量复杂的网状关系
2. 系统需要在不改变现有类结构的情况下增加新的交互方式
3. 多个组件需要共享数据或状态

中介者模式的实现方式

基本实现

javascript
class Mediator {
constructor() {
this.components = new Set();
}

register(component) {
this.components.add(component);
component.mediator = this;
}

notify(sender, event, data) {
for (const component of this.components) {
if (component !== sender) {
component.receive(event, data);
}
}
}
}

class Component {
constructor(name) {
this.name = name;
this.mediator = null;
}

send(event, data) {
console.log(${this.name} 发送事件: ${event});
this.mediator.notify(this, event, data);
}

receive(event, data) {
console.log(${this.name} 接收事件: ${event}, data);
}
}

// 使用示例
const mediator = new Mediator();
const componentA = new Component('组件A');
const componentB = new Component('组件B');
const componentC = new Component('组件C');

mediator.register(componentA);
mediator.register(componentB);
mediator.register(componentC);

componentA.send('data_loaded', { userId: 123 });

实际应用示例：聊天室

javascript
class ChatRoom {
constructor() {
this.users = {};
}

register(user) {
this.users[user.name] = user;
user.chatroom = this;
}

send(message, from, to) {
if (to) {
// 私聊
to.receive(message, from);
} else {
// 群发
for (const key in this.users) {
if (this.users[key] !== from) {
this.users[key].receive(message, from);
}
}
}
}
}

class User {
constructor(name) {
this.name = name;
this.chatroom = null;
}

send(message, to) {
this.chatroom.send(message, this, to);
}

receive(message, from) {
console.log(${from.name} 对 ${this.name} 说: ${message});
}
}

// 使用示例
const chatroom = new ChatRoom();

const user1 = new User('张三');
const user2 = new User('李四');
const user3 = new User('王五');

chatroom.register(user1);
chatroom.register(user2);
chatroom.register(user3);

user1.send('大家好！'); // 群发
user2.send('你好，张三！', user1); // 私聊

中介者模式的优势

1. 降低耦合度：组件之间不再直接相互引用，而是通过中介者进行通信
2. 简化对象协议：用中介者和组件的交互协议替代组件间复杂的网状协议
3. 集中控制交互：将组件间的交互行为集中到中介者对象中，便于维护和扩展
4. 提高复用性：组件可以独立变化和复用，因为它们不再与其它组件紧密耦合

中介者模式的应用场景

1. 复杂UI组件交互

在前端开发中，当多个UI组件需要共享状态或相互通信时，中介者模式是理想的选择。例如，一个表单可能有多个输入字段，当一个字段变化时需要更新其他字段的状态。

javascript
class FormMediator {
constructor() {
this.fields = [];
}

registerField(field) {
this.fields.push(field);
field.setMediator(this);
}

fieldChanged(changedField) {
this.fields.forEach(field => {
if (field !== changedField) {
field.onOtherFieldChanged(changedField);
}
});
}
}

class FormField {
constructor(name) {
this.name = name;
this.mediator = null;
this.value = '';
}

setMediator(mediator) {
this.mediator = mediator;
}

setValue(value) {
this.value = value;
console.log(${this.name} 值变更为: ${value});
this.mediator.fieldChanged(this);
}

onOtherFieldChanged(field) {
// 根据其他字段变化调整自身状态
console.log(${this.name} 收到通知: ${field.name} 已变更);
}
}

// 使用示例
const mediator = new FormMediator();

const nameField = new FormField('姓名');
const emailField = new FormField('邮箱');
const phoneField = new FormField('电话');

mediator.registerField(nameField);
mediator.registerField(emailField);
mediator.registerField(phoneField);

nameField.setValue('张三');

2. 游戏开发中的角色交互

在游戏开发中，多个游戏角色之间可能需要复杂的交互逻辑。使用中介者模式可以避免角色之间的直接引用。

javascript
class GameMediator {
constructor() {
this.characters = [];
this.score = 0;
}

registerCharacter(character) {
this.characters.push(character);
character.setMediator(this);
}

characterAction(character, action) {
console.log(${character.name} 执行了 ${action});

if (action === 'attack') {
  this.score += 10;
  console.log(`得分增加: 当前得分 ${this.score}`);
}

this.characters.forEach(c => {
  if (c !== character) {
    c.notifyAction(character, action);
  }
});

}
}

class GameCharacter {
constructor(name) {
this.name = name;
this.mediator = null;
}

setMediator(mediator) {
this.mediator = mediator;
}

performAction(action) {
this.mediator.characterAction(this, action);
}

notifyAction(character, action) {
console.log(${this.name} 收到通知: ${character.name} ${action});
}
}

// 使用示例
const game = new GameMediator();

const hero = new GameCharacter('英雄');
const enemy1 = new GameCharacter('敌人1');
const enemy2 = new GameCharacter('敌人2');

game.registerCharacter(hero);
game.registerCharacter(enemy1);
game.registerCharacter(enemy2);

hero.performAction('attack');
enemy1.performAction('defend');

中介者模式的注意事项

1. 避免中介者过度复杂：随着系统规模扩大，中介者可能变得过于庞大和复杂，此时可能需要考虑拆分中介者或采用其他模式
2. 性能考虑：中介者成为通信中心，可能会有性能瓶颈
3. 调试难度：由于交互逻辑集中在中介者中，调试时可能需要跟踪多个间接调用

中介者模式与发布-订阅模式的区别

虽然中介者模式和发布-订阅模式都用于解耦组件间的通信，但它们有几个关键区别：

1. 关注点不同：中介者模式关注对象间的交互关系，而发布-订阅模式关注事件的通知机制
2. 耦合度不同：中介者模式中组件知道中介者的存在，而发布-订阅模式中发布者和订阅者可以完全不知道对方
3. 控制权不同：中介者通常主动协调组件间的交互，而发布-订阅模式是被动的消息传递

总结

中介者模式在JavaScript开发中是一个非常实用的设计模式，特别适合管理复杂的对象间交互。通过引入中介者，我们可以将混乱的对象间通信转变为清晰、有组织的结构，从而提高代码的可维护性和扩展性。

在实际项目中，应根据具体需求权衡是否使用中介者模式。对于简单的交互，直接通信可能更合适；而对于复杂的多对象交互场景，中介者模式则能显著提升代码质量。