JavaScript设计模式(八):模板方法模式

154 阅读1分钟

定义

模板方法模式:模板方法有两部分构成,一部分是父类,封装了一些子类的算法。第二部分是具体实现的子类,子类可以继承父类的方法,也可以重写父类的方法。

按照字面意思就是,创建一个模板,一些相似的问题,通过这个模板,都可以有效的解决。在js中,用继承很容易实现这种模式。比如,泡咖啡和泡茶叶都需要经过烧开水,冲泡,然后倒入杯子。我们可以建一个这样的模板:

  • 1、烧水
  • 2、冲泡
  • 3、到入杯子

我们把这个当做父类。在子类中,冲泡具体实现是可以不一样的,可以是泡咖啡,泡茶叶、泡枸杞等。这样,我们可以用同一个父类,通过修改子类,使系统增加新的功能。

实现

const Drinks = function () { }

Drinks.prototype.firstStep = function () {
  console.log('烧开水')
}

Drinks.prototype.secondStep = function () { }

Drinks.prototype.thirdStep = function () {
  console.log('倒入杯子')
}

Drinks.prototype.fourthStep = function () { }

Drinks.prototype.init = function () { 
  this.firstStep()
  this.secondStep()
  this.thirdStep()
  this.fourthStep()
}

const Tea = function () { }

Tea.prototype = new Drinks

Tea.prototype.secondStep = function () {
  console.log('浸泡茶叶')
}

Tea.prototype.fourthStep = function () {
  console.log('加柠檬')
}

const Coffee = function () { }

Coffee.prototype = new Drinks

Coffee.prototype.secondStep = function () {
  console.log('冲泡咖啡')
}

Coffee.prototype.fourthStep = function () {
  console.log('加糖')
}

const tea = new Tea()
tea.init()            // 烧开水,浸泡茶叶,倒入杯子,加柠檬
const coffee = new Coffee()
coffee.init()         // 烧开水,冲泡咖啡,倒入杯子,加糖

总结

模板方法模式是一个扩展性很好的设计模式。子类的方法种类和执行顺序是不变的,所以我们可以把这部分逻辑抽象到父类中,而子类的方法具体实现是可以变化的。这样我们便能够给系统增加新的功能时,不需要改动父类及其他子类。