JavaScript设计模式之组合模式原理与应用详解

什么是组合模式

组合模式是一种结构型设计模式，它将对象组合成树形结构来表示“整体-部分”层次结构，让客户端能够统一地处理单个对象和对象组合。

组合模式对单个对象和组合对象的访问具有一致性，它定义了一个抽象类或接口以表示所有可被组合的对象的共同方法和属性，这个抽象类或接口可以为叶子节点和组合节点提供一个统一的方法。

组合模式的角色

组合模式由以下角色组成：

组合类(Component)：抽象类或接口，定义叶子节点和组合节点的公共接口，包括add、remove、getChild等方法。
叶子类(Leaf)：实现组合类接口，并且没有子元素的类。
组合类(Composite)：实现组合类接口，并且包含子元素的类。

组合模式的应用场景

组合模式适用于以下情况：

当需求中存在一个对象和该对象的组成部分的关系时，可以使用组合模式。
当希望统一地对待单个对象和对象集合时，可以使用组合模式。
当发现多个对象之间存在相似之处，并且可以统一地管理这些对象时，可以使用组合模式。

组合模式的实现

以下是一个组合模式实现的示例代码：

class Component {
  add() {
    throw new Error('不支持添加操作');
  }
  remove() {
    throw new Error('不支持删除操作');
  }
  getChild() {
    throw new Error('不支持获取子元素操作');
  }
  operation() {
    console.log('执行操作');
  }
}

class Leaf extends Component {
  operation() {
    console.log('执行叶子节点操作');
  }
}

class Composite extends Component {
  constructor() {
    super();
    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];
  }
  operation() {
    console.log('执行组合对象操作');
    this.children.forEach(child => {
      child.operation()
    })
  }
}

在上面的示例中，我们实现了一个Component抽象类，以及叶子节点和组合节点的具体实现类。其中，叶子节点没有子元素，而组合节点可以包含多个子元素。调用组合对象的操作时，将执行组合对象本身以及子元素对象的操作。

如何应用组合模式

以下是一个使用组合模式的实际案例：

假设我们有一个公司组织结构，包括CEO、三个大区、每个大区下面都有两个部门和一些员工。我们可以使用组合模式来表示这个结构，如下所示：

// 公司结构组合树
const org = new Composite();
// 添加CEO
const ceo = new Leaf();
ceo.operation = () => {
  console.log('我是CEO');
};
org.add(ceo);
// 添加三个大区
const regionA = new Composite();
const regionB = new Composite();
const regionC = new Composite();
regionA.operation = () => {
  console.log('我是A大区');
};
regionB.operation = () => {
  console.log('我是B大区');
};
regionC.operation = () => {
  console.log('我是C大区');
};
org.add(regionA);
org.add(regionB);
org.add(regionC);
// 添加大区下面的部门
const departA1 = new Leaf();
const departA2 = new Leaf();
const departB1 = new Leaf();
const departB2 = new Leaf();
const departC1 = new Leaf();
const departC2 = new Leaf();
departA1.operation = () => {
  console.log('我是A大区部门1');
};
departA2.operation = () => {
  console.log('我是A大区部门2');
};
departB1.operation = () => {
  console.log('我是B大区部门1');
};
departB2.operation = () => {
  console.log('我是B大区部门2');
};
departC1.operation = () => {
  console.log('我是C大区部门1');
};
departC2.operation = () => {
  console.log('我是C大区部门2');
};
regionA.add(departA1);
regionA.add(departA2);
regionB.add(departB1);
regionB.add(departB2);
regionC.add(departC1);
regionC.add(departC2);
// 添加员工
const emp1 = new Leaf();
const emp2 = new Leaf();
const emp3 = new Leaf();
emp1.operation = () => {
  console.log('我是员工1');
};
emp2.operation = () => {
  console.log('我是员工2');
};
emp3.operation = () => {
  console.log('我是员工3');
};
departA1.add(emp1);
departA1.add(emp2);
departB1.add(emp3);

// 调用组合对象的操作
org.operation();

在上面的示例中，我们使用组合模式来表示公司的组织结构，CEO和每个大区是组合对象，部门和员工是叶子节点。当我们调用组合对象的operation方法时，将执行组合对象及其子元素的操作，从而顺次打印出整个公司组织结构。