深入淺出設計模式(Design Pattern)-樣板方法模式(9-Template Method Pattern)

Ben

Published in

生活的各種可能性

8 min readFeb 26, 2024

這篇要來替大家介紹一個應用繼承和抽象來實作共同流程的設計模式，樣板方法模式(Template Method Pattern)。

樣板方法模式(Template Method Pattern)

定義：可在方法裡面定義演算法的骨架，並將一些步驟推遲至子類別處理。樣板方法可讓子類別重新定義演算法的某些步驟，而且不會改變演算法的結構。

接著我們來看看我們這次的情境內容：這次我們要開一家咖啡店，我們除了有賣咖啡之外當然也有賣茶，畢竟咖啡因是現代人重要的精神糧食之一。我們在擬定我們的飲料沖泡流程時發現茶跟咖啡的流程非常相似。

這是我們一開始的做法，我們分別有咖啡和茶兩個class，從下方我們可以看到，它們的流程非常相似(step1和step3是一樣的，但step2和step4則是不一樣的，是它們自己的製作方法)。

class Coffee {
  // 沖咖啡的流程
  prepareRecipe(): void {

    // 每一步都是獨立的方法，step1~step4
    this.boilWater();
    this.brewCoffeeGrinds();
    this.pourInCup();
    this.addSugarAndMilk();
  }
  
  public boilWater(): void {
    // do something...
  }

  public brewCoffeeGrinds(): void {
    // do something
  }

  public pourInCup(): void {
    // do something
  }

  public addSugarAndMilk(): void {
    // do something
  }
}

class Tea {
  // 沖茶的流程
  prepareRecipe(): void {
    
    // 每一步都是獨立的方法，step1~step4
    this.boilWater();
    this.steepTegBag();
    this.pourInCup();
    this.addLemon();
  }

  public boilWater(): void {
    // do something...
  }

  public steepTeaBag(): void {
    // do something...
  }

  public pourInCup(): void {
    // do something...
  }

  public addLemon(): void {
    // do something...
  }
}

接著我們來把重複的內容抽象化，來看看我們的類別圖

我們新的設計完成了，但總是覺得有些地方怪怪的，是不是有忽略了什麼地方？

我們進一步看看prepareRecipe裡的step2 and step4，它們是的流程非常相似，像是step2的浸泡(steep)和沖泡(brew)其實差異不大，而step4的加入檸檬和加入糖與牛奶都是替飲料加入調味料，差別在於它們是分別處理不同類型的飲料。

有沒有辦法進一步把整個prepareRecipe方法也抽象化呢？

接下來我們將Coffee and Tea各自的方法也抽象化，現在Coffee和Tea就能共用一個prepareRecipe方法了。

接著我們來看看完整的範例

// 抽象的caffeine飲料類別
abstract class CaffeineBeverage {
  // prepareRecipe定義了一個演算法樣板流程
  public prepareRecipe(): void {
    this.boilWater();
    this.brew();
    this.pourInCup();

    if (this.customerWantsCondiments()) {
      this.addCondiments();
    }
  }

  // 子類別必須實作以下兩個演算法(共同的方法，但實作內容不同，由子類別實現)
  abstract brew(): void;
  abstract addCondiments(): void;

  public boilWater(): void {
    console.log("Boiling water");
  }

  public pourInCup(): void {
    console.log("Pouring into cup");
  }

  // hook: 子類別可以複寫內容來決定是否添加調味
  public customerWantsCondiments(): boolean {
    return false
  }
}

// 實例化茶
class Tea extends CaffeineBeverage {
  public brew(): void {
    console.log("Steeping the tea");
  }

  public addCondiments(): void {
    console.log("Adding lemon");
  }

  public customerWantsCondiments(): boolean {
    return true
  }
}

// 實例化coffee
class Coffee extends CaffeineBeverage {
  public brew(): void {
    console.log("Dripping Coffee through filter");
  }

  public addCondiments(): void {
    console.log("Adding Sugar and Milk");
  }
}

const tea = new Tea();
const coffee = new Coffee();

tea.customerWantsCondiments();
tea.prepareRecipe();
coffee.prepareRecipe();