JS設計模式六：策略模式

這裏有一份簡潔的前端知識體系等待你查收，看看吧，會有驚喜哦~若是以爲不錯，懇求star哈~

策略模式簡述

策略模式定義一系列的算法，把它們一個個封裝起來，而且使它們能夠相互替換。

策略模式的優勢： 1、策略模式能夠有效避免不少if條件語句 2、策略模式符合開放-封閉原則，使代碼更容易理解和擴展 3、策略模式中的代碼能夠複用

實戰一

以公司年終獎爲例： 1、績效爲A的人，年終獎爲工資的4倍 2、績效爲B的人，年終獎爲工資的3倍 3、績效爲C的人，年終獎爲工資的2倍

傳統的解決方案

var calculateBouns = function(salary,level) {
    if(level === 'A') {
        return salary * 4;
    }
    if(level === 'B') {
        return salary * 3;
    }
    if(level === 'C') {
        return salary * 2;
    }
};
// 調用以下：
console.log(calculateBouns(4000,'A')); // 16000
console.log(calculateBouns(2500,'B')); // 7500
複製代碼

如上代碼，存在的缺陷有： 1、calculateBouns 函數包含了不少if-else語句。 2、calculateBouns 函數缺少彈性，假如還有D等級的話，那麼咱們須要在calculateBouns 函數內添加判斷等級D的if語句； 3、算法複用性差，若是在其餘的地方也有相似這樣的算法的話，可是規則不同，咱們這些代碼不能通用。

使用組合函數重構代碼

var performanceA = function(salary) {
    return salary * 4;
};
var performanceB = function(salary) {
    return salary * 3;
};
        
var performanceC = function(salary) {
    return salary * 2
};
var calculateBouns = function(level,salary) {
    if(level === 'A') {
        return performanceA(salary);
    }
    if(level === 'B') {
        return performanceB(salary);
    }
    if(level === 'C') {
        return performanceC(salary);
    }
};
// 調用以下
console.log(calculateBouns('A',4500)); // 18000
複製代碼

代碼看起來有點改善，可是仍是有以下缺點：calculateBouns 函數有可能會愈來愈大，好比增長D等級的時候，並且缺少彈性。

使用策略模式重構代碼

策略模式指的是定義一系列的算法，把它們一個個封裝起來，將不變的部分和變化的部分隔開，實際就是將算法的使用和實現分離出來。

一個基於策略模式的程序至少由2部分組成，第一個部分是一組策略類，策略類封裝了具體的算法，並負責具體的計算過程。第二個部分是環境類Context，該Context接收客戶端的請求，隨後把請求委託給某一個策略類。

var obj = {
        "A": function(salary) {
            return salary * 4;
        },
        "B" : function(salary) {
            return salary * 3;
        },
        "C" : function(salary) {
            return salary * 2;
        } 
};
var calculateBouns =function(level,salary) {
    return obj[level](salary);
};
console.log(calculateBouns('A',10000)); // 40000
複製代碼

實戰二

表單檢驗是很是常見的功能。由於涉及到大量的驗證規則，使用策略模式會很是便利。 代碼以下，關鍵是領會精神，實現細節不細說~~~

// 策略對象
var strategys = {
    isNotEmpty: function(value,errorMsg) {
        if(value === '') {
            return errorMsg;
        }
    },
    // 限制最小長度
    minLength: function(value,length,errorMsg) {
        if(value.length < length) {
            return errorMsg;
        }
    },
    // 手機號碼格式
    mobileFormat: function(value,errorMsg) {
        if(!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
            return errorMsg;
        }
    } 
};
var Validator = function(){
    this.cache = [];  // 保存效驗規則
};
Validator.prototype.add = function(dom,rules) {
    var self = this;
    for(var i = 0, rule; rule = rules[i++]; ){
        (function(rule){
            var strategyAry = rule.strategy.split(":");
            var errorMsg = rule.errorMsg;
            self.cache.push(function(){
                var strategy = strategyAry.shift();
                strategyAry.unshift(dom.value);
                strategyAry.push(errorMsg);
                return strategys[strategy].apply(dom,strategyAry);
            });
        })(rule);
    }
};
Validator.prototype.start = function(){
    for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) {
    var msg = validatorFunc(); // 開始效驗 並取得效驗後的返回信息
    if(msg) {
        return msg;
    }
    }
};
// 代碼調用
var registerForm = document.getElementById("registerForm");
var validateFunc = function(){
    var validator = new Validator(); // 建立一個Validator對象
    /* 添加一些效驗規則 */
    validator.add(registerForm.userName,[
        {strategy: 'isNotEmpty',errorMsg:'用戶名不能爲空'},
        {strategy: 'minLength:6',errorMsg:'用戶名長度不能小於6位'}
    ]);
    validator.add(registerForm.password,[
        {strategy: 'minLength:6',errorMsg:'密碼長度不能小於6位'},
    ]);
    validator.add(registerForm.phoneNumber,[
        {strategy: 'mobileFormat',errorMsg:'手機號格式不正確'},
    ]);
    var errorMsg = validator.start(); // 得到效驗結果
    return errorMsg; // 返回效驗結果
};
// 點擊肯定提交
registerForm.onsubmit = function(){
    var errorMsg = validateFunc();
    if(errorMsg){
        alert(errorMsg);
        return false;
    }
}
複製代碼