模板方法模式

摘自《JavaScript设计模式与开发实践》

模板方法模式是一种只需使用继承就可以实现的非常简单的模式。

模板方法模式由两部分结构组成，第一部分是抽象父类，第二部分是具体的实现子类。通常在抽象父类中封装了子类的算法框架，包括实现一些公共方法以及封装子类中所有方法的执行顺序。子类通过继承这个抽象类，也继承了整个算法结构，并且可以选择重写父类的方法。

假如我们有一些平行的子类，各个子类之间有一些相同的行为，也有一些不同的行为。如果相同和不同的行为都混合在各个子类的实现中，说明这些相同的行为会在各个子类中重复出现。但实际上，相同的行为可以被搬移到另外一个单一的地方，模板方法模式就是为解决这个问题而生的。在模板方法模式中，子类实现中的相同部分被上移到父类中，而将不同的部分留待子类来实现。这也很好地体现了泛化的思想。

第一个例子——Coffee or Tea

泡一杯咖啡

首先，我们先来泡一杯咖啡，如果没有什么太个性化的需求，泡咖啡的步骤通常如下：

• 把水煮沸
• 用沸水冲泡咖啡
• 把咖啡倒进杯子
• 加糖和牛奶

<script>
  const Coffee = function () {
  }
  Coffee.prototype.boilWater = function () {
    console.log('把水煮沸')
  }
  Coffee.prototype.brewCoffeeGriends = function () {
    console.log('用沸水冲泡咖啡')
  }
  Coffee.prototype.pourInCup = function () {
    console.log('把咖啡倒进杯子')
  }
  Coffee.prototype.addSugarAndMilk = function () {
    console.log('加糖和牛奶')
  }
  Coffee.prototype.init = function () {
    this.boilWater()
    this.brewCoffeeGriends()
    this.pourInCup()
    this.addSugarAndMilk()
  }
  const coffee = new Coffee()
  coffee.init()
</script>

泡一壶茶

接下来，开始准备我们的茶，泡茶的步骤跟泡咖啡的步骤相差并不大：

• 把水煮沸
• 用沸水浸泡茶叶
• 把茶水倒进杯子
• 加柠檬

 const Tea = function () {
  }
  Tea.prototype.boilWater = function () {
    console.log('把水煮沸')
  }
  Tea.prototype.steepTeaBag = function () {
    console.log('用沸水浸泡茶叶')
  }
  Tea.prototype.pourInCup = function () {
    console.log('把茶水倒进杯子')
  }
  Tea.prototype.addLemon = function () {
    console.log('加柠檬')
  }
  Tea.prototype.init = function () {
    this.boilWater()
    this.steepTeaBag()
    this.pourInCup()
    this.addLemon()
  }
  const tea = new Tea()
  tea.init()

分离出共同点

我们找到泡咖啡和泡茶主要有以下不同点：

• 原料不同。一个是咖啡，一个是茶，但我们可以把它们都抽象为“饮料”。
• 泡的方式不同。咖啡是冲泡，而茶叶是浸泡，我们可以把它们都抽象为“泡”。
• 加入的调料不同。一个是糖和牛奶，一个是柠檬，但我们可以把它们都抽象为“调料”。

经过抽象之后，不管是泡咖啡还是泡茶，我们都能整理为下面四步：

• 把水煮沸
• 用沸水冲泡饮料
• 把饮料倒进杯子
• 加调料

所以，不管是冲泡还是浸泡，我们都能给它一个新的方法名称，比如说 brew() 。同理，不管是加糖和牛奶，还是加柠檬，我们都可以称之为 addCondiments() 。

让我们忘记最开始创建的 Coffee 类和 Tea 类。 现在可以创建一个抽象父类来表示泡一杯饮料的整个过程。不论是 Coffee ，还是 Tea ，都被我们用 Beverage 来表示，代码如下：

  const Beverage = function () {
  }
  Beverage.prototype.boilWater = function () {
    console.log('把水煮沸')
  }
  Beverage.prototype.brew = function () {
  } // 空方法，应该由子类重写
  Beverage.prototype.pourInCup = function () {
  } // 空方法，应该由子类重写
  Beverage.prototype.addCondiments = function () {
  } // 空方法，应该由子类重写
  Beverage.prototype.init = function () {
    this.boilWater()
    this.brew()
    this.pourInCup()
    this.addCondiments()
  }

