Vue3+TypeScript实现中介者模式Vue3+TypeScript实现中介者模式：电脑维修调度中心中介者模式（

Vue3+TypeScript实现中介者模式：电脑维修调度中心

中介者模式（Mediator Pattern）听起来是不是有点像“程序员在电脑维修店里设了个总调度台”？它是一种行为型设计模式，通过一个中介者来协调多个对象间的交互，避免它们直接互相喊来喊去。今天我们用Vue3和TypeScript，结合一个“电脑维修调度”的幽默例子，带你搞懂中介者模式如何简化复杂交互，代码简洁又好玩，保证通俗易懂，笑中带学！

一、中介者模式是什么？

想象你经营一家电脑维修店，有客户、技师、仓库管理员，大家要协调：客户报修，技师接单，仓库发零件。如果他们直接互相联系，店里早就乱成一锅粥！中介者模式就像你的“维修调度中心”：所有交互都通过调度中心，客户、技师、仓库只跟调度中心打交道，网状关系变星形，清晰又高效！

核心角色：

抽象中介者（Mediator Interface）：定义交互接口。
具体中介者（Concrete Mediator）：实现协调逻辑，管理所有同事。
同事类（Colleague Classes）：与中介者通信，处理自身逻辑。

我们用Vue3+TypeScript实现一个前端版的“电脑维修调度系统”，让你边调度维修边学中介者模式！

二、代码实现

1. 抽象中介者接口

// src/mediators/RepairMediator.ts
export interface RepairMediator {
  sendRequest(sender: Colleague, request: string): void;
  registerColleague(colleague: Colleague): void;
}

幽默讲解：RepairMediator是“调度中心的对讲机”，规定谁能发请求（sendRequest），谁能加入团队（registerColleague）。就像店里的大喇叭，统一指挥！

2. 具体中介者

// src/mediators/RepairDispatchCenter.ts
import { RepairMediator } from './RepairMediator';
import { Colleague } from './Colleague';

export class RepairDispatchCenter implements RepairMediator {
  private colleagues: Colleague[] = [];

  registerColleague(colleague: Colleague): void {
    this.colleagues.push(colleague);
    colleague.setMediator(this);
  }

  sendRequest(sender: Colleague, request: string): void {
    this.colleagues.forEach(colleague => {
      if (colleague !== sender) {
        colleague.receiveRequest(sender.getName(), request);
      }
    });
  }
}

幽默讲解：RepairDispatchCenter是“维修调度中心”，登记每个同事（客户、技师等），收到请求就广播给其他人，省得大家互相喊。客户说“修电脑”，调度中心通知技师和仓库，井然有序！

3. 同事类

// src/mediators/Colleague.ts
import { RepairMediator } from './RepairMediator';

export abstract class Colleague {
  protected mediator: RepairMediator | null = null;
  protected name: string;

  constructor(name: string) {
    this.name = name;
  }

  setMediator(mediator: RepairMediator): void {
    this.mediator = mediator;
  }

  getName(): string {
    return this.name;
  }

  abstract receiveRequest(from: string, request: string): string;
}

export class Customer extends Colleague {
  sendRequest(request: string): string {
    if (this.mediator) {
      this.mediator.sendRequest(this, request);
      return `📢 ${this.name}发送请求：${request}`;
    }
    return '😅 未连接调度中心！';
  }

  receiveRequest(from: string, request: string): string {
    return `📩 ${this.name}收到${from}的回复：${request}`;
  }
}

export class Technician extends Colleague {
  sendRequest(request: string): string {
    if (this.mediator) {
      this.mediator.sendRequest(this, request);
      return `📢 ${this.name}发送请求：${request}`;
    }
    return '😅 未连接调度中心！';
  }

  receiveRequest(from: string, request: string): string {
    return `🛠️ ${this.name}收到${from}的请求：${request}，开始维修！`;
  }
}

幽默讲解：Customer是“客户”，报修时喊调度中心，收到回复就开心。Technician是“技师”，接到客户请求就开工，零件不够就喊仓库。每个人只跟调度中心聊，互不干扰！

4. Vue3组件：维修调度界面

// src/components/RepairDispatch.vue
<script setup lang="ts">
import { ref } from 'vue';
import { RepairDispatchCenter } from '../mediators/RepairDispatchCenter';
import { Customer, Technician } from '../mediators/Colleague';

const mediator = new RepairDispatchCenter();
const customer = new Customer('张三');
const technician = new Technician('李技师');
mediator.registerColleague(customer);
mediator.registerColleague(technician);

const request = ref('');
const results = ref<string[]>([]);

const sendRequest = () => {
  if (request.value) {
    results.value.push(customer.sendRequest(request.value));
    results.value.push(technician.receiveRequest(customer.getName(), request.value));
    request.value = '';
  }
};
</script>

<template>
  <div>
    <h2>电脑维修调度中心</h2>
    <div>
      <label>客户请求：</label>
      <input v-model="request" placeholder="输入维修请求" />
    </div>
    <button @click="sendRequest">发送请求</button>
    <pre>{{ results.join('\n') }}</pre>
  </div>
</template>

幽默讲解：这个Vue组件就像店里的“调度屏幕”，客户输入维修请求（比如“电脑蓝屏”），点“发送”，中介者模式通过调度中心广播给技师，技师回应开工。客户（代码）只管喊，调度中心全搞定！

三、应用场景

中介者模式在Vue3开发中就像“电脑维修的调度中心”，非常适合以下场景：

组件通信：多个Vue组件需交互（如表单、弹窗），通过中介者统一协调。
事件总线：集中管理组件事件，避免直接绑定。
复杂UI交互：协调多个UI元素（如按钮、输入框）的状态变化。
模块解耦：大型应用中，模块间通过中介者通信，降低耦合。

幽默例子：你的Vue3项目是个维修店，客户、技师、仓库乱喊？中介者模式像调度中心，一声令下全听指挥！代码像对讲机，沟通顺畅，效率爆棚！

四、适用性

中介者模式适合以下前端场景：

复杂交互：多个对象间形成网状依赖，需简化通信。
集中控制：交互逻辑需统一管理，方便扩展。
解耦对象：对象间无需直接引用，降低维护成本。

注意事项：

中介者逻辑过复杂可能变成“上帝类”，需合理划分职责。
简单交互用事件或状态管理可能更高效。

五、注意事项

中介者设计：
- 中介者职责清晰，避免塞入过多逻辑。
- 提供灵活的注册和通信机制。
TypeScript优势：
- 用接口（interface）定义中介者和同事行为，确保类型安全。
- 利用类型检查，防止错误注册同事。
性能考虑：
- 大量同事通信可能影响性能，优化广播逻辑。
- 避免循环通信，确保交互单向清晰。
Vue3生态：
- 参考VueUse的useEventBus，学习集中式通信。
- 结合Vue的组合式API，优化中介者的响应式管理。

幽默提示：别让中介者模式变成“调度中心的八卦台”，啥都管把代码搞乱（Bug）！用对场景，中介者让你的交互像调度台一样井然有序！

六、总结

中介者模式就像前端开发中的“维修调度中心”，通过集中协调对象交互，简化网状关系，降低耦合。在Vue3+TypeScript项目中，它适合组件通信、事件管理或复杂UI交互。中介者模式让你的代码像智能调度台，通信清晰，协作高效，优雅又省心！