设计模式-模板方法模式-前端javascript学习笔记

151 阅读4分钟

概述

模板方法模式是一种常用的设计模式,用于定义一个算法的骨架,并允许子类为一个或多个步骤提供具体的实现。本文将介绍什么是模板方法模式、它的优点和缺点,以及如何在 JavaScript 中实现模板方法模式。

什么是模板方法模式

模板方法模式是一种行为型设计模式,它定义了一个算法的骨架,并允许子类为一个或多个步骤提供具体的实现。这种模式的核心思想是将算法的不变部分封装到一个模板方法中,而将可变部分留给子类来实现。

在模板方法模式中,算法的骨架通常由一个抽象类或接口来定义。该类或接口中包含了一个或多个抽象方法,用于定义算法中的可变部分。具体的实现则由子类来提供,子类实现的方法将会在算法执行过程中被调用。

模板方法模式的优点

  1. 提高代码复用性。模板方法模式将算法的不变部分封装到一个模板方法中,避免了重复的代码。子类只需要提供可变部分的实现,就能够重用父类中的代码。

  2. 提高代码可维护性。模板方法模式将算法的骨架和具体的实现分离开来,使得代码更加清晰易懂,也更容易进行维护和修改。

  3. 通过扩展子类来实现功能。模板方法模式将算法的可变部分留给子类来实现,使得可以通过扩展子类来实现新的功能,而不需要修改父类的代码。

模板方法模式的缺点

  1. 代码复杂度较高。模板方法模式需要定义一个抽象类或接口来定义算法的骨架,需要子类实现一些具体的方法。这使得代码的结构比较复杂,不太适合简单的应用场景。

  2. 子类必须实现所有的抽象方法。如果子类没有实现所有的抽象方法,那么该子类就无法被实例化,这也会对代码的扩展性造成一定的影响。

在 JavaScript 中实现模板方法模式

在 JavaScript 中,我们可以使用类来实现模板方法模式。下面是一个使用模板方法模式的例子,用于实现一个简单的咖啡机:

// 定义一个咖啡机类class CoffeeMachine {  // 模板方法  prepareCoffee() {    // 热水    this.boilWater();    // 冲泡咖啡    this.brewCoffee();    // 将咖啡倒入杯子    this.pourInCup();    // 加入牛奶和糖    this.addMilkAndSugar();  }  // 抽象方法:冲泡咖啡   brewCoffee() {     throw new Error('Not implemented');   }  // 抽象方法:将咖啡倒入杯子   pourInCup() {     throw new Error('Not implemented');   }  // 具体方法:烧水   boilWater() {     console.log('Boiling water');   }  // 具体方法:加入牛奶和糖   addMilkAndSugar() {     console.log('Adding milk and sugar');   } }// 定义一个摩卡咖啡机类,继承自咖啡机类 class MochaCoffeeMachine extends CoffeeMachine { // 实现抽象方法:冲泡咖啡   brewCoffee() {     console.log('Brewing mocha coffee');  }// 实现抽象方法:将咖啡倒入杯子  pourInCup() {     console.log('Pouring mocha coffee into cup');  }}// 定义一个拿铁咖啡机类,继承自咖啡机类 class LatteCoffeeMachine extends CoffeeMachine {   // 实现抽象方法:冲泡咖啡   brewCoffee() {     console.log('Brewing latte coffee');   }// 实现抽象方法:将咖啡倒入杯子   pourInCup() {     console.log('Pouring latte coffee into cup');  }  // 重写具体方法:加入牛奶和糖   addMilkAndSugar() {     console.log('Adding milk and vanilla syrup');   }}// 使用摩卡咖啡机 const mochaMachine = new MochaCoffeeMachine(); mochaMachine.prepareCoffee();// 使用拿铁咖啡机 const latteMachine = new LatteCoffeeMachine();latteMachine.prepareCoffee();

总结

在上面的代码中,我们首先定义了一个咖啡机类 `CoffeeMachine`,其中包含一个模板方法 `prepareCoffee()` 和三个抽象方法 `brewCoffee()`、`pourInCup()` 和 `addMilkAndSugar()`。这三个抽象方法需要子类来实现,因为它们是咖啡机的可变部分。 接着我们定义了两个子类 `MochaCoffeeMachine` 和 `LatteCoffeeMachine`,分别实现了抽象方法 `brewCoffee()` 和 `pourInCup()`。`LatteCoffeeMachine` 还重写了具体方法 `addMilkAndSugar()`,以实现添加香草糖浆的功能。 最后我们分别创建了一个摩卡咖啡机和一个拿铁咖啡机,并调用它们的 prepareCoffee() 方法,得到了不同种类的咖啡。

使用模板方法模式,我们将固定的流程和可变的部分分离开来,使得代码更加灵活和可扩展。如果有新的咖啡种类需要添加,我们只需要创建一个新的子类并实现相应的抽象方法即可,不需要修改原有的代码。

总的来说,模板方法模式是一种非常实用的设计模式,在很多场景下都能发挥出很好的作用。学习模板方法模式可以让我们更好地理解面向对象设计的思想和原则,提高代码的可读性、可维护性和可扩展性。

最后

但在 JavaScript 中,我们很多时候都不需要依样画瓢地去实现一个模版方法模式,高阶函数 是更好的选择。 所以该模式对于前端同学来说作为学习了解即可,无需在项目中硬套。