[[433203]]

一、策略模式是什么

策略模式(Strategy Pattern)指的是定義一系列的算法，把它們一個個封裝起來，目的就是將算法的使用與算法的實現分離開來

一個基于策略模式的程序至少由兩部分組成：

策略類，策略類封裝了具體的算法，并負責具體的計算過程

環境類Context，Context 接受客戶的請求，隨后 把請求委托給某一個策略類

二、使用

舉個例子，公司的年終獎是根據員工的工資和績效來考核的，績效為A的人，年終獎為工資的4倍，績效為B的人，年終獎為工資的3倍，績效為C的人，年終獎為工資的2倍

若使用if來實現，代碼則如下：

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 

從上述可有看到，函數內部包含過多if...else，并且后續改正的時候，需要在函數內部添加邏輯，違反了開放封閉原則

而如果使用策略模式，就是先定義一系列算法，把它們一個個封裝起來，將不變的部分和變化的部分隔開，如下：

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 

上述代碼中，obj對應的是策略類，而calculateBouns對應上下通信類

又比如實現一個表單校驗的代碼，常常會像如下寫法：

var registerForm = document.getElementById("registerForm"); 
registerForm.onsubmit = function(){ 
    if(registerForm.userName.value === '') { 
        alert('用戶名不能為空'); 
        return; 
    } 
    if(registerForm.password.value.length < 6) { 
        alert("密碼的長度不能小于6位"); 
        return; 
    } 
    if(!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) { 
        alert("手機號碼格式不正確"); 
        return; 
    } 
} 

上述代碼包含多處if語句，并且違反了開放封閉原則，如果應用中還有其他的表單，需要重復編寫代碼

此處也可以使用策略模式進行重構校驗，第一步確定不變的內容，即策略規則對象，如下：

var strategy = { 
    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; 
        } 
    }  
}; 

然后找出變的地方，作為環境類context，負責接收用戶的要求并委托給策略規則對象，如下Validator類：

var Validator = function(){ 
        this.cache = [];  // 保存效驗規則 
}; 
Validator.prototype.add = function(dom,rule,errorMsg) { 
    var str = rule.split(":"); 
    this.cache.push(function(){ 
        // str 返回的是 minLength:6  
        var strategy = str.shift(); 
        str.unshift(dom.value); // 把input的value添加進參數列表 
        str.push(errorMsg);  // 把errorMsg添加進參數列表 
        return strategys[strategy].apply(dom,str); 
    }); 
}; 
Validator.prototype.start = function(){ 
    for(var i = 0, validatorFunc; validatorFunc = this.cache[i++]; ) { 
        var msg = validatorFunc(); // 開始效驗 并取得效驗后的返回信息 
        if(msg) { 
            return msg; 
        } 
    } 
}; 

通過validator.add方法添加校驗規則和錯誤信息提示，使用如下：

var validateFunc = function(){ 
    var validator = new Validator(); // 創建一個Validator對象 
    /* 添加一些效驗規則 */ 
    validator.add(registerForm.userName,'isNotEmpty','用戶名不能為空'); 
    validator.add(registerForm.password,'minLength:6','密碼長度不能小于6位'); 
    validator.add(registerForm.userName,'mobileFormat','手機號碼格式不正確'); 
 
    var errorMsg = validator.start(); // 獲得效驗結果 
    return errorMsg; // 返回效驗結果 
}; 
var registerForm = document.getElementById("registerForm"); 
registerForm.onsubmit = function(){ 
    var errorMsg = validateFunc(); 
    if(errorMsg){ 
        alert(errorMsg); 
        return false; 
    } 
} 

上述通過策略模式完成表單的驗證，并且可以隨時調用，在修改表單驗證規則的時候，也非常方便，通過傳遞參數即可調用

三、應用場景

從上面可以看到，使用策略模式的優點有如下：

• 策略模式利用組合，委托等技術和思想，有效的避免很多if條件語句
• 策略模式提供了開放-封閉原則，使代碼更容易理解和擴展
• 策略模式中的代碼可以復用

策略模式不僅僅用來封裝算法，在實際開發中，通常會把算法的含義擴散開來，使策略模式也可以用來封裝 一系列的“業務規則”

只要這些業務規則指向的目標一致，并且可以被替換使用，我們就可以用策略模式來封裝它們

參考文獻

https://segmentfault.com/a/1190000021883055

https://juejin.cn/post/6844903504109109262 

https://juejin.cn/post/6844903751225081864