怎樣用Javascript實現策略模式
概述
策略模式是javascript設計模式中行為型的設計模式；
定義：
定義一系列演算法，並將這些演算法各自封裝成策略類（方法），然後將不變的部分和變化的部分分離開來，並且這些演算法可以相互替換
白話解釋：
實際上所謂的策略模式就是指根據不同的策略來執行不同的方法，是不是很類似與if-else分支判斷；但是策略模式是用來解決多重條件判斷語句的；
程式碼實現
需求：
年終將至，某公司決定提前發年終獎，但是年終獎的計算是有一定的規則的，年終獎的多少跟績效考核密切相關；所以某公司的年終獎方案是這樣的：
績效考核為S的員工，年終獎是個人月工資的4倍；
績效考核為A的員工，年終獎是個人月工資的3倍；
績效考核為B的員工，年終獎是個人月工資的2倍；
看到這裡讓你開始編寫程式，一般大部分的程式碼是這樣的：
function calculateBonus(level,salary){
if(level === 'S'){
return salary*4;
}
if(level === 'A'){
return salary*3
}
if(level === 'B'){
return salary*2
}
}
console.log(calculateBonus("S",14000)); //56000
console.log(calculateBon
上面的程式碼用來解決當前需求固然沒有問題，但是在程式設計的角度來說，上面的程式碼是還有可以優化的點的；因為該方法相對來說比較龐大，有很多的分支判斷，缺乏彈性；如果年終獎方案改了，需要增加一個C方案呢？那是不是又得去方法裡面加分支判斷呢？這就違反了開放封閉原則；
優化：
var strategies = {
"S":function(salary){
return salary*4
},"A":function(salary){
return salary*3;
},"B":function(salary){
return salary*2
}
}
var calculateBonus =function(level,salary){
return strategies[level](salary);
}
console.log(calculateBonus("S",14000)); //56000
console.log(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000通過優化上述程式碼之後，上面就是用策略模式來進行改造程式碼的，我們可以看到我們定義了一個策略物件，然後calculateBonus根據使用者傳入的等級和工資即可算出年終獎的金額，經過改造之後，程式碼的結構變得更加簡潔；
在web開發中，登入頁的註冊、登入等功能都是需要進行表單提交的；然而在提交的過程中肯定要進行校驗和篩選，不符合校驗規則的將不能直接提交；在沒有學習設計模式之前我們的校驗可能也是跟上面一樣都是多重if分支判斷，然後我們現在用策略模式來實現一個表單校驗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
www.cppcns.com <meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<form action="http:// xxx.com/register" id="registerForm" method="post">
請輸入使用者名稱：<input type="text" name="userName"/ >
請輸入密碼：<input type="text" name="password"/ >
程式設計客棧請輸入手機號碼：<input type="text" name="phoneNumber"/ >
<button>提交</button>
</form>
</body>
<script>
// 定義策略類演算法校驗規則
var strategies = {
isNonEmpty: function( value,errorMsg ){
if ( value === '' ){
return errorMsg;
}
},minLength: function( value,length,errorMsg ){
if ( value.length < length ){
return errorMsg;
}
},isMobile: function( value,errorMsg ){
if ( !/(^1[3|5|8][0-9]{9}$)/.test( value ) ){
return errorMsg;
}
}
};
//Validator 類
var Validator = function(){
// 儲存校驗規則
this.cache = [];
};
//新增校驗規則的方法
Validator.prototype.add = function( dom,rulhttp://www.cppcns.comes ){
var self = this;
for ( var i = 0,rule; rule = rules[ i++ ]; ){
(function( rule ){
//將校驗規則物件中的strategy屬性的值進行分割
var strategyAry = rule.strategy.split( ':' );
var errorMsg = rule.errorMsg;
self.cache.push(function(){
//將校驗規則物件中的strategy屬性的第一個值返回回來裝進strategy中
var strategy = strategyAry.shift();
//組成引數
strategyAry.unshift( dom.value );
//組裝引數
strategyAry.push( errorMsg );
//找到策略物件執行方法裝進cache變數中
return strategies[ strategy ].apply( dom,strategyAry );
});
chttp://www.cppcns.comonsole.log(strategyAry);
})( rule )
}
};
//開始校驗方法
Validator.prototype.start = function(){
for ( var i = 0,validatorFunc; validatorFunc = this.cache[ i++ ]; ){
//迴圈cache執行方法校驗
var errorMsg = validatorFunc();
//如果執行策略物件方法中返回了errorMsg，就說明方法已經報錯（沒有通過校驗規則）
if ( errorMsg ){
return errorMsg;
}
}
};
//呼叫校驗
var registerForm = document.getElementById( 'registerForm' );
//定義方法可以自定義新增校驗規則
var validataFunc = function(){
//例項化物件
var validator = new Validator();
//自定義新增校驗規則
validator.add( registerForm.userName,[{
strategy: 'isNonEmpty',errorMsg: '使用者名稱不能為空'
},{
strategy: 'minLength:6',errorMsg: '使用者名稱長度不能小於10 位'
}]);
validator.add( registerForm.password,[{
strategy: 'minLength:6',errorMsg: '密碼長度不能小於6 位'
}]);
//呼叫方法迴圈執行校驗
var errorMsg = validator.start();
return errorMsg;
}
//點選提交按鈕（提交事件）
registerForm.onsubmit = function(){
//執行上面自定義的校驗方法
var errorMsg = validataFunc();
//如果errorMsg存在，即代表校驗沒有通過
if ( errorMsg ){
alert ( errorMsg );
return false;
}
};
</script>
</html>
我們可以通過策略模式來解決表單校驗大規模重複if-else判斷等問題，上面的程式碼註釋我已經給的很詳細了，學習設計模式一定要去細品程式碼，學習思路；反正策略模式的一個主要思路就是通過定義一系列的演算法，然後傳入引數，根據不同的引數來執行不同的演算法規則；
總結
優點：
1、利用組合、委託和多型技術和思想，可以避免多重條件選擇語句；
2、將演算法封裝在獨立的策略類裡，使得易於切換，易於理解，易於擴充套件；
3、策略模式可以複用在系統的其他地方，從而避免重複的複製貼上工作；
缺點：
1、程式中會增加許多策略類或者策略物件；
2、使用策略類必須要對所有的策略類演算法瞭解清楚，否則不知道怎麼選擇。
以上就是javaScript策略模式的詳細內容，更多關於JavaScript策略模式的資料請關注我們其它相關文章！