• 策略模式可以有效避免多重条件选择语句。
    • 策略模式提供了对开放-封装原则的完美支持，将方法封装在独立的strategy中，使得它们易于切换，易于理解，易于扩展。
    • 复用性高

    策略模式也有一些缺点

    • 增加了许多策略类或者策略对象。
    • 要使用策略模式，必须了解所有的strategy，违反了最少知识原则

    用策略模式重构表单校验

    1. <html>
    2. <head>
    3.     <title>策略模式-校验表单</title>
    4.     <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    5. </head>
    6. <body>
    7.     <form id = "registerForm" method="post" action="http://xxxx.com/api/register">
    8.         用户名：<input type="text" name="userName">
    9.         密码：<input type="text" name="password">
    10.         手机号码：<input type="text" name="phoneNumber">
    11.         <button type="submit">提交</button>
    12.     </form>
    13.     <script type="text/javascript">
    14.         // 策略对象
    15.         var strategies = {
    16.             isNoEmpty: function (value, errorMsg) {
    17.                 if (value === '') {
    18.                     return errorMsg;
    19.                 }
    20.             },
    21.             isNoSpace: function (value, errorMsg) {
    22.                 if (value.trim() === '') {
    23.                     return errorMsg;
    24.                 }
    25.             },
    26.             minLength: function (value, length, errorMsg) {
    27.                 if (value.trim().length < length) {
    28.                     return errorMsg;
    29.                 }
    30.             },
    31.             maxLength: function (value, length, errorMsg) {
    32.                 if (value.length > length) {
    33.                     return errorMsg;
    34.                 }
    35.             },
    36.             isMobile: function (value, errorMsg) {
    37.                 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)) {
    38.                     return errorMsg;
    39.                 }                
    40.             }
    41.         }
    43.         // 验证类
    44.         var Validator = function() {
    45.             this.cache = [];
    46.         }
    47.         Validator.prototype.add = function(dom, rules) {
    48.             var self = this;
    49.             for(var i = 0, rule; rule = rules[i++];) {
    50.                 (function(rule) {
    51.                    var strategyAry = rule.strategy.split(':');
    52.                    var errorMsg = rule.errorMsg;
    53.                    self.cache.push(function() {
    54.                     var strategy = strategyAry.shift();
    55.                     strategyAry.unshift(dom.value);
    56.                     strategyAry.push(errorMsg);
    57.                     return strategies[strategy].apply(dom, strategyAry);
    58.                    })
    59.                 })(rule)
    60.             }
    61.         };
    62.         Validator.prototype.start = function() {
    63.             for(var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
    64.                 var errorMsg = validatorFunc();
    65.                 if (errorMsg) {
    66.                     return errorMsg;
    67.                 }
    68.             }
    69.         };
    71.         // 调用代码
    72.         var registerForm = document.getElementById('registerForm');
    74.         var validataFunc = function() {
    75.             var validator = new Validator();
    76.             validator.add(registerForm.userName, [{
    77.                 strategy: 'isNoEmpty',
    78.                 errorMsg: '用户名不可为空'
    79.             }, {
    80.                 strategy: 'isNoSpace',
    81.                 errorMsg: '不允许以空白字符命名'
    82.             }, {
    83.                 strategy: 'minLength:2',
    84.                 errorMsg: '用户名长度不能小于2位'
    85.             }]);
    86.             validator.add(registerForm.password, [ {
    87.                 strategy: 'minLength:6',
    88.                 errorMsg: '密码长度不能小于6位'
    89.             }]);
    90.             validator.add(registerForm.phoneNumber, [{
    91.                 strategy: 'isMobile',
    92.                 errorMsg: '请输入正确的手机号码格式'
    93.             }]);
    94.             var errorMsg = validator.start();
    95.             return errorMsg;
    96.         }
    98.         registerForm.onsubmit = function() {
    99.             var errorMsg = validataFunc();
    100.             if (errorMsg) {
    101.                 alert(errorMsg);
    102.                 return false;
    103.             }
    104.         }
    105.     </script>
    106. </body>
    107. </html>