Vue3+TypeScript實(shí)現(xiàn)中介者模式：電腦維修調(diào)度中心

中介者模式（Mediator Pattern）聽(tīng)起來(lái)是不是有點(diǎn)像“程序員在電腦維修店里設(shè)了個(gè)總調(diào)度臺(tái)”？它是一種行為型設(shè)計(jì)模式，通過(guò)一個(gè)中介者來(lái)協(xié)調(diào)多個(gè)對(duì)象間的交互，避免它們直接互相喊來(lái)喊去。今天我們用Vue3和TypeScript，結(jié)合一個(gè)“電腦維修調(diào)度”的幽默例子，帶你搞懂中介者模式如何簡(jiǎn)化復(fù)雜交互，代碼簡(jiǎn)潔又好玩，保證通俗易懂，笑中帶學(xué)！

一、中介者模式是什么？

想象你經(jīng)營(yíng)一家電腦維修店，有客戶、技師、倉(cāng)庫(kù)管理員，大家要協(xié)調(diào)：客戶報(bào)修，技師接單，倉(cāng)庫(kù)發(fā)零件。如果他們直接互相聯(lián)系，店里早就亂成一鍋粥！中介者模式就像你的“維修調(diào)度中心”：所有交互都通過(guò)調(diào)度中心，客戶、技師、倉(cāng)庫(kù)只跟調(diào)度中心打交道，網(wǎng)狀關(guān)系變星形，清晰又高效！

核心角色：

• 抽象中介者（Mediator Interface）：定義交互接口。
• 具體中介者（Concrete Mediator）：實(shí)現(xiàn)協(xié)調(diào)邏輯，管理所有同事。
• 同事類(lèi)（Colleague Classes）：與中介者通信，處理自身邏輯。

我們用Vue3+TypeScript實(shí)現(xiàn)一個(gè)前端版的“電腦維修調(diào)度系統(tǒng)”，讓你邊調(diào)度維修邊學(xué)中介者模式！

二、代碼實(shí)現(xiàn)

1. 抽象中介者接口

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

幽默講解：RepairMediator是“調(diào)度中心的對(duì)講機(jī)”，規(guī)定誰(shuí)能發(fā)請(qǐng)求（sendRequest），誰(shuí)能加入團(tuán)隊(duì)（registerColleague）。就像店里的大喇叭，統(tǒng)一指揮！

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是“維修調(diào)度中心”，登記每個(gè)同事（客戶、技師等），收到請(qǐng)求就廣播給其他人，省得大家互相喊?？蛻粽f(shuō)“修電腦”，調(diào)度中心通知技師和倉(cāng)庫(kù)，井然有序！

3. 同事類(lèi)

// 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}發(fā)送請(qǐng)求：${request}`;
    }
    return '?? 未連接調(diào)度中心！';
  }
  receiveRequest(from: string, request: string): string {
    return `?? ${this.name}收到${from}的回復(fù)：${request}`;
  }
}
export class Technician extends Colleague {
  sendRequest(request: string): string {
    if (this.mediator) {
      this.mediator.sendRequest(this, request);
      return `?? ${this.name}發(fā)送請(qǐng)求：${request}`;
    }
    return '?? 未連接調(diào)度中心！';
  }
  receiveRequest(from: string, request: string): string {
    return `??? ${this.name}收到${from}的請(qǐng)求：${request}，開(kāi)始維修！`;
  }
}

幽默講解：Customer是“客戶”，報(bào)修時(shí)喊調(diào)度中心，收到回復(fù)就開(kāi)心。Technician是“技師”，接到客戶請(qǐng)求就開(kāi)工，零件不夠就喊倉(cāng)庫(kù)。每個(gè)人只跟調(diào)度中心聊，互不干擾！

4. Vue3組件：維修調(diào)度界面

