JavaScript設計模式之策略模式的示例分析

小編給大家分享一下JavaScript設計模式之策略模式的示例分析，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

JavaScript是什么

JavaScript是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，JavaScript是被廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。

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

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

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

/*
 * 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));

看完了這篇文章，相信你對“JavaScript設計模式之策略模式的示例分析”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！