策略模式是JavaScript設(shè)計模式中行為型的設(shè)計模式喳资；
定義：
定義一系列算法掉伏，并將這些算法各自封裝成策略類（方法）巩剖，然后將不變的部分和變化的部分分離開來适滓，并且這些算法可以相互替換
白話解釋：
實際上所謂的策略模式就是值根據(jù)不同的策略來執(zhí)行不同的方法敦迄，是不是很類似與if-else分支判斷；但是策略模式是用來解決多重條件判斷語句的；
使用場景：
需求：
年終將至罚屋，某公司決定提前發(fā)年終獎苦囱，但是年終獎的計算是有一定的規(guī)則的，年終獎的多少跟績效考核密切相關(guān)脾猛；所以某公司的年終獎方案是這樣的：
績效考核為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(calculateBonus("A",10000)); //30000
console.log(calculateBonus("B",5000)); //10000
上面的代碼用來解決當(dāng)前需求固然沒有問題，但是在程序設(shè)計的角度來說跛溉，上面的代碼是還有可以優(yōu)化的點(diǎn)的焊切；因為該方法相對來說比較龐大，有很多的分支判斷芳室，缺乏彈性专肪；如果年終獎方案改了，需要增加一個C方案呢堪侯？那是不是又得去方法里面加分支判斷呢嚎尤？這就違反了開放封閉原則；
優(yōu)化：
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
通過優(yōu)化上述代碼之后伍宦，上面就是用策略模式來進(jìn)行改造代碼的诺苹，我們可以看到我們定義了一個策略對象，然后calculateBonus根據(jù)用戶傳入的等級和工資即可算出年終獎的金額雹拄，經(jīng)過改造之后，代碼的結(jié)構(gòu)變得更加簡潔掌呜；
在web開發(fā)中滓玖，登錄頁的注冊、登錄等功能都是需要進(jìn)行表單提交的质蕉；然而在提交的過程中肯定要進(jìn)行校驗和篩選势篡，不符合校驗規(guī)則的將不能直接提交；在沒有學(xué)習(xí)設(shè)計模式之前我們的校驗可能也是跟上面一樣都是多重if分支判斷模暗，然后我們現(xiàn)在用策略模式來實現(xiàn)一個表單校驗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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"/ >
請輸入手機(jī)號碼：<input type="text" name="phoneNumber"/ >
<button>提交</button>
</form>
</body>
<script>
// 定義策略類算法校驗規(guī)則
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(){
// 保存校驗規(guī)則
this.cache = [];
};
//添加校驗規(guī)則的方法
Validator.prototype.add = function( dom, rules ){
var self = this;
for ( var i = 0, rule; rule = rules[ i++ ]; ){
(function( rule ){
//將校驗規(guī)則對象中的strategy屬性的值進(jìn)行分割
var strategyAry = rule.strategy.split( ':' );
var errorMsg = rule.errorMsg;
self.cache.push(function(){
//將校驗規(guī)則對象中的strategy屬性的第一個值返回回來裝進(jìn)strategy中
var strategy = strategyAry.shift();
//組成參數(shù)
strategyAry.unshift( dom.value );
//組裝參數(shù)
strategyAry.push( errorMsg );
//找到策略對象執(zhí)行方法裝進(jìn)cache變量中
return strategies[ strategy ].apply( dom, strategyAry );
});
console.log(strategyAry);
})( rule )
}
};
//開始校驗方法
Validator.prototype.start = function(){
for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){
//循環(huán)cache執(zhí)行方法校驗
var errorMsg = validatorFunc();
//如果執(zhí)行策略對象方法中返回了errorMsg禁悠，就說明方法已經(jīng)報錯（沒有通過校驗規(guī)則）
if ( errorMsg ){
return errorMsg;
}
}
};
//調(diào)用校驗
var registerForm = document.getElementById( 'registerForm' );
//定義方法可以自定義添加校驗規(guī)則
var validataFunc = function(){
//實例化對象
var validator = new Validator();
//自定義添加校驗規(guī)則
validator.add( registerForm.userName, [{
strategy: 'isNonEmpty',
errorMsg: '用戶名不能為空'
}, {
strategy: 'minLength:6',
errorMsg: '用戶名長度不能小于10 位'
}]);
validator.add( registerForm.password, [{
strategy: 'minLength:6',
errorMsg: '密碼長度不能小于6 位'
}]);
//調(diào)用方法循環(huán)執(zhí)行校驗
var errorMsg = validator.start();
return errorMsg;
}
//點(diǎn)擊提交按鈕（提交事件）
registerForm.onsubmit = function(){
//執(zhí)行上面自定義的校驗方法
var errorMsg = validataFunc();
//如果errorMsg存在，即代表校驗沒有通過
if ( errorMsg ){
alert ( errorMsg );
return false;
}
};
</script>
</html>
我們可以通過策略模式來解決表單校驗大規(guī)模重復(fù)if-else判斷等問題兑宇，上面的代碼注釋我已經(jīng)給的很詳細(xì)了碍侦，學(xué)習(xí)設(shè)計模式一定要去細(xì)品代碼，學(xué)習(xí)思路；反正策略模式的一個主要思路就是通過定義一系列的算法瓷产，然后傳入?yún)?shù)站玄，根據(jù)不同的參數(shù)來執(zhí)行不同的算法規(guī)則；
優(yōu)缺點(diǎn)：
優(yōu)點(diǎn)：
1濒旦、利用組合株旷、委托和多態(tài)技術(shù)和思想，可以避免多重條件選擇語句尔邓；
2晾剖、將算法封裝在獨(dú)立的策略類里，使得易于切換梯嗽，易于理解齿尽，易于擴(kuò)展；
3慷荔、策略模式可以復(fù)用在系統(tǒng)的其他地方雕什，從而避免重復(fù)的復(fù)制粘貼工作；
缺點(diǎn)：
1显晶、程序中會增加許多策略類或者策略對象贷岸；
2、使用策略類必須要對所有的策略類算法了解清楚磷雇，否則不知道怎么選擇偿警。
