设计模式之策略模式

Posted caizhenbo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了设计模式之策略模式相关的知识，希望对你有一定的参考价值。

在web项目中，表单的验证和提交是我们经常开发的功能之一。下面我们来看一下一般情况下我们如何验证一个用户的注册。

需求：

注册需要用户名，密码，手机号码，邮箱

所有选项不能为空

密码要长度不能少于8位，并且不能全部为数字

手机号码要验证符合当前手机格式

邮箱也要验证格式

来看我们最直观的实现功能的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>策略模式</title>
  </head>
  <script type="text/javascript" src="index.js"></script>
  <body>
  <form id="registerform">
      <div>
          <label for="username">用户名</label>
          <input type="text" id="username" name="username">
      </div>
      <div>
          <label for="pwd">密码</label>
          <input type="password" id="pwd" name="pwd">
      </div>
      <div>
          <label for="tel">手机号码</label>
          <input type="text" id="tel" name="tel">
      </div>
      <div>
          <label for="email">邮箱</label>
          <input type="email" id="email" name="email">
      </div>
      <button id="submit-btn" type="button">注册</button>
  </form>
  </body>
  <script type="text/javascript" src="index.js"></script>
  <script type="text/javascript">
      var registerForm = document.querySelector(‘#registerform‘);
      document.getElementById(‘submit-btn‘).addEventListener(‘click‘, function(e){
          var username = registerForm.username.value,
              pwd = registerForm.pwd.value,
              tel = registerForm.tel.value,
              email = registerForm.email.value;
              if(username === ‘‘){
                  alert(‘用户名不能为空‘);
                  return false;
              }

              if(pwd === ‘‘){
                  alert(‘用户名密码不能为空‘);
                  return false;
              }

              if(pwd.length < 8){
                  alert(‘用户名密码必须超过8位数‘);
                  return false;
              }

              if(/^[0-9]*$/.test(pwd)){
                  alert(‘用户名密码不能全部为数字‘);
                  return false;
              }

              if(tel === ‘‘){
                  alert(‘手机号码不能为空‘);
                  return false;
              }

              if(!/^1(3|5|7|8|9)[0-9]{9}$/.test(tel)){
                  alert(‘输入的手机号码不正确，请重新输入‘);
                  return false;
              }

              if(email.length === ‘‘){
                  alert(‘邮箱不能为空‘);
                  return false;
              }

              if(!/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(email)){
                  alert(‘输入的邮箱不正确，请重新输入‘);
                  return false;
              }

          // 表单提交
          // $.ajax({
          //     url: ‘/path/to/file‘,
          //     type: ‘default GET (Other values: POST)‘,
          //     dataType: ‘default: Intelligent Guess (Other values: xml, json, script, or html)‘,
          //     data: {param1: ‘value1‘},
          // })
          // .done(function() {
          //     console.log("success");
          // })
          
      }, false)
  </script>
</html>

上面的代码，最直观完成了我们所需要的验证功能，没有任何上的逻辑错误。但是存在了很多问题。

　　最直观的是代码里面有很多条件判断语句，这些语句覆盖了所有的验证规则，验证规则的增加会使得判断语句越来越多，不方便代码的维护

　　算法的复用性差，可以看到里面验证输入不能为空的判断语句就写了4次。还有如果这时候另外一个表单也需要类似的验证，我们很可能将这段验证复制到另外的表单中。

　　函数缺乏弹性。如果增加了一种新的校验规则，或者想要把密码的长度校验从8改成6，我们都必须深入提交绑定的函数的内部实现，这是违反了开放-封闭原则的。

　　最后还有一点，我们提交的函数里面即包含了验证的功能，也包含了数据提交的功能，违反了单一职责的原则。

　　对于以上的弊端，我们可以采用设计模式中的策略模式来解决。

策略模式定义了算法家族，分别封装起来，让他们之间可以互相替换，此模式让算法的变化不会影响到使用算法的客户。

下面我们来看通过策略模式进行优化后的实现

var strategies = {
          isNonEmpty: function(value, errorMsg) {
              return value === ‘‘ ? errorMsg : ‘‘;
          },
          isMinLength: function(value, length, errorMsg) {
              return value.length < length ? errorMsg : ‘‘;
          },
          isFullNum: function(value, errorMsg) {
              return /^[0-9]*$/.test(value) ? errorMsg : ‘‘;
          },
          isMobile: function(value, errorMsg) {
              return !/^1(3|5|7|8|9)[0-9]{9}$/.test(tel) ? errorMsg : ‘‘;
          },
          isEmail: function(value, errorMsg) {
              return !/^\w+([+-.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(tel) ? errorMsg : ‘‘;
          }

      }

      /**策略管理类*/
      var Validator = function() {
          this.methods = [];
      }

      Validator.prototype.add = function(dom, rules) {
          var self = this;
          for (var i = 0, length = rules.length; i < length; ++i) {
              var rule = rules[i];
              (function(rule) {
                  self.methods.push(function() {
                      var strategyArry = rule[‘strategy‘].split(‘:‘),
                      errorMsg = rule[‘errorMsg‘];
                      var methodName = strategyArry.shift();
                      strategyArry.unshift(dom.value);
                      strategyArry.push(errorMsg);
                      return strategies[methodName].apply(dom, strategyArry);
                  })
              })(rule);
          }
      };

      Validator.prototype.start = function() {
          console.log(this.methods);
          for (var i = 0, length = this.methods.length; i < length; ++i) {
              var validatorFunc = this.methods[i];
              var errorMsg = validatorFunc();
              if (errorMsg) {
                  return errorMsg;
              }
          }
      }

      var registerForm = document.querySelector(‘#registerform‘);
      var registerValidator = new Validator();
      registerValidator.add(registerForm.username, [{
          ‘strategy‘: ‘isNonEmpty‘,
          ‘errorMsg‘: ‘用户名不能为空‘
      }])

      registerValidator.add(registerForm.pwd, [{
          ‘strategy‘: ‘isNonEmpty‘,
          ‘errorMsg‘: ‘密码不能为空‘
      }, {
          ‘strategy‘: ‘isMinLength:8‘,
          ‘errorMsg‘: ‘用户名密码必须超过8位数‘
      }])

      registerValidator.add(registerForm.tel, [{
          ‘strategy‘: ‘isNonEmpty‘,
          ‘errorMsg‘: ‘手机号不能为空‘
      }, {
          ‘strategy‘: ‘isMobile‘,
          ‘errorMsg‘: ‘请输入正确的手机号码‘
      }])

      registerValidator.add(registerForm.email, [{
          ‘strategy‘: ‘isNonEmpty‘,
          ‘errorMsg‘: ‘邮箱不能为空‘
      }, {
          ‘strategy‘: ‘isMobile‘,
          ‘errorMsg‘: ‘请输入正确的电子邮箱‘
      }])


      document.getElementById(‘submit-btn‘).addEventListener(‘click‘, function(e) {
          var errorMsg = registerValidator.start();
          if (errorMsg) {
              alert(errorMsg);
              return false;
          }
      }, false)

通过优化后的实现，我们代码就显得很清晰。

1、首先验证的具体算法和验证的过程分离了

2、验证策略变成了可配置，通过验证策略的组装可以完成不同的验证过程，大大提高了代码的可复用性

那么如何实现策略模式？实现策略模式需要需要以下3个步骤

需要一个策略对象

策略对象是由一组验证的算法组成的，上面strategies就是我们定义的策略对象

抽象策略角色

即编写一个策略管理类

策略管理类就是管理整个过程所需要的策略，比如上面的例子，Validator就是一个策略管理类，他收集了验证整个过程所需要的验证方法，最后提供接口调用收集到的所有方法

最后就是客户端调用方法，进行验证

好处：

策略模式定义了一系列算法，从概念上来说，所有的这些算法都是做相同的事情，只是实现不同，他可以以相同的方式调用所有的方法，减少了各种算法类与使用算法类之间的耦合。

从另外一个层面上来说，单独定义算法类，也方便了单元测试，因为可以通过自己的算法进行单独测试。

 

以上是关于设计模式之策略模式的主要内容，如果未能解决你的问题，请参考以下文章

java设计模式之策略模式

设计模式之策略模式

阿昌之丑陋代码优化通过策略模式&模版模式来优化Controller执行流程

设计模式之策略模式

设计模式之策略模式

Javascript设计模式总结之 -- 策略模式