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

Vue3+TypeScript实现访问者模式

news 来源：原创 2025/6/13 10:48:06

Vue3+TypeScript实现访问者模式：电脑零件清单的动态分析

访问者模式（Visitor Pattern）听起来是不是有点像“程序员在电脑组装店里派了个审计员，专门检查零件清单”？它是一种行为型设计模式，通过定义访问者接口，在不改动零件类的前提下添加新功能。今天我们用Vue3和TypeScript，结合一个“电脑零件清单分析”的幽默例子，带你搞懂访问者模式如何灵活扩展操作，代码简洁又好玩，保证通俗易懂，笑中带学！

一、访问者模式是什么？

想象你经营一家电脑组装店，仓库里有一堆零件（CPU、内存、显卡），零件组织成清单（有的零件单独列，有的装在套件里）。现在你想统计零件总数或总价值，但不想改零件本身的代码。访问者模式就像你的“零件审计员”：通过定义一套访问接口，逐个检查零件或套件，执行特定操作，而不碰零件本身的逻辑，既灵活又解耦！

核心角色：

元素接口（Element）：定义accept方法，接受访问者。
具体元素类（Concrete Elements）：实现元素接口，如单个零件或零件套件。
访问者接口（Visitor）：定义对每种元素的访问方法。
具体访问者类（Concrete Visitors）：实现具体操作，如统计数量或价值。

我们用Vue3+TypeScript实现一个前端版的“电脑零件清单分析系统”，让你边分析零件边学访问者模式！

二、代码实现

1. 元素接口与具体元素

// src/visitors/ComponentElement.ts
export interface ComponentElement {accept(visitor: ComponentVisitor): void;
}// 具体元素 - 单个零件
export class SingleComponent implements ComponentElement {constructor(public name: string, public value: number) {}accept(visitor: ComponentVisitor): void {visitor.visitSingleComponent(this);}
}// 具体元素 - 零件套件
export class ComponentKit implements ComponentElement {private components: ComponentElement[] = [];addComponent(component: ComponentElement): void {this.components.push(component);}accept(visitor: ComponentVisitor): void {visitor.visitComponentKit(this);this.components.forEach(component => component.accept(visitor));}getComponents(): ComponentElement[] {return this.components;}
}

幽默讲解：ComponentElement是“零件清单的门票”，规定每件东西（零件或套件）必须能让审计员（访问者）来查。SingleComponent是“单个零件”，比如一块CPU，有名字和价值。ComponentKit是“零件套件”，像个盒子，装一堆零件，审计员查它时会顺便查盒子里的东西！

2. 访问者接口与具体访问者

// src/visitors/ComponentVisitor.ts
import { SingleComponent, ComponentKit } from './ComponentElement';export interface ComponentVisitor {visitSingleComponent(component: SingleComponent): void;visitComponentKit(kit: ComponentKit): void;
}// 具体访问者 - 统计零件数量
export class CountVisitor implements ComponentVisitor {private count: number = 0;visitSingleComponent(component: SingleComponent): void {this.count++;}visitComponentKit(kit: ComponentKit): void {// 无需额外逻辑，子组件会自动遍历}getCount(): number {return this.count;}
}// 具体访问者 - 计算总价值
export class ValueVisitor implements ComponentVisitor {private totalValue: number = 0;visitSingleComponent(component: SingleComponent): void {this.totalValue += component.value;}visitComponentKit(kit: ComponentKit): void {// 无需额外逻辑，子组件会自动遍历}getTotalValue(): number {return this.totalValue;}
}

幽默讲解：ComponentVisitor是“审计员的工牌”，规定必须能查单个零件和套件。CountVisitor是“数零件审计员”，每看到一个零件就加1。ValueVisitor是“算价值审计员”，把每个零件的价值加起来。审计员只管干自己的活，零件啥也不用改！

3. Vue3组件：零件分析界面

// src/components/ComponentAnalyzer.vue
<script setup lang="ts">
import { ref } from 'vue';
import { SingleComponent, ComponentKit } from '../visitors/ComponentElement';
import { CountVisitor, ValueVisitor } from '../visitors/ComponentVisitor';// 构建零件清单
const kit = new ComponentKit();
kit.addComponent(new SingleComponent('Intel i7 CPU', 2000));
kit.addComponent(new SingleComponent('16GB RAM', 800));
const subKit = new ComponentKit();
subKit.addComponent(new SingleComponent('RTX 3080 GPU', 5000));
kit.addComponent(subKit);const analysisType = ref('count');
const result = ref('');const analyze = () => {if (analysisType.value === 'count') {const countVisitor = new CountVisitor();kit.accept(countVisitor);result.value = `📊 零件总数：${countVisitor.getCount()}个`;} else {const valueVisitor = new ValueVisitor();kit.accept(valueVisitor);result.value = `💰 总价值：${valueVisitor.getTotalValue()}元`;}
};
</script><template><div><h2>电脑零件清单分析站</h2><div><label>分析类型：</label><select v-model="analysisType"><option value="count">统计零件数量</option><option value="value">计算总价值</option></select></div><button @click="analyze">开始分析</button><p>{{ result }}</p></div>
</template>