// 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>電腦維修調(diào)度中心</h2>
    <div>
      <label>客戶請(qǐng)求：</label>
      <input v-model="request" placeholder="輸入維修請(qǐng)求" />
    </div>
    <button @click="sendRequest">發(fā)送請(qǐng)求</button>
    <pre>{{ results.join('\n') }}</pre>
  </div>
</template>

幽默講解：這個(gè)Vue組件就像店里的“調(diào)度屏幕”，客戶輸入維修請(qǐng)求（比如“電腦藍(lán)屏”），點(diǎn)“發(fā)送”，中介者模式通過(guò)調(diào)度中心廣播給技師，技師回應(yīng)開(kāi)工?？蛻簦ùa）只管喊，調(diào)度中心全搞定！

三、應(yīng)用場(chǎng)景

中介者模式在Vue3開(kāi)發(fā)中就像“電腦維修的調(diào)度中心”，非常適合以下場(chǎng)景：

• 組件通信：多個(gè)Vue組件需交互（如表單、彈窗），通過(guò)中介者統(tǒng)一協(xié)調(diào)。
• 事件總線：集中管理組件事件，避免直接綁定。
• 復(fù)雜UI交互：協(xié)調(diào)多個(gè)UI元素（如按鈕、輸入框）的狀態(tài)變化。
• 模塊解耦：大型應(yīng)用中，模塊間通過(guò)中介者通信，降低耦合。

幽默例子：你的Vue3項(xiàng)目是個(gè)維修店，客戶、技師、倉(cāng)庫(kù)亂喊？中介者模式像調(diào)度中心，一聲令下全聽(tīng)指揮！代碼像對(duì)講機(jī)，溝通順暢，效率爆棚！

四、適用性

中介者模式適合以下前端場(chǎng)景：

• 復(fù)雜交互：多個(gè)對(duì)象間形成網(wǎng)狀依賴，需簡(jiǎn)化通信。
• 集中控制：交互邏輯需統(tǒng)一管理，方便擴(kuò)展。
• 解耦對(duì)象：對(duì)象間無(wú)需直接引用，降低維護(hù)成本。

注意事項(xiàng)：

• 中介者邏輯過(guò)復(fù)雜可能變成“上帝類(lèi)”，需合理劃分職責(zé)。
• 簡(jiǎn)單交互用事件或狀態(tài)管理可能更高效。

五、注意事項(xiàng)

中介者設(shè)計(jì)：

• 中介者職責(zé)清晰，避免塞入過(guò)多邏輯。
• 提供靈活的注冊(cè)和通信機(jī)制。

TypeScript優(yōu)勢(shì)：

• 用接口（interface）定義中介者和同事行為，確保類(lèi)型安全。
• 利用類(lèi)型檢查，防止錯(cuò)誤注冊(cè)同事。

性能考慮：

• 大量同事通信可能影響性能，優(yōu)化廣播邏輯。
• 避免循環(huán)通信，確保交互單向清晰。

Vue3生態(tài)：

• 參考VueUse的useEventBus，學(xué)習(xí)集中式通信。
• 結(jié)合Vue的組合式API，優(yōu)化中介者的響應(yīng)式管理。

幽默提示：別讓中介者模式變成“調(diào)度中心的八卦臺(tái)”，啥都管把代碼搞亂（Bug）！用對(duì)場(chǎng)景，中介者讓你的交互像調(diào)度臺(tái)一樣井然有序！

六、總結(jié)

中介者模式就像前端開(kāi)發(fā)中的“維修調(diào)度中心”，通過(guò)集中協(xié)調(diào)對(duì)象交互，簡(jiǎn)化網(wǎng)狀關(guān)系，降低耦合。在Vue3+TypeScript項(xiàng)目中，它適合組件通信、事件管理或復(fù)雜UI交互。中介者模式讓你的代碼像智能調(diào)度臺(tái)，通信清晰，協(xié)作高效，優(yōu)雅又省心！

到此這篇關(guān)于Vue3+TypeScript實(shí)現(xiàn)中介者模式的文章就介紹到這了,更多相關(guān)Vue3 TypeScript中介者模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論