怎樣用Javascript實(shí)現(xiàn)策略模式

更新時(shí)間：2021年04月26日 09:00:02 作者：有夢想的咸魚前端

這篇文章主要介紹了JavaScript設(shè)計(jì)模式之策略模式，想學(xué)習(xí)設(shè)計(jì)模式的同學(xué)，一定要看一下

概述

策略模式是JavaScript設(shè)計(jì)模式中行為型的設(shè)計(jì)模式；

定義：

定義一系列算法，并將這些算法各自封裝成策略類（方法），然后將不變的部分和變化的部分分離開來，并且這些算法可以相互替換

白話解釋：

實(shí)際上所謂的策略模式就是指根據(jù)不同的策略來執(zhí)行不同的方法，是不是很類似與if-else分支判斷；但是策略模式是用來解決多重條件判斷語句的；

代碼實(shí)現(xiàn)

需求：

年終將至，某公司決定提前發(fā)年終獎(jiǎng)，但是年終獎(jiǎng)的計(jì)算是有一定的規(guī)則的，年終獎(jiǎng)的多少跟績效考核密切相關(guān)；所以某公司的年終獎(jiǎng)方案是這樣的：

績效考核為S的員工，年終獎(jiǎng)是個(gè)人月工資的4倍；

績效考核為A的員工，年終獎(jiǎng)是個(gè)人月工資的3倍；

績效考核為B的員工，年終獎(jiǎng)是個(gè)人月工資的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è)計(jì)的角度來說，上面的代碼是還有可以優(yōu)化的點(diǎn)的；因?yàn)樵摲椒ㄏ鄬碚f比較龐大，有很多的分支判斷，缺乏彈性；如果年終獎(jiǎng)方案改了，需要增加一個(gè)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)行改造代碼的，我們可以看到我們定義了一個(gè)策略對象，然后calculateBonus根據(jù)用戶傳入的等級和工資即可算出年終獎(jiǎng)的金額，經(jīng)過改造之后，代碼的結(jié)構(gòu)變得更加簡潔；

在web開發(fā)中，登錄頁的注冊、登錄等功能都是需要進(jìn)行表單提交的；然而在提交的過程中肯定要進(jìn)行校驗(yàn)和篩選，不符合校驗(yàn)規(guī)則的將不能直接提交；在沒有學(xué)習(xí)設(shè)計(jì)模式之前我們的校驗(yàn)可能也是跟上面一樣都是多重if分支判斷，然后我們現(xiàn)在用策略模式來實(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" 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>
        // 定義策略類算法校驗(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ī)則對象中的strategy屬性的值進(jìn)行分割
                var strategyAry = rule.strategy.split( ':' );
                var errorMsg = rule.errorMsg;
                self.cache.push(function(){
                    //將校驗(yàn)規(guī)則對象中的strategy屬性的第一個(gè)值返回回來裝進(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 )
        }
    };
    //開始校驗(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í)行策略對象方法中返回了errorMsg，就說明方法已經(jīng)報(bào)錯(cuò)（沒有通過校驗(yàn)規(guī)則）
            if ( errorMsg ){
                return errorMsg;
            }
        }
    };

    //調(diào)用校驗(yàn)
    var registerForm = document.getElementById( 'registerForm' );
    //定義方法可以自定義添加校驗(yàn)規(guī)則
    var validataFunc = function(){
        //實(shí)例化對象
        var validator = new Validator();
        //自定義添加校驗(yàn)規(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í)行校驗(yàn)
        var errorMsg = validator.start();
        return errorMsg;
    }
    //點(diǎn)擊提交按鈕（提交事件）
    registerForm.onsubmit = function(){
        //執(zhí)行上面自定義的校驗(yàn)方法
        var errorMsg = validataFunc();
        //如果errorMsg存在，即代表校驗(yàn)沒有通過
        if ( errorMsg ){
            alert ( errorMsg );
            return false;
        }

    };
</script>
</html>

我們可以通過策略模式來解決表單校驗(yàn)大規(guī)模重復(fù)if-else判斷等問題，上面的代碼注釋我已經(jīng)給的很詳細(xì)了，學(xué)習(xí)設(shè)計(jì)模式一定要去細(xì)品代碼，學(xué)習(xí)思路；反正策略模式的一個(gè)主要思路就是通過定義一系列的算法，然后傳入?yún)?shù)，根據(jù)不同的參數(shù)來執(zhí)行不同的算法規(guī)則；