博客

前端设计模式——模板方法模式

  • Post category:JavaScript

模板方法模式（Template Method Pattern）：定义一个行为的骨架，而将一些步骤延迟到子类中。模板方法使得子类可以不改变一个行为的结构即可重定义该行为的某些特定步骤。

这些步骤被称为“具体操作”（Concrete Operations），而整个行为的结构和顺序则被称为“模板方法”（Template Method）。

模板方法模式的核心思想是封装行为中的不变部分，同时允许可变部分通过子类来进行扩展。这样做的好处是可以避免重复代码，提高代码的复用性和可维护性。

在前端开发中，模板方法模式通常用于处理页面的渲染和事件处理。例如，我们可以定义一个基础的页面渲染算法，并在其中定义一些抽象方法，如初始化数据、绑定事件、渲染模板等，然后在子类中实现这些具体操作。这样可以使得我们在开发页面时，只需要关注具体的业务逻辑，而不用过多关注页面的渲染细节。

下面是一个简单的模板方法模式的示例代码：

class Algorithm {
  templateMethod() {
    this.stepOne();
    this.stepTwo();
    this.stepThree();
  }

  stepOne() {
    throw new Error("Abstract method 'stepOne' must be implemented in subclass.");
  }

  stepTwo() {
    throw new Error("Abstract method 'stepTwo' must be implemented in subclass.");
  }

  stepThree() {
    throw new Error("Abstract method 'stepThree' must be implemented in subclass.");
  }
}

class ConcreteAlgorithm extends Algorithm {
  stepOne() {
    console.log('ConcreteAlgorithm: step one.');
  }

  stepTwo() {
    console.log('ConcreteAlgorithm: step two.');
  }

  stepThree() {
    console.log('ConcreteAlgorithm: step three.');
  }
}

const algorithm = new ConcreteAlgorithm();
algorithm.templateMethod();
// ConcreteAlgorithm: step one.
// ConcreteAlgorithm: step two.
// ConcreteAlgorithm: step three.

 

在这个示例中，我们定义了一个 `Algorithm` 类，其中包含了一个模板方法 `templateMethod()` 和三个基本方法 `stepOne()`、`stepTwo()` 和 `stepThree()`。这些基本方法都是抽象方法，需要在子类中进行实现。

我们还定义了一个 `ConcreteAlgorithm` 类，它继承自 `Algorithm` 类，并实现了父类中的三个基本方法。然后，我们创建了一个 `ConcreteAlgorithm` 的实例，并调用了其 `templateMethod()` 方法，该方法会按照父类定义的顺序执行三个基本方法。

总的来说，模板方法模式是一种非常实用的设计模式，在 JavaScript 中也同样适用。它可以帮助我们将代码的结构和行为进行分离，从而提高代码的可读性和可维护性。

Tags: