JavaScript設計模式之策略模式

時間 2019-11-07

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

原文原文鏈接

《JavaScript設計模式與開發實踐》讀書筆記。這本書挺好的，推薦。javascript

俗話說，條條大路通羅馬。在現實生活中，咱們能夠採用不少方法實現同一個目標。好比咱們先定個小目標，先掙它一個億。咱們能夠根據具體的實際狀況來完成這個目標。html

若是你是個富二代，能夠接手家族生意，分分鐘掙它一個億。前端
若是你是個官二代，能夠......（你懂的）。java
若是你是個屌絲，能夠......別作夢了，好好擼碼。算法

策略模式的定義segmentfault

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

舉個例子：表單校驗api

在一個Web項目中，註冊、登陸等功能的實現都離不開表單提交。表單校驗也是前端經常須要作的事。假設咱們正在編寫一個註冊的頁面，在點擊提交按鈕以前，有以下幾條校驗邏輯:app

用戶名不可爲空，不容許以空白字符命名，用戶名長度不能小於2位。dom
密碼長度不能小於6位。
正確的手機號碼格式。

也許，一開始咱們會這麼寫：

<html>
<head>
    <title>策略模式-校驗表單</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
    <form id = "registerForm" method="post" action="http://xxxx.com/api/register">
        用戶名：<input type="text" name="userName">
        密碼：<input type="text" name="password">
        手機號碼：<input type="text" name="phoneNumber">
        <button type="submit">提交</button>
    </form>
    <script type="text/javascript">
       var registerForm = document.getElementById('registerForm');
       registerForm.onsubmit = function() {
           if (registerForm.userName.value === '') {
               alert('用戶名不可爲空');
               return false;
           }
           if (registerForm.userName.value === '') {
               alert('用戶名不可爲空');
               return false;
           } 
           if (registerForm.userName.value.trim() === '') {
               alert('用戶名不容許以空白字符命名');
               return false;
           } 
           if (registerForm.userName.value.trim().length < 2) {
               alert('用戶名用戶名長度不能小於2位');
               return false;
           } 
           if (registerForm.password.value.trim().length < 6) {
               alert('密碼長度不能小於6位');
               return false;
           }
           if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(registerForm.phoneNumber.value)) {
               alert('請輸入正確的手機號碼格式');
               return errorMsg;
             } 
       }
    </script>
</body>
</html>

這是一種很常見的編碼方式，但它有很明顯的缺點：

registerForm.onsubmit 函數比較龐大，包含了不少if語句，這些語句要覆蓋全部的校驗規則。
若校驗規則有變，不得不深刻到registerForm.onsubmit 函數的內部實現，違反開放-封閉原則。
算法的複用性差。

下面，讓咱們來用策略模式重構表單校驗

策略模式：表單校驗

<html>
<head>
    <title>策略模式-校驗表單</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
    <form id = "registerForm" method="post" action="http://xxxx.com/api/register">
        用戶名：<input type="text" name="userName">
        密碼：<input type="text" name="password">
        手機號碼：<input type="text" name="phoneNumber">
        <button type="submit">提交</button>
    </form>
    <script type="text/javascript">
        // 策略對象
        var strategies = {
            isNoEmpty: function (value, errorMsg) {
                if (value === '') {
                    return errorMsg;
                }
            },
            isNoSpace: function (value, errorMsg) {
                if (value.trim() === '') {
                    return errorMsg;
                }
            },
            minLength: function (value, length, errorMsg) {
                if (value.trim().length < length) {
                    return errorMsg;
                }
            },
            maxLength: function (value, length, errorMsg) {
                if (value.length > length) {
                    return errorMsg;
                }
            },
            isMobile: function (value, errorMsg) {
                if (!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|17[7]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.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 strategies[strategy].apply(dom, strategyAry);
                   })
                })(rule)
            }
        };
        Validator.prototype.start = function() {
            for(var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
                var errorMsg = validatorFunc();
                if (errorMsg) {
                    return errorMsg;
                }
            }
        };

        // 調用代碼
        var registerForm = document.getElementById('registerForm');

        var validataFunc = function() {
            var validator = new Validator();
            validator.add(registerForm.userName, [{
                strategy: 'isNoEmpty',
                errorMsg: '用戶名不可爲空'
            }, {
                strategy: 'isNoSpace',
                errorMsg: '不容許以空白字符命名'
            }, {
                strategy: 'minLength:2',
                errorMsg: '用戶名長度不能小於2位'
            }]);
            validator.add(registerForm.password, [ {
                strategy: 'minLength:6',
                errorMsg: '密碼長度不能小於6位'
            }]);
            validator.add(registerForm.phoneNumber, [{
                strategy: 'isMobile',
                errorMsg: '請輸入正確的手機號碼格式'
            }]);
            var errorMsg = validator.start();
            return errorMsg;
        }

        registerForm.onsubmit = function() {
            var errorMsg = validataFunc();
            if (errorMsg) {
                alert(errorMsg);
                return false;
            }
        }
    </script>
</body>
</html>