es6 语法学习 - 组合模式

es6 语法学习 - 组合模式

一、基本概念

组合设计模式（Composite Pattern）是一种结构型设计模式，旨在将对象组合成树形结构以表示“部分-整体”的层次关系。组合模式允许用户以统一的方式对待单个对象和对象组合，使得客户端代码可以轻松地处理树形结构中的任意元素。

二、 优点

• 简化客户端代码：客户端可以以统一的方式处理单个对象和组合对象，从而简化了代码。
• 灵活性：可以方便地创建和修改树形结构，并动态地添加或删除组件。
• 符合开闭原则：新增叶子节点或组合节点不会影响现有代码，具有良好的扩展性。

三、缺点

• 过于复杂：组合模式可能会使设计变得复杂，特别是在非常简单的场景中，引入组合可能显得多余。
• 性能问题：在某些情况下，管理大量组合对象的性能可能会受到影响。

四、使用场景

• 当想要表示对象的部分-整体层次结构时。
• 当希望允许客户以一致的方式对单个对象和组合对象进行处理时。
• 当构建一个需要动态添加、删除和组合的树形结构时。

五、示例代码

以下是使用 JavaScript ES6 实现组合设计模式的示例。在这个例子中，我们将创建一个表示图形（图形可以是单个形状或形状组合）的系统。

组件类

// 组件类
class Graphic {
  draw() {
    throw new Error('此方法需要被实现');
  }
}
// 叶子类 - 圆形
class Circle extends Graphic {
  draw() {
    console.log('绘制一个圆形');
  }
}

// 叶子类 - 矩形
class Rectangle extends Graphic {
  draw() {
    console.log('绘制一个矩形');
  }
}
// 组合类
class CompositeGraphic extends Graphic {
  constructor() {
    super();
    this.graphics = []; // 用于存储子图形
  }

  add(graphic) {
    this.graphics.push(graphic);
  }

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

  draw() {
    console.log('绘制组合图形:');
    for (const graphic of this.graphics) {
      graphic.draw(); // 递归调用
    }
  }
}

// 客户端代码
const circle1 = new Circle();
const circle2 = new Circle();
const rectangle = new Rectangle();

const compositeGraphic = new CompositeGraphic();
compositeGraphic.add(circle1);
compositeGraphic.add(circle2);
compositeGraphic.add(rectangle);

// 绘制组合图形
compositeGraphic.draw();

组合设计模式提供了一种有效的方式来处理对象的部分-整体关系。通过使用组合模式，客户端代码可以以统一的方式对待单独对象和对象组合，从而简化了处理结构复杂性。此模式非常适用于需要动态构建树形结构的场景，例如图形绘制、文件系统等。