設計模式前端應用——策略模式

1、基礎知識

一、定義：定義一系列算法，把它們一個個封裝起來，而且它們能夠相互替換

二、實際應用：減小if else的使用，在每種狀況執行不一樣代碼的狀況下，咱們一般使用if else語句來進行操做，使得當前函數代碼量龐大，修改麻煩，不靈活。

 

2、舉例

一、旅行採用的不一樣的交通工具，飛機，高鐵，動車，汽車，火車等等

二、根據績效發放年終獎金。績效分A B C等級，根據不一樣的等級發放多或少的獎金

三、form表單驗證。對每個輸入框進行驗證，能夠驗證是否爲空，最小長度，是否符合電話號碼，等等

 

3、策略模式的實現（以發放獎金和form表單驗證爲例）

一、發放獎金規則：績效得A的員工，將拿到本來工資*3倍的錢；績效得B的員工，將拿到本來工資*2倍的錢；績效得C的員工，將拿到本來工資*1.5倍的錢。

（1）咱們一般可能會這樣寫：

 1 <script type="text/javascript">
 2 function calcSalary(original, grade) { //original:本來的工資 grade:績效等級  3     var final;
 4     if(grade == "A") {
 5         final = original*3
 6     }else if(grade == "B") {
 7         final = original*2
 8     }else if(grade == "C") {
 9         final = original*1.5
10     }
11     return final
12 }
13 console.log(calcSalary(2000,'A')) // 6000 14 console.log(calcSalary(2000,'B')) //4000 15 console.log(calcSalary(2000,'C')) //3000 16 </script>

（2）使用策略模式重構代碼

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

 

咱們能夠觀察在計算績效獎金的過程當中，算法的使用方式是不變的，都是根據某個算法取得計算後的獎金數額。而算法的實現是各異和變化的，每種績效對應着不一樣的計算規則。一個基於策略模式的程序至少由兩部分組成，一組策略和一個調用環境。接下來看一下具體實現：

 1 <script type="text/javascript">
 2 var strategies = { //一組策略  3     "A": function(original) {
 4         return original*3
 5     },
 6     "B": function(original) {
 7         return original*2
 8     },
 9     "C": function(original) {
10         return original*1.5
11     }
12 }
13 function calcSalary(original, grade) { //調用環境 14     return strategies[grade](original)
15 }
16 console.log(calcSalary(2000,'A')) // 6000 17 console.log(calcSalary(2000,'B')) // 4000 18 console.log(calcSalary(2000,'C')) // 3000

 

二、form表單驗證：一個註冊表單，有用戶名和密碼，其中用戶名不能爲空，密碼長度要大於6位，當提交表單的時候對錶單作驗證。

（1）咱們一般可能會這樣寫：

 1 <form id="registerForm" class="form">
 2     <div class="form-item">
 3         <input type="text" name="username">
 4     </div>
 5     <div class="form-item">
 6         <input type="text" name="password">
 7     </div>
 8     <button type="submit">註冊</button>
 9 </form>
10 <script type="text/javascript">
11     var registerForm = document.getElementById('registerForm');
12     registerForm.onsubmit = function() {
13         console.log('submit')
14         if(registerForm.username.value == '') {
15             alert('用戶名不能爲空');
16             return false;
17         }else if(registerForm.password.value.length >= 6) {
21             alert('密碼不得小於6位')
22             return false;
23         }
24     }
25 </script>

（2）使用策略模式重構代碼

看了以前計算薪水的例子，可知第一步咱們要把全部的策略封裝起來：

 1 var strategies = {
 2     isNotEmpty: function(value, msg) {
 3         if(value === '') {
 4             return msg
 5         }
 6     },
 7     minLength: function(value, length, msg) {
 8         if(value.length < length) {
 9             return msg
10         }
11     }
12 }

第二步是建立調用策略的環境：由於須要判斷使用哪一種策略，以及使用這種策略是否須要傳參數值（例：minLength策略須要傳數值），因此咱們對解析和判斷的過程作一下封裝

 1 var Validator = function(){
 2         this.cache = []
 3     };
 4     Validator.prototype.add = function(dom, rule, msg) {
 5         var ruleKey = [];
 6         var ruleVal = ''
 7         if(rule.indexOf(':')!=-1) {
 8             ruleKey = rule.split(':')[0];
 9             ruleVal = rule.split(':')[1];
10         } else {
11             ruleKey = rule;
12         }
13         this.cache.push(function(){
14             var temp=[]
15             temp.push(dom.value)
16             if(ruleVal) {
17                 temp.push(ruleVal)
18             }
19             temp.push(msg)
20             return strategies[ruleKey].apply(dom, temp);
21         })
22     }
23     Validator.prototype.validate = function() {
24         var count = 0
25         this.cache.forEach(function(item){
26             var msg = item()
27             if(msg) {
28                 count++
29                 alert(msg)
30             }
31         })
32         if(count > 0) {
33             return false
34         } else {
35             return true
36         }
37     };

最後建立一個Validator實例，在表單提交事件中調用validate方法：

var test = new Validator()
test.add(registerForm.username, 'isNotEmpty', '用戶名不能爲空');
test.add(registerForm.password, 'minLength: 6','密碼至少6位');
registerForm.onsubmit = function() {
    if(!test.validate()) {
         return false;
    }
}

 

總結：最近在看《JavaScript設計模式與開發實踐》（做者曾探）一書，作一些筆記來加深印象，有不正確的地方歡迎指正~