快捷導(dǎo)航

學(xué)習(xí)JavaScript設(shè)計(jì)模式之模板方法模式

更新時(shí)間：2016年01月20日 11:43:14 作者：奮飛

這篇文章主要為大家介紹了JavaScript設(shè)計(jì)模式中的模板方法模式，對(duì)JavaScript設(shè)計(jì)模式感興趣的小伙伴們可以參考一下

一、定義

模板方法是基于繼承的設(shè)計(jì)模式，可以很好的提高系統(tǒng)的擴(kuò)展性。 java中的抽象父類、子類
模板方法有兩部分結(jié)構(gòu)組成，第一部分是抽象父類，第二部分是具體的實(shí)現(xiàn)子類。

二、示例

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

/* 抽象父類：飲料 */
var Beverage = function(){};
// (1) 把水煮沸
Beverage.prototype.boilWater = function() {
  console.log("把水煮沸");
};
// (2) 沸水浸泡
Beverage.prototype.brew = function() {
  throw new Error("子類必須重寫brew方法");
};
// (3) 倒進(jìn)杯子
Beverage.prototype.pourInCup = function() {
  throw new Error("子類必須重寫pourInCup方法");
};
// (4) 加調(diào)料
Beverage.prototype.addCondiments = function() {
  throw new Error("子類必須重寫addCondiments方法");
};

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

/* 實(shí)現(xiàn)子類 Coffee*/
var Coffee = function(){};
Coffee.prototype = new Beverage();
// 重寫非公有方法
Coffee.prototype.brew = function() {
  console.log("用沸水沖泡咖啡");
};
Coffee.prototype.pourInCup = function() {
  console.log("把咖啡倒進(jìn)杯子");
};
Coffee.prototype.addCondiments = function() {
  console.log("加牛奶");
};
var coffee = new Coffee();
coffee.init();

通過模板方法模式，在父類中封裝了子類的算法框架。這些算法框架在正常狀態(tài)下是適用大多數(shù)子類的，但也會(huì)出現(xiàn)“個(gè)性”子類。
如上述流程，加調(diào)料是可選的。
鉤子方法可以解決這個(gè)問題，放置鉤子是隔離變化的一種常見手段。

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

/* 實(shí)現(xiàn)子類 Tea*/
var Tea = function(){};
Tea.prototype = new Beverage();
// 重寫非公有方法
Tea.prototype.brew = function() {
  console.log("用沸水沖泡茶");
};
Tea.prototype.pourInCup = function() {
  console.log("把茶倒進(jìn)杯子");
};
Tea.prototype.addCondiments = function() {
  console.log("加牛奶");
};
Tea.prototype.customerWantsCondiments = function() {
  return window.confirm("需要添加調(diào)料嗎？");
};
var tea = new Tea();
tea.init();

JavaScript沒有提供真正的類式繼承，繼承是通過對(duì)象與對(duì)象之間的委托來實(shí)現(xiàn)的。

三、“好萊塢原則”：別調(diào)用我們，我們會(huì)調(diào)用你

典型使用場景：

（1）模板方法模式：使用該設(shè)計(jì)模式意味著子類放棄了對(duì)自己的控制權(quán)，而是改為父類通知子類。作為子類，只負(fù)責(zé)提供一些設(shè)計(jì)上的細(xì)節(jié)。
（2）觀察者模式：發(fā)布者把消息推送給訂閱者。
（3）回調(diào)函數(shù)：ajax異步請(qǐng)求，把需要執(zhí)行的操作封裝在回調(diào)函數(shù)里，當(dāng)數(shù)據(jù)返回后，這個(gè)回調(diào)函數(shù)才被執(zhí)行。

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: