js中介者模式是什么意思？-js教程-PHP中文网

js中介者模式是什么意思？

冰川箭仙

发布： 2025-11-16 22:37:02

原创

501人浏览过

中介者模式通过引入中间对象管理多个对象间的交互，降低耦合度。在JavaScript中，以聊天室为例，用户（同事类）不直接通信，而是通过聊天室（中介者）发送和接收消息，所有交互逻辑由中介者集中处理。这样当系统扩展或修改行为时，只需调整中介者，不影响同事类，适用于组件间关系复杂的场景，提升代码可维护性与可测试性。

js中介者模式是什么意思？

中介者模式（Mediator Pattern）在 JavaScript 中是一种行为设计模式，它的核心思想是通过一个中间对象来封装多个对象之间的交互。这样一来，原本互相依赖的对象不再直接通信，而是都依赖这个“中介者”，从而降低系统中对象间的耦合度。

为什么要用中介者模式？

在前端开发中，经常会出现多个组件或模块之间需要频繁通信的情况。比如表单控件之间联动、页面按钮与状态显示区域的交互等。如果让这些对象直接调用彼此的方法，就会导致代码混乱、难以维护。

中介者模式就是为了解决这个问题——把交互逻辑集中到一个中介者对象中统一管理。

中介者模式的基本结构

它通常包含以下几个部分：

中介者（Mediator）：定义同事对象之间交互的接口，协调它们的行为。
同事类（Colleagues）：每个同事对象都知道中介者，并通过中介者与其他同事通信，而不是直接操作对方。

一个简单的 JavaScript 示例

假设有一个聊天室场景，多个用户发送消息，但不直接发送给对方，而是通过聊天室（作为中介者）来转发：

阿里妈妈·创意中心

阿里妈妈营销创意中心

查看详情

// 中介者：聊天室
class ChatRoom {
  constructor() {
    this.users = {};
  }

  registerUser(name) {
    this.users[name] = true;
    this.showMessage('System', `${name} 加入了聊天室`);
  }

  sendMessage(from, to, message) {
    if (to) {
      // 私聊
      this.showMessage(from, `对 ${to} 说: ${message}`);
    } else {
      // 群聊
      this.showMessage(from, message);
    }
  }

  showMessage(from, message) {
    const time = new Date().toLocaleTimeString();
    console.log(`[${time}] ${from}: ${message}`);
  }
}

// 同事类：用户
class User {
  constructor(name, chatRoom) {
    this.name = name;
    this.chatRoom = chatRoom;
    chatRoom.registerUser(name);
  }

  send(message, to) {
    this.chatRoom.sendMessage(this.name, to, message);
  }
}

// 使用示例
const room = new ChatRoom();
const alice = new User('Alice', room);
const bob = new User('Bob', room);

alice.send('大家好！');           // 群发
bob.send('Alice，你好呀', 'Alice'); // 私聊

登录后复制

在这个例子中，User 不直接和其他用户通信，所有消息都交给 ChatRoom 处理。这样即使以后增加更多用户或规则（比如权限、过滤词），只需要修改中介者，不影响用户类本身。