JavaScript设计模式：组合模式

模式概念

在树形目录结构中，文件和文件夹是两类不同的元素。文件夹可以包含文件或子文件夹，而文件则不能包含子项。在这种结构中，文件夹可以看作容器（Container），文件可以看作叶子（Leaf）。组合模式（Composite Pattern）是一种对象结构型设计模式，允许将对象组合成树形结构来表示“部分-整体”的层次关系，因此又称为部分-整体模式。

模式结构

组合模式包括以下角色：

Component（抽象类、组件）：定义了容器和叶子对象的操作方式，可以是抽象类或接口。
Leaf（叶节点）：实现 Component 接口，表示不包含子节点的末端对象。
Composite（容器节点）：实现 Component 接口，可以包含其他 Component 对象，既可以是叶子节点，也可以是其他容器节点。
Client（客户端）：通过 Component 接口与组合结构进行交互。

代码实现

以下是组合模式的实现：

// 抽象接口
class Component {
  constructor(name) {
    this.name = name;
    this.children = [];
  }

  add(component) {
    this.children.push(component);
  }

  remove(component) {
    this.children = this.children.filter(child => child !== component);
  }

  operate() {
    this.children.forEach(child => child.operate());
  }
}

// 叶节点
class Leaf extends Component {
  operate() {
    console.log(`Leaf: ${this.name}`);
  }
}

// 容器节点
class Composite extends Component {
  operate() {
    console.log(`Composite: ${this.name}`);
    super.operate();
  }
}

// 使用
const root = new Composite("Root");
const leaf1 = new Leaf("Leaf1");
const leaf2 = new Leaf("Leaf2");
const branch1 = new Composite("Branch1");
const branch2 = new Composite("Branch2");

root.add(branch1);
root.add(branch2);
branch1.add(leaf1);
branch2.add(leaf2);

console.log("root", root); // 包含name和children的属性结构对象
root.operate(); // 输出: Composite: Root, Composite: Branch1, Leaf: Leaf1, Composite: Branch2, Leaf: Leaf2

代码解释：

Component 是抽象类，定义了添加、删除、操作的统一方法。
Leaf 是叶子节点，表示树结构的末端，具体实现 operate 方法。
Composite 是容器节点，可以包含其他 Component 对象，表示树结构中的分支节点。

通过该结构，客户端可以对整个对象树进行递归操作，而无需区分是叶子节点还是容器节点。

模式效果

优点：

统一操作：可以对树形结构进行统一操作，客户端无需关心是叶子还是容器节点。
易于扩展：符合开闭原则，可以轻松扩展叶节点或容器节点类型。
递归操作：树形结构可以实现递归调用，简化了复杂对象的操作逻辑。

缺点：

类型限制：无法限制节点的类型，可能导致不必要的组合。
复杂性增加：树形结构的设计和递归操作对于初学者来说理解难度较大。

模式应用

组合模式适用于以下场景：

树形结构：当系统中的对象可以用树形结构来表示时，如文件系统、组织结构等。
层次结构统一操作：希望通过一种方式忽略部分和整体的区别，使得客户端可以统一对待它们。
动态扩展：需要动态扩展和管理复杂对象时，组合模式能够降低耦合性，提升灵活性。

示例 1：导航菜单

导航菜单是 Web 应用中的常见组件，通常包含子菜单或嵌套菜单。使用组合模式可以表示菜单项与子菜单项之间的层次关系。

const items = [
  {
    key: 'sub1',
    label: 'Navigation One',
    children: [
      {
        key: 'g1',
        label: 'Item 1',
        children: [
          { key: '1', label: 'Option 1' },
          { key: '2', label: 'Option 2' },
        ],
      },
      {
        key: 'g2',
        label: 'Item 2',
        children: [
          { key: '3', label: 'Option 3' },
          { key: '4', label: 'Option 4' },
        ],
      },
    ],
  },
  {
    key: 'sub2',
    label: 'Group',
    children: [
      { key: '13', label: 'Option 13' },
      { key: '14', label: 'Option 14' },
    ],
  },
];

示例 2：文件管理系统

文件管理系统中的文件夹和文件的结构天然符合组合模式。文件夹可以包含文件或子文件夹，而文件是叶子节点，不能包含其他子项。

class File extends Component {
  operate() {
    console.log(`File: ${this.name}`);
  }
}

class Directory extends Composite {
  operate() {
    console.log(`Directory: ${this.name}`);
    super.operate();
  }
}

const root = new Directory('Root');
const file1 = new File('File1');
const file2 = new File('File2');
const folder1 = new Directory('Folder1');

root.add(file1);
root.add(folder1);
folder1.add(file2);

root.operate();
// 输出: Directory: Root, File: File1, Directory: Folder1, File: File2

总结

组合模式通过将对象组合成树形结构，允许客户端统一处理对象结构中的叶节点和容器节点。它极大地提高了系统的灵活性和扩展性，尤其适合处理具有整体-部分关系的场景，如文件系统、组织结构和菜单管理。

复制全文生成海报设计模式 JavaScript 编程软件工程树形结构

编程 JavaScript设计模式：组合模式