JavaScript中的组合模式

组合模式是一种结构性设计模式，它允许你将对象组合成树状结构，并且能像处理单个对象一样处理整个树。在JavaScript中，它可以用于构建复杂的UI组件或任何具有树状结构的数据。

下面我们来详细了解JavaScript中的组合模式。

## 适用场景

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

- 当你希望客户端能够统一处理树状结构中的所有对象时，可以使用组合模式。例如，你希望能够像处理单个对象一样处理整个UI组件树。
- 当你希望将树状结构中的叶子节点和容器节点视为一类对象时，可以使用组合模式。例如，你希望能够将整个UI组件树视为一个单一的对象，以便于进行整体操作。
- 当你希望通过向对象添加容器节点来递归地创建树状结构时，可以使用组合模式。例如，你希望能够通过向UI组件中添加子组件来递归地构建UI组件树。

## 实现方式

在JavaScript中，我们可以使用以下方式来实现组合模式：

1. 定义一个基类`Component`，它包含所有组件的公共方法，例如`add`、`remove`和`getChild`。
2. 定义一个叶子类`Leaf`，它表示树状结构中的叶子节点，它继承自`Component`，并且没有`add`、`remove`和`getChild`方法。
3. 定义一个容器类`Composite`，它表示树状结构中的容器节点，它继承自`Component`，并且拥有`add`、`remove`和`getChild`方法。
4. 在`Composite`类中实现`add`、`remove`和`getChild`方法，它们分别用于添加子组件、移除子组件和获取子组件。
5. 在`Component`类中实现一个`getDepth`方法，用于获取当前节点在树状结构中的深度。
6. 在`Component`类中实现一个`display`方法，用于打印当前节点在树状结构中的层次结构。

下面是一个示例代码：

```javascript
class Component {
  constructor(name) {
    this.name = name;
  }

  add(component) {}

  remove(component) {}

  getChild(index) {}

  getDepth() {}

  display() {}
}

class Leaf extends Component {
  constructor(name) {
    super(name);
  }

  getDepth() {
    return 1;
  }

  display() {
    console.log(`${'--'.repeat(this.getDepth())}${this.name}`);
  }
}

class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }

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

6. 使用组合模式

使用组合模式的一般步骤如下：

1. 定义组件抽象类或接口，约定组件方法。

2. 定义叶子节点类，实现组件的方法。

3. 定义容器节点类，实现组件的方法，并管理其子组件。

4. 客户端通过容器节点组装组件树。

下面我们通过一个例子来演示如何使用组合模式。

首先，我们定义一个抽象类 Component：

```
class Component {
  constructor(name) {
    this.name = name;
  }

  add(component) {
    throw new Error('不支持添加操作');
  }

  remove(component) {
    throw new Error('不支持删除操作');
  }

  getChild(index) {
    throw new Error('不支持获取子节点操作');
  }

  getName() {
    return this.name;
  }

  getPrice() {
    throw new Error('不支持获取价格操作');
  }

  print() {
    throw new Error('不支持打印操作');
  }
}
```

这个抽象类定义了组件的通用方法，包括添加子节点、删除子节点、获取子节点、获取名称、获取价格和打印信息。

接下来，我们定义一个叶子节点类 Leaf，它表示一个商品：

```
class Leaf extends Component {
  constructor(name, price) {
    super(name);
    this.price = price;
  }

  getPrice() {
    return this.price;
  }

  print() {
    console.log(`${this.getName()} - ￥${this.getPrice()}`);
  }
}
```

这个类实现了 Component 中定义的 getPrice() 和 print() 方法。

最后，我们定义一个容器节点类 Composite，它表示一个商品分类：

```
class Composite extends Component {
  constructor(name) {
    super(name);
    this.children = [];
  }

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

  remove(component) {
    const index = this.children.indexOf(component);
    if (index >= 0) {
      this.children.splice(index, 1);
    }
  }

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

  getPrice() {
    return this.children.reduce((acc, cur) => acc + cur.getPrice(), 0);
  }

