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)