JS组合模式-CSDN博客

本文链接：https://blog.csdn.net/weixin_45523520/article/details/129937628

1.组合模式的概念

JS组合模式（composite pattern）是一种结构型设计模式，它允许我们将对象组合成树形结构，一次处理整个树形结构中的所有对象。组合模式允许客户端代码以一致的方式处理单个对象和复合对象，从而使代码更加灵活和可扩展。

组合模式中包含两种对象类型：组合对象和叶子对象。组合对象表示树形结构的节点，它可以有一个或多个子节点。叶子对象是没有子节点的节点，它通常表示树形结构的最小单位。

在JS中，组合模式可以被实现为一个对象，这个对象可以有一个属性数组，这个数组中存储了所有子对象。这个对象还可以有一些方法，用来添加、删除、获取子对象以及遍历所有子对象。

2.组合模式的代码实现

下面是一个简单的JS组合模式示例：

// 定义组合对象
class Composite {
  constructor() {
    this.children = [];
  }

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

  remove(child) {
    const index = this.children.indexOf(child);
    if (index !== -1) {
      this.children.splice(index, 1);
    }
  }

  getChild(index) {
    return this.children[index];
  }

  // 遍历所有子对象并执行callback
  traverse(callback) {
    this.children.forEach(child => {
      child.traverse(callback);
    });
    callback(this);
  }
}

// 定义叶子对象
class Leaf {
  constructor(name) {
    this.name = name;
  }

  traverse(callback) {
    callback(this);
  }
}

这里我们定义了一个`Composite`类和一个`Leaf`类，`Composite`类表示组合对象，`Leaf`类表示叶子对象。`Composite`类有一个属性数组`children`，用来存储子对象。它还有`add`、`remove`、`getChild`、`traverse`等方法，用来添加、删除、获取子对象以及遍历所有子对象并执行`callback`。`Leaf`类表示叶子对象，它只有一个`traverse`方法，用来执行`callback`。

3.组合模式的应用场景

现在我们可以使用这个组合模式来创建任意复杂的树形结构，例如：

// 创建一个复合对象
const composite1 = new Composite();

// 创建两个叶子对象并添加到复合对象中
const leaf1 = new Leaf('leaf1');
const leaf2 = new Leaf('leaf2');
composite1.add(leaf1);
composite1.add(leaf2);

// 创建一个新的复合对象
const composite2 = new Composite();

// 创建一个叶子对象并添加到新的复合对象中
const leaf3 = new Leaf('leaf3');
composite2.add(leaf3);

// 把新的复合对象添加到第一个复合对象中
composite1.add(composite2);

// 遍历所有对象并输出它们的名称
composite1.traverse(obj => console.log(obj.name));

这个例子中，我们首先创建了一个复合对象`composite1`，然后创建了两个叶子对象`leaf1`和`leaf2`，并将它们添加到`composite1`中。接下来，我们创建了一个新的复合对象`composite2`，并将一个叶子对象`leaf3`添加到其中。最后，我们将`composite2`添加到`composite1`中，并使用`traverse`遍历所有对象，输出它们的名称。输出结果如下：