当前位置：首页 > news >正文

网站关键字统计淘宝指数

news 2025/8/11 21:10:16

网站关键字统计,淘宝指数,寺院网站建设,详情页模板下载Vue3TypeScript实现中介者模式：电脑维修调度中心中介者模式（Mediator Pattern）听起来是不是有点像“程序员在电脑维修店里设了个总调度台”？它是一种行为型设计模式，通过一个中介者来协调多个对象间的交互&#xff0…

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>