JavaScript中介者模式_组件通信解耦方案_技术教程

中介者模式通过引入中介者对象封装组件交互，实现解耦。组件间通信由中介者统一管理，如搜索框触发事件、结果列表监听渲染，避免直接依赖。优势为降低耦合、提升可维护性与扩展性，适用于表单联动、状态同步等场景。但需防中介者臃肿，避免过度抽象，适合复杂交互而非简单逻辑。

在前端开发中，多个组件之间频繁交互容易导致代码耦合度高，维护困难。JavaScript 中的中介者模式（Mediator Pattern）提供了一种优雅的解耦方案，让组件不再直接通信，而是通过一个“中介者”统一管理消息流转，从而降低模块间的依赖。

什么是中介者模式？

中介者模式通过引入一个中间对象来封装一组对象之间的交互。组件不需要相互引用，而是将消息发送给中介者，由中介者决定如何处理或转发这些消息。这种集中式通信机制让系统更灵活、更易扩展。

典型应用场景包括：表单验证与提交联动、多组件状态同步（如购物车与库存显示）、页面事件协调等。

手动实现一个简单的中介者

可以基于发布-订阅机制构建一个轻量级中介者对象，管理事件的订阅与触发。

const Mediator = {
  events: {},

  // 订阅事件
  on(event, callback) {
    if (!this.events[event]) {
      this.events[event] = [];
    }
    this.events[event].push(callback);
  },

  // 触发事件
  trigger(event, data) {
    if (this.events[event]) {
      this.events[event].forEach(callback => callback(data));
    }
  },

  // 移除订阅
  off(event, callback) {
    if (this.events[event]) {
      this.events[event] = this.events[event].filter(cb => cb !== callback);
    }
  }
};

有了这个中介者，不同组件就可以通过它进行通信。

组件通过中介者通信示例

假设有两个UI组件：搜索框和结果列表。传统方式下，搜索框需要直接调用结果列表的更新方法；使用中介者后，两者完全解耦。

// 搜索框组件
const SearchBox = {
  submit(query) {
    // 不直接操作 ResultList，而是发布事件
    Mediator.trigger('search', query);
  }
};

// 结果列表组件
const ResultList = {
  init() {
    Mediator.on('search', (query) => {
      this.render(query);
    });
  },
  render(query) {
    console.log(`正在搜索并渲染: ${query}`);
  }
};

// 初始化监听
ResultList.init();

// 用户操作
SearchBox.submit("JavaScript 设计模式"); 
// 输出：正在搜索并渲染: JavaScript 设计模式

这样，SearchBox 和 ResultList 没有任何直接依赖，更换或新增组件不影响原有逻辑。