JavaScript中介者模式_组件通信方案-js教程-PHP中文网

JavaScript中介者模式_组件通信方案

幻影之瞳

发布： 2025-11-17 22:37:07

原创

375人浏览过

中介者模式通过引入中间对象管理组件交互，降低耦合度。例如，登录组件发布事件，头部和日志组件订阅该事件，实现解耦通信。适用于表单联动、状态同步等场景。

javascript中介者模式_组件通信方案

在前端开发中，多个组件之间频繁通信容易导致代码耦合度高、维护困难。JavaScript 中的中介者模式（Mediator Pattern）提供了一种解耦组件间直接依赖的解决方案，让组件通过一个“中间人”进行通信，而不是彼此直接调用。

什么是中介者模式

中介者模式定义了一个封装一组对象交互的中介对象，代替对象之间显式的直接引用。通过集中管理交互逻辑，对象只需与中介者通信，从而降低系统各部分之间的耦合度。

这种模式特别适合处理多个组件需要协作的场景，比如表单控件联动、页面状态同步、事件广播等。

组件通信中的问题

在没有使用中介者的情况下，组件通信往往表现为：

立即学习“Java免费学习笔记（深入）”；

组件A直接调用组件B的方法
通过回调层层传递数据
过度依赖全局变量或事件总线

这些方式会导致代码难以测试和重构。一旦某个组件被修改，其他依赖它的组件也可能需要调整。

微信 WeLM

WeLM不是一个直接的对话机器人，而是一个补全用户输入信息的生成模型。

查看详情

实现一个简单的中介者

可以创建一个轻量级的事件中心作为中介者：

class Mediator {
  constructor() {
    this.channels = {};
  }

  // 订阅事件
  subscribe(channel, fn) {
    if (!this.channels[channel]) {
      this.channels[channel] = [];
    }
    this.channels[channel].push(fn);
  }

  // 发布事件
  publish(channel, data) {
    if (this.channels[channel]) {
      this.channels[channel].forEach(fn => fn(data));
    }
  }

  // 取消订阅
  unsubscribe(channel, fn) {
    if (this.channels[channel]) {
      this.channels[channel] = this.channels[channel].filter(handler => handler !== fn);
    }
  }
}

登录后复制

使用示例：

const mediator = new Mediator();

// 组件A：发送用户登录消息
function loginComponent() {
  const user = { id: 1, name: 'Alice' };
  mediator.publish('userLoggedIn', user);
}

// 组件B：接收并更新UI
function headerComponent() {
  mediator.subscribe('userLoggedIn', (user) => {
    document.getElementById('header').textContent = `欢迎 ${user.name}`;
  });
}

// 组件C：记录日志
function loggerComponent() {
  mediator.subscribe('userLoggedIn', (user) => {
    console.log('用户已登录:', user.name);
  });
}

// 触发登录
loginComponent(); // 其他组件自动响应

登录后复制