JavaScript設計模式之策略模式詳解

更新時間：2017年06月09日 10:17:44 作者：Stinchan

這篇文章主要為大家詳細介紹了JavaScript設計模式之策略模式的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

在程序設計中，我們也常常遇到這種情況，要實現某一個功能我們有很多種算法可以實現。

這些算法靈活多樣，而且可以隨意互相替換。這種解決方案就是所謂的策略模式。

策略模式的定義是：定義一系列的算法，把它們一個個封裝起來，并且使它們可以相互替換。

/*
 * pre：策略模式
 * 示例：公司計算獎金，分A、B、C 三種績效，計算方式如下
 * 績效為A，獎金乘以系數5
 * 績效為B，獎金乘以系數4
 * 績效為C，獎金乘以系數3
 */
//-------- 示例1 ----------
var calculateBonus = function(performanceLevel, salary) {
 if(performanceLevel === 'A') {
  return salary * 5;
 }
 if(performanceLevel === 'B') {
  return salary * 4;
 }
 if(performanceLevel === 'C') {
  return salary * 3;
 }
};
console.log(calculateBonus('A', 2000));
/*
 缺點:1、函數體系龐大，擁有太多的if-else語句；
  2、如果增加績效D，需修改內部函數，違背封閉-開放原則；
  3、復用性差，其他地方如果用到計算獎金，只能賦值黏貼；
 */
//--------- 示例2 ------------
var performanceA = function(salary) {
 return salary * 5;
};
var performanceB = function(salary) {
 return salary * 4;
};
var performanceC = function(salary) {
 return salary * 3;
};
var calculateBonus = function(performanceLevel, salary) {
 if(performanceLevel === 'A') {
  return performanceA(salary);
 }
 if(performanceLevel === 'B') {
  return performanceB(salary);
 }
 if(performanceLevel === 'C') {
  return performanceC(salary);
 }
};
console.log(calculateBonus('A', 2000)); 
/*
 缺點：1、函數體系龐大，系統變化時缺乏彈性
 */
//--------- 示例3 ------------
// 策略模式重構：定義一系列算法，將它們一個個封裝起來。
var performanceA = function(){};
performanceA.prototype.caculate = function(salary){
 return salary * 5;
};
var performanceB = function(){};
performanceB.prototype.caculate = function(salary){
 return salary * 4;
};
var performanceC = function(){};
performanceC.prototype.caculate = function(salary){
 return salary * 3;
};

var Bonus = function(){
 this.salary = null;
 this.strategy = null;
};
Bonus.prototype.setSalary = function(salary){
 this.salary = salary;
};
Bonus.prototype.setStrategy = function(strategy){
 this.strategy = strategy;
}
Bonus.prototype.getBonus = function(){
 return this.strategy.caculate(this.salary);
}

var bonus = new Bonus();
bonus.setSalary(2000);
bonus.setStrategy(new performanceA());
console.log(bonus.getBonus());

// ----------- 示例4 ---------------
// javaScript版本
var Strategies = {
 "A":function(salary){
  return salary * 5;
 },
 "B":function(salary){
  return salary * 4;
 },
 "C":function(salary){
  return salary * 3;
 } 
};
var caculateBonus = function(level,salary){
 return Strategies[level](salary);
};
console.log(caculateBonus("A",2000));

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: