學習JavaScript設計模式之模板方法模式_javascript技巧

一、定義

模板方法是基於繼承的設計模式，可以很好的提高系統的擴展性。 java中的抽象父類別、子類別
模板方法有兩個部分結構組成，第一部分是抽象父類，第二部分是具體的實作子類別。

二、範例

Coffee or Tea
(1) 煮水
(2) 用沸水浸泡茶葉
(3) 把茶水倒進杯子
(4) 加檸檬

/* 抽象父类：饮料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
  console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
  throw new Error("子类必须重写brew方法");
};
// (3) 倒进杯子
Beverage.prototype.pourInCup = function() {
  throw new Error("子类必须重写pourInCup方法");
};
// (4) 加调料
Beverage.prototype.addCondiments = function() {
  throw new Error("子类必须重写addCondiments方法");
};

/* 模板方法 */
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  this.addCondiments();
}

/* 实现子类 Coffee*/
var Coffee = function(){};
Coffee.prototype = new Beverage();
// 重写非公有方法
Coffee.prototype.brew = function() {
  console.log("用沸水冲泡咖啡");
};
Coffee.prototype.pourInCup = function() {
  console.log("把咖啡倒进杯子");
};
Coffee.prototype.addCondiments = function() {
  console.log("加牛奶");
};
var coffee = new Coffee();
coffee.init();

透過模板方法模式，在父類別中封裝了子類別的演算法框架。這些演算法框架在正常狀態下是適用大多數子類別的，但也會出現「個性」子類別。
如上述流程，加調味料是可選的。
鉤子方法可以解決這個問題，放置鉤子是隔離變化的常見手段。

/* 添加钩子方法 */
Beverage.prototype.customerWantsCondiments = function() {
  return true;
};
Beverage.prototype.init = function() {
  this.boilWater();
  this.brew();
  this.pourInCup();
  if(this.customerWantsCondiments()) {
    this.addCondiments();
  }
}

/* 实现子类 Tea*/
var Tea = function(){};
Tea.prototype = new Beverage();
// 重写非公有方法
Tea.prototype.brew = function() {
  console.log("用沸水冲泡茶");
};
Tea.prototype.pourInCup = function() {
  console.log("把茶倒进杯子");
};
Tea.prototype.addCondiments = function() {
  console.log("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
  return window.confirm("需要添加调料吗？");
};
var tea = new Tea();
tea.init();

JavaScript沒有提供真正的類別式繼承，繼承是透過物件與物件之間的委託來實現的。

三、「好萊塢原則」：別呼叫我們，我們會呼叫你

典型使用場景：

（1）模板方法模式：使用該設計模式意味著子類別放棄了對自己的控制權，而是改為父類通知子類。作為子類，只負責提供一些設計上的細節。
（2）觀察者模式：發布者把訊息推給訂閱者。
（3）回呼函數：ajax非同步請求，把需要執行的操作封裝在回呼函數裡，當資料回傳後，這個回呼函數才會被執行。

希望本文所述對大家學習javascript程式設計有所幫助。