JavaScript設計模式——策略模式

時間 2019-11-09

標籤 javascript 設計模式策略欄目 JavaScript 简体版

原文原文鏈接

　　策略模式是JavaScript設計模式中行爲型的設計模式；html

　　定義：web

定義一系列算法，並將這些算法各自封裝成策略類（方法），而後將不變的部分和變化的部分分離開來，而且這些算法能夠相互替換算法

　　白話解釋：
設計模式

　　　實際上所謂的策略模式就是指根據不一樣的策略來執行不一樣的方法，是否是很相似與if-else分支判斷；可是策略模式是用來解決多重條件判斷語句的；app

　　 使用場景：dom

　　　　需求：post

　　　　年終將至，某公司決定提早發年終獎，可是年終獎的計算是有必定的規則的，年終獎的多少跟績效考覈密切相關；因此某公司的年終獎方案是這樣的：學習

　　　　績效考覈爲S的員工，年終獎是我的月工資的4倍；優化

　　　　績效考覈爲A的員工，年終獎是我的月工資的3倍；ui

　　　　績效考覈爲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

上面的代碼用來解決當前需求當然沒有問題，可是在程序設計的角度來講，上面的代碼是還有能夠優化的點的；由於該方法相對來講比較龐大，有不少的分支判斷，缺少彈性；若是年終獎方案改了，須要增長一個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">
    <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, rules ){
        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 );
                });
                console.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>