创建 Coffee 子类和 Tea 子类

现在创建一个 Beverage 类的对象对我们来说没有意义，因为世界上能喝的东西没有一种真正叫“饮料”的，饮料在这里还只是一个抽象的存在。接下来我们要创建咖啡类和茶类，并让它们继承饮料类：

const Coffee = function() {
}
Coffee.prototype = new Beverage()

接下来要重写抽象父类中的一些方法，只有“把水煮沸”这个行为可以直接使用父类 Beverage中的 boilWater 方法，其他方法都需要在 Coffee 子类中重写，代码如下：

  Coffee.prototype.brew = function () {
    console.log('用沸水冲泡咖啡')
  }
  Coffee.prototype.pourInCup = function () {
    console.log('把咖啡倒进杯子')
  }
  Coffee.prototype.addCondiments = function () {
    console.log('加糖和牛奶')
  }
  var Coffee = new Coffee()
  Coffee.init()

至此我们的 Coffee 类已经完成了，当调用 coffee 对象的 init 方法时，由于 coffee 对象和Coffee 构造器的原型 prototype 上都没有对应的 init 方法，所以该请求会顺着原型链，被委托给Coffee 的“父类” Beverage 原型上的 init 方法。

而 Beverage.prototype.init 方法中已经规定好了泡饮料的顺序，所以我们能成功地泡出一杯咖啡，代码如下：

Beverage.prototype.init = function () {
    this.boilWater()
    this.brew()
    this.pourInCup()
    this.addCondiments()
  }

接下来照葫芦画瓢，来创建我们的 Tea 类：

  const Tea = function () {
  }
  Tea.prototype = new Beverage()
  Tea.prototype.brew = function () {
    console.log('用沸水浸泡茶叶')
  }
  Tea.prototype.pourInCup = function () {
    console.log('把茶倒进杯子')
  }
  Tea.prototype.addCondiments = function () {
    console.log('加柠檬')
  }
  const tea = new Tea()

那么在上面的例子中，到底谁才是所谓的模板方法呢？答案是 Beverage.prototype.init 。

Beverage.prototype.init 被称为模板方法的原因是，该方法中封装了子类的算法框架，它作为一个算法的模板，指导子类以何种顺序去执行哪些方法。在 Beverage.prototype.init 方法中，算法内的每一个步骤都清楚地展示在我们眼前。

抽象类

在 Java 中，类分为两种，一种为具体类，另一种为抽象类。具体类可以被实例化，抽象类不能被实例化。在 Java中编译器会保证子类会重写父类中的抽象方法，但在 JavaScript 中却没有进行这些检查工作。解决方案是让 Beverage.prototype.brew 等方法直接抛出一个异常，如果因为粗心忘记编写 Coffee.prototype.brew 方法，那么至少我们会在程序运行时得到一个错误：

  Beverage.prototype.brew = function () {
    throw new Error('子类必须重写 brew 方法')
  }
  Beverage.prototype.pourInCup = function () {
    throw new Error('子类必须重写 pourInCup 方法')
  }
  Beverage.prototype.addCondiments = function () {
    throw new Error('子类必须重写 addCondiments 方法')
  }

钩子方法

通过模板方法模式，我们在父类中封装了子类的算法框架。这些算法框架在正常状态下是适用于大多数子类的，但如果有一些特别“个性”的子类呢？比如我们在饮料类 Beverage 中封装了饮料的冲泡顺序：

• 把水煮沸
• 用沸水冲泡饮料
• 把饮料倒进杯子
• 加调料

这 4个冲泡饮料的步骤适用于咖啡和茶，在我们的饮料店里，根据这 4个步骤制作出来的咖啡和茶，一直顺利地提供给绝大部分客人享用。但有一些客人喝咖啡是不加调料（糖和牛奶）的。既然 Beverage 作为父类，已经规定好了冲泡饮料的 4个步骤，那么有什么办法可以让子类不受这个约束呢？

