前端设计模式之组合模式

问题画像

1. tree 结构；
2. 主要分为 组合节点 与 叶子节点；
3. 组合节点 存在一个 children 字段，用于保存其他 组合节点 与 叶子节点；
4. 用户可以使用一套 api 去操作这两个节点。

比如： 文件系统和公司的组织架构图；对于文件系统来说，目录和文件，这两者整体可以使用一套 api，方便用户使用和理解，而对于其中的差异，可以单独处理。

定义

组合模式 允许以相同的方式处理单个对象和复合对象，意图是将对象组合成树形结构以表示 “部分 - 整体” 的层次结构；

组合模式 的核心是简单对象和复合对象必须实现相同的接口。这就是组合模式能够将组合对象和简单对象进行一致处理的原因。

总体结构：

1. 一个抽象类，也是暴露给外界的 api;
2. 单个对象，也就是叶子（Leaf）节点，需要继承抽象类；
3. 复合对象，也就是容器组件（Composite），需要继承抽象类，区别于 叶子节点 的是，存在一个 children 属性，用于保存叶子节点以及其他容器组件；

实现

当前场景是一个简单的文件系统，属于树形结构，实现了添加文件到目录，已经获取当前目录下有多少文件的功能。

abstract class FileComponent {
   
  isFile: boolean;
  fileName: string;
  constructor(fileName: string, isFile: boolean) {
   
    this.isFile = isFile;
    this.fileName = fileName;
  }
  abstract add(file: FileLeaf | Folder):