  print() {
    console.log(`${this.getName()} - ￥${this.getPrice()}`);
    this.children.forEach((child) => child.print());
  }
}
```

这个类实现了 Component 中定义的 add()、remove()、getChild()、getPrice() 和 print() 方法，并维护了一个子节点列表 children。

现在，我们可以用这些类来组装一个商品树：

```
const root = new Composite('商品目录');
const food = new Composite('食品');
const fruit = new Composite('水果');
const apple = new Leaf('苹果', 5);
const banana = new Leaf('香蕉', 3);
const meat = new Composite('肉类');
const pork = new Leaf('猪肉', 10);
const beef = new Leaf('牛肉', 20);

root.add(food);
root.add(meat);
food.add(fruit);
fruit.add(apple);
fruit.add(banana);
meat.add(pork);
meat.add(beef);

root.print();

```

接下来我们来看一个实际的例子，假设我们需要构建一个树形结构的菜单，这个菜单有多层，每一层都有多个子菜单，我们可以使用组合模式来构建这个菜单。

首先，我们需要定义两个类，一个是`Menu`类表示菜单，一个是`MenuItem`类表示菜单项。`Menu`类中包含一个子菜单数组，`MenuItem`类中包含一个菜单项名称和一个指向子菜单的引用。

```javascript
class Menu {
  constructor(name) {
    this.name = name;
    this.menuItems = [];
  }

  add(menuItem) {
    this.menuItems.push(menuItem);
  }

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

  display() {
    console.log(this.name);
    for (const item of this.menuItems) {
      item.display();
    }
  }
}

class MenuItem {
  constructor(name, menu) {
    this.name = name;
    this.menu = menu;
  }

  display() {
    console.log('- ' + this.name);
    if (this.menu) {
      this.menu.display();
    }
  }
}

```

然后，我们可以使用这两个类来构建一个树形结构的菜单：

```javascript
const menu = new Menu('Root');
const subMenu1 = new Menu('Sub Menu 1');
const subMenu2 = new Menu('Sub Menu 2');
const subSubMenu = new Menu('Sub Sub Menu');

const menuItem1 = new MenuItem('Menu Item 1');
const menuItem2 = new MenuItem('Menu Item 2', subMenu1);
const menuItem3 = new MenuItem('Menu Item 3', subSubMenu);
const menuItem4 = new MenuItem('Menu Item 4', subSubMenu);

subMenu1.add(menuItem2);
subSubMenu.add(menuItem3);
subSubMenu.add(menuItem4);
subMenu2.add(subSubMenu);

menu.add(menuItem1);
menu.add(subMenu1);
menu.add(subMenu2);

menu.display(); // 输出整个菜单树形结构
```

输出结果如下：

```

Root
- Menu Item 1
- Sub Menu 1
-- Menu Item 2
- Sub Menu 2
-- Sub Sub Menu
--- Menu Item 3
--- Menu Item 4
```

可以看到，我们使用了组合模式来构建一个树形结构的菜单，并且可以方便地添加、删除、显示菜单项和子菜单，这大大简化了我们的代码实现。

当我们想要使用组合模式时，需要遵循以下步骤：

1. 创建一个基本组件类，它包含了最基本的属性和方法，例如`add`、`remove`、`getChild`等。

2. 创建一个组合类，它也实现了基本组件类中的方法，并且包含一个子节点的列表。这个列表可以是一个数组或者其他数据结构。

3. 在组合类中定义一个`add`方法，用于添加子节点。这个方法可以将一个子节点添加到组合节点的子节点列表中。

4. 在组合类中定义一个`remove`方法，用于移除子节点。这个方法可以从组合节点的子节点列表中移除一个指定的子节点。

5. 在组合类中定义一个`getChild`方法，用于获取子节点。这个方法可以根据索引或者其他参数来获取一个指定的子节点。

6. 创建一些具体的组件类，它们继承基本组件类，实现了基本组件类中的方法。

7. 创建一些具体的组合类，它们继承组合类，实现了组合类中的方法，并且可以包含一些具体的组件类或其他组合类。

8. 创建一个根节点，将所有的组件类和组合类添加到根节点中。

通过以上步骤，我们就可以使用组合模式来组织和管理复杂的对象结构。