Vue3+TypeScript实现中介者模式的详细过程
作者：菜喵007
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交互。中介者模式让你的代码像智能调度台，通信清晰，协作高效，优雅又省心！
到此这篇关于Vue3+TypeScript实现中介者模式的文章就介绍到这了,更多相关Vue3 TypeScript中介者模式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！