JavaScript设计模式(十七)——中介者模式 (Mediator)：解耦复杂交互的艺术与实践

引言：中介者模式的核心价值

中介者模式是一种行为设计模式，通过引入中介对象来集中管理对象间的通信，减少对象间的直接依赖。在复杂的JavaScript应用中，随着组件数量增长，对象间的交互关系可能变得难以管理，中介者模式提供了一种优雅的解决方案。本文将深入探讨中介者模式的核心概念，对比观察者、命令与策略模式，分析其适用场景，帮助开发者识别何时选择中介者模式而非其他解耦方案。与观察者模式的一对多通信不同，中介者模式实现了多对一的集中控制，更适合处理复杂的网状交互。当系统中的对象形成复杂的网状结构时，中介者模式能显著降低耦合度，提高代码的可维护性和可扩展性。掌握这一模式，将显著提升你构建复杂应用的能力。

中介者模式的原理与结构

中介者模式通过引入中介者对象，让系统中各对象不再直接通信，而是通过中介者进行间接通信，从而降低耦合度。在JavaScript中，Mediator作为协调者，负责管理和控制Colleague对象间的交互。

工作流程转变：原本Colleague间直接引用调用方法，现在改为向Mediator发送请求，由Mediator转发给目标对象。这种转变使系统结构更清晰，但也可能使Mediator成为性能瓶颈。

优势：显著降低组件间耦合度，提高系统可维护性和扩展性；集中控制交互逻辑，便于统一管理。

局限性：当系统复杂度增加时，Mediator对象可能变得庞大，成为新的单点故障源。

javascript 复制代码

// 中介者接口
class Mediator {
    send(message, colleague) { /* 实现细节 */ }
}

// 同事类
class Colleague {
    constructor(mediator) {
        this.mediator = mediator; // 持有中介者引用
    }
    
    send(message) {
        this.mediator.send(message, this); // 通过中介者发送消息
    }
    
    receive(message) { /* 接收消息处理 */ }
}

UML类图显示Colleague与Mediator间的关联关系，以及多个Colleague通过Mediator实现的星形拓扑结构。

JavaScript中的中介者模式实现

中介者模式通过引入一个中介对象，让各个对象不再直接引用，从而实现松耦合。基础实现可通过简单对象和函数构建：

javascript 复制代码

// 基础中介者实现
const mediator = {
  colleagues: {},
  
  register(name, colleague) {
    this.colleagues[name] = colleague;
    colleague.mediator = this;
  },
  
  send(message, from, to) {
    if (to) {
      this.colleagues[to].receive(message, from);
    } else {
      Object.keys(this.colleagues).forEach(key => {
        if (key !== from) {
          this.colleagues[key].receive(message, from);
        }
      });
    }
  }
};

现代实现可利用ES6+特性增强功能：

javascript 复制代码

// 现代中介者实现
class Mediator {
  constructor() {
    this.channels = new Map();
  }
  
  subscribe(event, callback) {
    if (!this.channels.has(event)) {
      this.channels.set(event, []);
    }
    this.channels.get(event).push(callback);
  }
  
  publish(event, data) {
    if (this.channels.has(event)) {
      this.channels.get(event).forEach(callback => callback(data));
    }
  }
}

中介者接口设计应统一消息格式，确保参与者间通信标准化。典型的通信机制采用发布/订阅模式，允许参与者通过中介者间接通信，无需了解彼此的存在。这种设计大幅降低了组件间的耦合度，提高了系统的可维护性和扩展性。

实战案例：聊天室应用

在多用户实时通信系统中，中介者模式可简化用户间的复杂交互。用户类(User)封装发送消息功能，聊天室(ChatRoom)作为中介者负责消息路由。

javascript 复制代码

// 用户类
class User {
  constructor(name, chatroom) {
    this.name = name;
    this.chatroom = chatroom;
  }
  
  // 发送消息到聊天室
  sendMessage(message, to) {
    this.chatroom.sendMessage(message, this.name, to);
  }
  
  // 接收消息
  receiveMessage(from, message) {
    console.log(`${from} to ${this.name}: ${message}`);
  }
}

// 聊天室中介者类
class ChatRoom {
  constructor() {
    this.users = new Map();
  }
  
  // 用户加入
  join(user) {
    this.users.set(user.name, user);
  }
  
  // 消息路由逻辑
  sendMessage(message, from, to) {
    if (to) {
      // 私聊
      const recipient = this.users.get(to);
      if (recipient) recipient.receiveMessage(from, message);
    } else {
      // 群聊
      this.users.forEach(user => {
        if (user.name !== from) user.receiveMessage(from, message);
      });
    }
  }
}

通过此实现，用户只需与聊天室交互，无需了解其他用户的存在，实现了组件间的解耦。

中介者模式的进阶应用

中介者模式在实际应用中常与其他模式结合，形成更强大的解决方案。观察者与中介者结合时，组件通过中介者订阅特定事件，而非直接依赖，如：

javascript 复制代码

class MediatorObserver {
  constructor() {
    this.channels = {}; // 频道存储
  }
  
  subscribe(channel, callback) { // 订阅频道
    if (!this.channels[channel]) this.channels[channel] = [];
    this.channels[channel].push(callback);
  }
  
  publish(channel, data) { // 发布事件
    if (this.channels[channel]) {
      this.channels[channel].forEach(cb => cb(data));
    }
  }
}

Redux中的Store是中介者模式的典型应用，Store作为单一数据源，管理所有组件状态，确保状态变更可预测。

与事件总线相比，中介者模式更强调集中式协调，而事件总线偏向分布式通信。中介者提供更严格的控制，适合复杂交互系统。

在React/Vue中，中介者模式可用于优化组件通信。例如，通过Context API(Vue的Provide/Inject)创建全局中介者，避免props层层传递，提升大型应用的可维护性。

最佳实践与注意事项

中介者模式适用于组件间交互复杂且紧密的场景，如多个UI组件需要频繁通信或表单验证逻辑分散。然而，过度使用会导致系统过度集中化，降低模块独立性。性能方面，中介者对象会引入额外内存开销和消息路由计算，特别是在高频交互场景下需注意优化。

可维护性设计应关注：定义清晰的事件接口，如Mediator.prototype.send = function(sender, event, data)；编写详尽的文档说明各组件间交互协议；实施单元测试验证中介者逻辑正确性。

javascript 复制代码

// 高效的中介者实现示例
class ChatMediator {
  constructor() {
    this.users = new Set(); // 存储所有用户
  }
  
  // 添加用户到聊天室
  addUser(user) {
    this.users.add(user);
    user.setMediator(this); // 设置用户的中介者引用
  }
  
  // 核心转发逻辑
  send(sender, message) {
    this.users.forEach(user => {
      if (user !== sender) { // 不发送回消息发送者
        user.receive(message);
      }
    });
  }
}

这个实现展示了中介者模式的核心：通过集中化消息转发减少组件间直接依赖，同时保持代码简洁高效。

总结与展望

在现代前端开发中，面对日益复杂的应用状态管理和组件通信，中介者模式成为解决组件间紧耦合问题的利器。未来，随着微前端架构和Web Components技术的普及，中介者模式将与这些技术深度融合，为构建松耦合、高内聚的大型前端应用提供有力支持。