怎樣用Javascript實(shí)現(xiàn)策略模式
策略模式是JavaScript設(shè)計(jì)模式中行為型的設(shè)計(jì)模式；
定義：
定義一系列算法，并將這些算法各自封裝成策略類（方法），然后將不變的部分和變化的部分分離開(kāi)來(lái)，并且這些算法可以相互替換
白話解釋：
實(shí)際上所謂的策略模式就是指根據(jù)不同的策略來(lái)執(zhí)行不同的方法，是不是很類似與if-else分支判斷；但是策略模式是用來(lái)解決多重條件判斷語(yǔ)句的；
代碼實(shí)現(xiàn)需求：
年終將至，某公司決定提前發(fā)年終獎(jiǎng)，但是年終獎(jiǎng)的計(jì)算是有一定的規(guī)則的，年終獎(jiǎng)的多少跟績(jī)效考核密切相關(guān)；所以某公司的年終獎(jiǎng)方案是這樣的：
績(jī)效考核為S的員工，年終獎(jiǎng)是個(gè)人月工資的4倍；
績(jī)效考核為A的員工，年終獎(jiǎng)是個(gè)人月工資的3倍；
績(jī)效考核為B的員工，年終獎(jiǎng)是個(gè)人月工資的2倍；
看到這里讓你開(kāi)始編寫(xiě)程序，一般大部分的代碼是這樣的：
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)); //56000console.log(calculateBonus('A',10000)); //30000console.log(calculateBonus('B',5000)); //10000
上面的代碼用來(lái)解決當(dāng)前需求固然沒(méi)有問(wèn)題，但是在程序設(shè)計(jì)的角度來(lái)說(shuō)，上面的代碼是還有可以優(yōu)化的點(diǎn)的；因?yàn)樵摲椒ㄏ鄬?duì)來(lái)說(shuō)比較龐大，有很多的分支判斷，缺乏彈性；如果年終獎(jiǎng)方案改了，需要增加一個(gè)C方案呢？那是不是又得去方法里面加分支判斷呢？這就違反了開(kāi)放封閉原則；
優(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)); //56000console.log(calculateBonus('A',10000)); //30000console.log(calculateBonus('B',5000)); //10000
通過(guò)優(yōu)化上述代碼之后，上面就是用策略模式來(lái)進(jìn)行改造代碼的，我們可以看到我們定義了一個(gè)策略對(duì)象，然后calculateBonus根據(jù)用戶傳入的等級(jí)和工資即可算出年終獎(jiǎng)的金額，經(jīng)過(guò)改造之后，代碼的結(jié)構(gòu)變得更加簡(jiǎn)潔；
在web開(kāi)發(fā)中，登錄頁(yè)的注冊(cè)、登錄等功能都是需要進(jìn)行表單提交的；然而在提交的過(guò)程中肯定要進(jìn)行校驗(yàn)和篩選，不符合校驗(yàn)規(guī)則的將不能直接提交；在沒(méi)有學(xué)習(xí)設(shè)計(jì)模式之前我們的校驗(yàn)可能也是跟上面一樣都是多重if分支判斷，然后我們現(xiàn)在用策略模式來(lái)實(shí)現(xiàn)一個(gè)表單校驗(yà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' method='post'> 請(qǐng)輸入用戶名：<input type='text' name='userName'/ > 請(qǐng)輸入密碼：<input type='text' name='password'/ > 請(qǐng)輸入手機(jī)號(hào)碼：<input type='text' name='phoneNumber'/ > <button>提交</button></form></body><script>// 定義策略類算法校驗(yàn)規(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(){// 保存校驗(yàn)規(guī)則this.cache = []; }; //添加校驗(yàn)規(guī)則的方法 Validator.prototype.add = function( dom, rules ){var self = this;for ( var i = 0, rule; rule = rules[ i++ ]; ){ (function( rule ){//將校驗(yàn)規(guī)則對(duì)象中的strategy屬性的值進(jìn)行分割var strategyAry = rule.strategy.split( ’:’ );var errorMsg = rule.errorMsg;self.cache.push(function(){ //將校驗(yàn)規(guī)則對(duì)象中的strategy屬性的第一個(gè)值返回回來(lái)裝進(jìn)strategy中 var strategy = strategyAry.shift(); //組成參數(shù) strategyAry.unshift( dom.value ); //組裝參數(shù) strategyAry.push( errorMsg ); //找到策略對(duì)象執(zhí)行方法裝進(jìn)cache變量中 return strategies[ strategy ].apply( dom, strategyAry );});console.log(strategyAry); })( rule )} }; //開(kāi)始校驗(yàn)方法 Validator.prototype.start = function(){for ( var i = 0, validatorFunc; validatorFunc = this.cache[ i++ ]; ){ //循環(huán)cache執(zhí)行方法校驗(yàn) var errorMsg = validatorFunc(); //如果執(zhí)行策略對(duì)象方法中返回了errorMsg，就說(shuō)明方法已經(jīng)報(bào)錯(cuò)（沒(méi)有通過(guò)校驗(yàn)規(guī)則） if ( errorMsg ){return errorMsg; }} }; //調(diào)用校驗(yàn) var registerForm = document.getElementById( ’registerForm’ ); //定義方法可以自定義添加校驗(yàn)規(guī)則 var validataFunc = function(){//實(shí)例化對(duì)象var validator = new Validator();//自定義添加校驗(yàn)規(guī)則validator.add( registerForm.userName, [{ strategy: ’isNonEmpty’, errorMsg: ’用戶名不能為空’}, { strategy: ’minLength:6’, errorMsg: ’用戶名長(zhǎng)度不能小于10 位’}]);validator.add( registerForm.password, [{ strategy: ’minLength:6’, errorMsg: ’密碼長(zhǎng)度不能小于6 位’}]);//調(diào)用方法循環(huán)執(zhí)行校驗(yàn)var errorMsg = validator.start();return errorMsg; } //點(diǎn)擊提交按鈕（提交事件） registerForm.onsubmit = function(){//執(zhí)行上面自定義的校驗(yàn)方法var errorMsg = validataFunc();//如果errorMsg存在，即代表校驗(yàn)沒(méi)有通過(guò)if ( errorMsg ){ alert ( errorMsg ); return false;} };</script></html>
我們可以通過(guò)策略模式來(lái)解決表單校驗(yàn)大規(guī)模重復(fù)if-else判斷等問(wèn)題，上面的代碼注釋我已經(jīng)給的很詳細(xì)了，學(xué)習(xí)設(shè)計(jì)模式一定要去細(xì)品代碼，學(xué)習(xí)思路；反正策略模式的一個(gè)主要思路就是通過(guò)定義一系列的算法，然后傳入?yún)?shù)，根據(jù)不同的參數(shù)來(lái)執(zhí)行不同的算法規(guī)則；
總結(jié)優(yōu)點(diǎn)：
1、利用組合、委托和多態(tài)技術(shù)和思想，可以避免多重條件選擇語(yǔ)句；
2、將算法封裝在獨(dú)立的策略類里，使得易于切換，易于理解，易于擴(kuò)展；
3、策略模式可以復(fù)用在系統(tǒng)的其他地方，從而避免重復(fù)的復(fù)制粘貼工作；
缺點(diǎn)：
1、程序中會(huì)增加許多策略類或者策略對(duì)象；
2、使用策略類必須要對(duì)所有的策略類算法了解清楚，否則不知道怎么選擇。
以上就是JavaScript策略模式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript策略模式的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！
相關(guān)文章：
1. IntelliJ IDEA安裝插件的方法步驟2. 理解PHP5中static和const關(guān)鍵字3. php模擬實(shí)現(xiàn)斗地主發(fā)牌4. spring acegi security 1.0.0 發(fā)布5. Vue封裝一個(gè)TodoList的案例與瀏覽器本地緩存的應(yīng)用實(shí)現(xiàn)6. Vuex localStorage的具體使用7. jQuery 實(shí)現(xiàn)DOM元素拖拽交換位置的實(shí)例代碼8. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟9. vue 使用localstorage實(shí)現(xiàn)面包屑的操作10. MyBatis中的JdbcType映射使用詳解
網(wǎng)公網(wǎng)安備