钩子方法（ hook ）可以用来解决这个问题，放置钩子是隔离变化的一种常见手段。我们在父类中容易变化的地方放置钩子，钩子可以有一个默认的实现，究竟要不要“挂钩”，这由子类自行决定。钩子方法的返回结果决定了模板方法后面部分的执行步骤，也就是程序接下来的走向，这样一来，程序就拥有了变化的可能。

  const Beverage = function () {
  }
  Beverage.prototype.boilWater = function () {
    console.log('把水煮沸')
  }
  Beverage.prototype.brew = function () {
    throw new Error('子类必须重写 brew 方法')
  }
  Beverage.prototype.pourInCup = function () {
    throw new Error('子类必须重写 pourInCup 方法')
  }
  Beverage.prototype.addCondiments = function () {
    throw new Error('子类必须重写 addCondiments 方法')
  }
  Beverage.prototype.customerWantsCondiments = function () {
    return true // 默认需要调料
  }
  Beverage.prototype.init = function () {
    this.boilWater()
    this.brew()
    this.pourInCup()
    // 如果挂钩返回 true，则需要调料
    if (this.customerWantsCondiments()) { 
      this.addCondiments()
    }
  }
  const CoffeeWithHook = function () {
  }
  CoffeeWithHook.prototype = new Beverage()
  CoffeeWithHook.prototype.brew = function () {
    console.log('用沸水冲泡咖啡')
  }
  CoffeeWithHook.prototype.pourInCup = function () {
    console.log('把咖啡倒进杯子')
  }
  CoffeeWithHook.prototype.addCondiments = function () {
    console.log('加糖和牛奶')
  }
  CoffeeWithHook.prototype.customerWantsCondiments = function () {
    return window.confirm('请问需要调料吗？')
  }
  const coffeeWithHook = new CoffeeWithHook()
  coffeeWithHook.init()

好莱坞规则

学习完模板方法模式之后，我们要引入一个新的设计原则—著名的“好莱坞原则”。好莱坞无疑是演员的天堂，但好莱坞也有很多找不到工作的新人演员，许多新人演员在好莱坞把简历递给演艺公司之后就只有回家等待电话。有时候该演员等得不耐烦了，给演艺公司打电话询问情况，演艺公司往往这样回答：“不要来找我，我会给你打电话。”

在设计中，这样的规则就称为好莱坞原则。在这一原则的指导下，我们允许底层组件将自己挂钩到高层组件中，而高层组件会决定什么时候、以何种方式去使用这些底层组件，高层组件对待底层组件的方式，跟演艺公司对待新人演员一样，都是“别调用我们，我们会调用你”。

模板方法模式是好莱坞原则的一个典型使用场景，它与好莱坞原则的联系非常明显，当我们用模板方法模式编写一个程序时，就意味着子类放弃了对自己的控制权，而是改为父类通知子类，哪些方法应该在什么时候被调用。作为子类，只负责提供一些设计上的细节。在好莱坞原则的指导之下，下面这段代码可以达到和继承一样的效果。

<script>
  const Beverage = function (param) {
    const boilWater = function () {
      console.log('把水煮沸')
    }
    const brew = param.brew || function () {
      throw new Error('必须传递 brew 方法')
    }
    const pourInCup = param.pourInCup || function () {
      throw new Error('必须传递 pourInCup 方法')
    }
    const addCondiments = param.addCondiments || function () {
      throw new Error('必须传递 addCondiments 方法')
    }
    const F = function () {
    }
    F.prototype.init = function () {
      boilWater()
      brew()
      pourInCup()
      addCondiments()
    }
    return F
  }
  const Coffee = Beverage({
    brew: function () {
      console.log('用沸水冲泡咖啡')
    },
    pourInCup: function () {
      console.log('把咖啡倒进杯子')
    },
    addCondiments: function () {
      console.log('加糖和牛奶')
    }
  })
  const Tea = Beverage({
    brew: function () {
      console.log('用沸水浸泡茶叶')
    },
    pourInCup: function () {
      console.log('把茶倒进杯子')
    },
    addCondiments: function () {
      console.log('加柠檬')
    }
  })
  const coffee = new Coffee()
  coffee.init()
  const tea = new Tea()
  tea.init()
</script>