网站中如何做图片轮播,佛山网站建设定制,wordpress 关键词 描述,设计制作活动内容的原则Vue3TypeScript实现中介者模式#xff1a;电脑维修调度中心
中介者模式#xff08;Mediator Pattern#xff09;听起来是不是有点像“程序员在电脑维修店里设了个总调度台”#xff1f;它是一种行为型设计模式#xff0c;通过一个中介者来协调多个对象间的交互#xff0…Vue3TypeScript实现中介者模式电脑维修调度中心
中介者模式Mediator Pattern听起来是不是有点像“程序员在电脑维修店里设了个总调度台”它是一种行为型设计模式通过一个中介者来协调多个对象间的交互避免它们直接互相喊来喊去。今天我们用Vue3和TypeScript结合一个“电脑维修调度”的幽默例子带你搞懂中介者模式如何简化复杂交互代码简洁又好玩保证通俗易懂笑中带学 一、中介者模式是什么
想象你经营一家电脑维修店有客户、技师、仓库管理员大家要协调客户报修技师接单仓库发零件。如果他们直接互相联系店里早就乱成一锅粥中介者模式就像你的“维修调度中心”所有交互都通过调度中心客户、技师、仓库只跟调度中心打交道网状关系变星形清晰又高效
核心角色
抽象中介者Mediator Interface定义交互接口。具体中介者Concrete Mediator实现协调逻辑管理所有同事。同事类Colleague Classes与中介者通信处理自身逻辑。
我们用Vue3TypeScript实现一个前端版的“电脑维修调度系统”让你边调度维修边学中介者模式 二、代码实现
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 langts
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 refstring[]([]);const sendRequest () {if (request.value) {results.value.push(customer.sendRequest(request.value));results.value.push(technician.receiveRequest(customer.getName(), request.value));request.value ;}
};
/scripttemplatedivh2电脑维修调度中心/h2divlabel客户请求/labelinput v-modelrequest placeholder输入维修请求 //divbutton clicksendRequest发送请求/buttonpre{{ results.join(\n) }}/pre/div
/template幽默讲解这个Vue组件就像店里的“调度屏幕”客户输入维修请求比如“电脑蓝屏”点“发送”中介者模式通过调度中心广播给技师技师回应开工。客户代码只管喊调度中心全搞定 三、应用场景
中介者模式在Vue3开发中就像“电脑维修的调度中心”非常适合以下场景
组件通信多个Vue组件需交互如表单、弹窗通过中介者统一协调。事件总线集中管理组件事件避免直接绑定。复杂UI交互协调多个UI元素如按钮、输入框的状态变化。模块解耦大型应用中模块间通过中介者通信降低耦合。
幽默例子你的Vue3项目是个维修店客户、技师、仓库乱喊中介者模式像调度中心一声令下全听指挥代码像对讲机沟通顺畅效率爆棚 四、适用性
中介者模式适合以下前端场景
复杂交互多个对象间形成网状依赖需简化通信。集中控制交互逻辑需统一管理方便扩展。解耦对象对象间无需直接引用降低维护成本。
注意事项
中介者逻辑过复杂可能变成“上帝类”需合理划分职责。简单交互用事件或状态管理可能更高效。 五、注意事项 中介者设计 中介者职责清晰避免塞入过多逻辑。提供灵活的注册和通信机制。 TypeScript优势 用接口interface定义中介者和同事行为确保类型安全。利用类型检查防止错误注册同事。 性能考虑 大量同事通信可能影响性能优化广播逻辑。避免循环通信确保交互单向清晰。 Vue3生态 参考VueUse的useEventBus学习集中式通信。结合Vue的组合式API优化中介者的响应式管理。
幽默提示别让中介者模式变成“调度中心的八卦台”啥都管把代码搞乱Bug用对场景中介者让你的交互像调度台一样井然有序 六、总结
中介者模式就像前端开发中的“维修调度中心”通过集中协调对象交互简化网状关系降低耦合。在Vue3TypeScript项目中它适合组件通信、事件管理或复杂UI交互。中介者模式让你的代码像智能调度台通信清晰协作高效优雅又省心
