Vue3+TypeScript实现迭代器模式
Vue3+TypeScript实现迭代器模式：电脑零件清单的灵活遍历
迭代器模式（Iterator Pattern）听起来是不是有点像“程序员在电脑组装店里拿了个零件清单，挨个检查零件”？它是一种行为型设计模式，提供了一种顺序访问集合元素的方法，而不用暴露底层数据结构。今天我们用Vue3和TypeScript，结合一个“电脑零件清单”的幽默例子，带你搞懂迭代器模式如何优雅地遍历数据，代码简洁又好玩，保证通俗易懂，笑中带学！
一、迭代器模式是什么？
想象你经营一家电脑组装店，仓库里有一堆零件（CPU、内存、显卡），零件清单可能是数组、链表或别的结构。客户想看看清单，但你不想让他们直接翻仓库的账本。迭代器模式就像你的“零件管理员”：提供一个标准接口，让客户逐个查看零件，而不用管清单是怎么存的，既安全又方便！
核心角色：
- 迭代器接口（Iterator）：定义遍历的方法，如
hasNext和next。 - 具体迭代器（Concrete Iterator）：实现遍历逻辑，跟踪当前位置。
- 聚合接口（Aggregate）：提供创建迭代器的方法。
- 具体聚合类（Concrete Aggregate）：存储数据并返回对应的迭代器。
我们用Vue3+TypeScript实现一个前端版的“电脑零件清单遍历系统”，让你边查零件边学迭代器模式！
二、代码实现
1. 迭代器接口与聚合接口
// src/iterators/ComponentIterator.ts
export interface ComponentIterator {hasNext(): boolean;next(): Component;
}export interface ComponentContainer {getIterator(): ComponentIterator;
}// 零件类
export class Component {constructor(public name: string) {}toString(): string {return `零件：${this.name}`;}
}
幽默讲解：ComponentIterator是“零件管理员的工牌”，规定必须能检查还有没有零件（hasNext）和拿出下一个零件（next）。ComponentContainer是“零件仓库的门牌”，保证能派个管理员出来干活！