Vue3+TypeScript实现访问者模式

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.