在 JavaScript 设计模式之旅的下半程中，我们将探索更多强大的模式，为你的代码赋能。

前端

2023-09-14 04:33:58

JavaScript 设计模式（下）：助你实现优雅高效的代码

模式探秘

模板方法模式：

提供一个通用模板，其中封装了算法的基本步骤。子类只需重写特定的步骤，即可定制算法。

享元模式：

池化多个相似对象的实例，节省内存并提高性能。

职责链模式：

创建一系列处理请求的处理器。每个处理器检查请求并将其传递给下一个处理器，直到请求被处理。

中介者模式：

充当不同对象之间的协调器。它管理对象之间的通信，防止它们直接交互。

装饰者模式：

动态地向对象添加新功能。它允许在不更改原始对象的情况下扩展对象的功能。

状态模式：

管理对象的内部状态。当对象的内部状态改变时，它的行为也会相应改变。

适配器模式：

允许两个不兼容的接口协同工作。它将一个接口转换为另一个接口，以实现无缝集成。

代码中的实践

模板方法模式：

class Shape {
  constructor(color) {
    this.color = color;
  }

  draw() {
    // 通用模板
    this.prepareCanvas();
    this.drawShape();
    this.cleanUp();
  }

  prepareCanvas() {}
  drawShape() {}
  cleanUp() {}
}

class Rectangle extends Shape {
  constructor(color, width, height) {
    super(color);
    this.width = width;
    this.height = height;
  }

  drawShape() {
    // 重写特定步骤
    console.log(`绘制矩形，颜色：${this.color}，宽度：${this.width}，高度：${this.height}`);
  }
}

享元模式：

class ShapeFactory {
  constructor() {
    this.shapes = {};
  }

  getShape(color) {
    if (!this.shapes[color]) {
      this.shapes[color] = new Shape(color);
    }
    return this.shapes[color];
  }
}

const factory = new ShapeFactory();
const shape1 = factory.getShape("red");
const shape2 = factory.getShape("blue");