javascript策略模式、模板模式使用場景和實作程式碼詳解

策略模式

策略模式指的是定義一些欄位的演算法，把他們一個個封裝起來，目的就是將演算法的使用與演算法的實作分開。說穿了就是以前要很多判斷的寫法，現在把判斷裡面的內容抽離開來，變成一個小的個體。

代碼實現：

代碼情境為超市促銷，vip為5折，老客戶3折，普通顧客沒折，計算最後需要支付的金額。

沒有使用策略模式的情況：

function Price(personType, price) {
  //vip 5 折
  if (personType == 'vip') {
    return price * 0.5;
  }
  else if (personType == 'old'){ //老客户 3 折
    return price * 0.3;
  } else {
    return price; //其他都全价
  }
}

不足之處：不好的地方，當我有其他方面的折扣時，又或者我活動的折扣時經常變化的，這樣就要不斷的修改if..else裡面的條件了。而且也違背了設計模式的一個原則：對修改關閉，對擴展開放的原則；

使用策略模式之後：

// 对于vip客户
function vipPrice() {
  this.discount = 0.5;
}
vipPrice.prototype.getPrice = function(price) {
　　return price * this.discount;
}
// 对于老客户
function oldPrice() {
  this.discount = 0.3;
}
oldPrice.prototype.getPrice = function(price) {
  return price * this.discount;
}
// 对于普通客户
function Price() {
  this.discount = 1;
}
Price.prototype.getPrice = function(price) {
  return price ;
}
// 上下文，对于客户端的使用
function Context() {
  this.name = '';
  this.strategy = null;
  this.price = 0;
}
Context.prototype.set = function(name, strategy, price) {
  this.name = name;
  this.strategy = strategy;
  this.price = price;
}
Context.prototype.getResult = function() {
  console.log(this.name + ' 的结账价为: ' + this.strategy.getPrice(this.price));
}
var context = new Context();
var vip = new vipPrice();
context.set ('vip客户', vip, 200);
context.getResult();  // vip客户 的结账价为: 100
var old = new oldPrice();
context.set ('老客户', old, 200);
context.getResult(); // 老客户 的结账价为: 60
var Price = new Price();
context.set ('普通客户', Price, 200);
context.getResult(); // 普通客户 的结账价为: 200

透過策略模式，使得客戶的折扣與演算法解藕，又使得修改跟擴展能獨立的進行，不影到客戶端或其他演算法的使用；

使用場景：

策略模式最實用的場合就是某個「類別」中包含有大量的條件性語句，例如if...else 或switch。每一個條件分支都會引起該「類」的特定行為以不同的方式做出改變。以其維

護一段龐大的條件性語句，不如將每一個行為劃分為多個獨立的物件。每一個物件被稱為一個策略。設定多個這種策略對象，可以改善我們的程式碼質量，也更好的進行單元測試。

模板模式

定義了一個操作中的演算法的骨架，而將一些步驟延遲到子類別中。模板方法使得子類別可以不改變一個演算法的結構即可重定義該演算法的某些特定步驟。

通俗的講，就是將一些公共方法封裝到父類，子類別可以繼承這個父類，並且可以在子類別中重寫父類別的方法，從而實現自己的業務邏輯。

程式碼實現：

例如前端面試，基本上包括筆試，技術面試，領導面試，HR面試等，但是每個公司的筆試題，技術面可能不一樣，也可能一樣，一樣的就繼承父類別的方法，不一樣的就重寫父類別的方法

var Interview = function(){};
// 笔试
Interview.prototype.writtenTest = function(){
  console.log("这里是前端笔试题");
};
// 技术面试
Interview.prototype.technicalInterview = function(){
  console.log("这里是技术面试");
};
// 领导面试
Interview.prototype.leader = function(){
  console.log("领导面试");
};
// 领导面试
Interview.prototype.HR = function(){
  console.log("HR面试");
};
// 等通知
Interview.prototype.waitNotice = function(){
  console.log("等通知啊，不知道过了没有哦");
};
// 代码初始化
Interview.prototype.init = function(){
  this.writtenTest();
  this.technicalInterview();
  this.leader();
  this.HR();
  this.waitNotice();
};
// 阿里巴巴的笔试和技术面不同，重写父类方法，其他继承父类方法。
var AliInterview = function(){};
AliInterview.prototype = new Interview();
// 子类重写方法 实现自己的业务逻辑
AliInterview.prototype.writtenTest = function(){
  console.log("阿里的技术题就是难啊");
}
AliInterview.prototype.technicalInterview = function(){
  console.log("阿里的技术面就是叼啊");
}
var AliInterview = new AliInterview();
AliInterview.init();
// 阿里的技术题就是难啊
// 阿里的技术面就是叼啊
// 领导面试
// HR面试
// 等通知啊，不知道过了没有哦

應用場景：

模板模式主要應用在一些程式碼剛開要一次實作不變的部分。但是將來頁面有修改，需要更改業務邏輯的部分或重新新增業務的情況。主要是透過子類別來改寫父類別的情況，其他不需要改變的部分繼承父類別。

以上是javascript策略模式、模板模式使用場景和實作程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！