0
点赞
收藏
分享

微信扫一扫

策略模式讲解-》实例

鲤鱼打个滚 2021-09-24 阅读 57
随笔

《javascript设计模式与开发实践》
策略模式:定义一系列的算法,把他们一个个的封装起来,将不变的部分和变化的部分隔开是每个设计模式的主题,策略模式也不例外:目的策略模式的目的就是将算法的使用与算法的实现分离开来。

一个策略模式由两部分组成,第一部分是策略类,第二部分是环境类context

策略类写各种算法封装,
环境类进行逻辑的处理,执行算法

策略模式的优缺点:

优点:

  • 策略模式利用组合、委托和多态等技术和思想,可以有效地避免多重条件选择语句
  • 策略模式提供了对外开放 ——封闭原则的完美支持,将算法封装在独立的strategy(策略)中,使得他们易于切换,易于理解,易于扩展
  • 策略模式中的算法也可以复用在系统的其它地方,从而避免许多重复的复制粘贴工作
  • 在策略模式中利用组合和委托来让context拥有执行算法的能力,这也是继承的一种更轻便的替代方案

缺点

  • 增加许多策略类或这策略对象,但实际上比他们负责的逻辑堆砌在context中要好
  • 要使用策略模式,必须了解所有的strategy,必须了解各个strategy之间的不同点,这样才能选择一个合适的strategy

验证表单

简单的实现:


<html>

<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名:<input type="text" name="userName" />
    请输入密码:<input type="text" name="password" />

    请输入手机号码:<input type="text" name="phoneNumber" />
    <button>提交</button>
  </form>
  <script>
    var registerForm = document.getElementById('registerForm');
    registerForm.onsubmit = function () {
      if (registerForm.userName.value === '') {
        alert('用户名不能为空');
        return false;
      }
      if (registerForm.password.value.length < 6) {
        alert('密码长度不能少于6 位');
        return false;
      }
      if (!/(^1[3|5|8][0-9]{9}$)/.test(registerForm.phoneNumber.value)) {
        alert('手机号码格式不正确');
        return false;
      }
    }
  </script>
</body>

</html>

策略模式更改


<html>

<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名:<input type="text" name="userName" />
    请输入密码:<input type="text" name="password" />

    请输入手机号码:<input type="text" name="phoneNumber" />
    <button>提交</button>
  </form>
  <script>
    var strategies = {
      isNonEmpty: function (value, errorMsg) { // 不为空
        if (value === '') {
          return errorMsg;
        }
      },
      minLength: function (value, length, errorMsg) { // 限制最小长度
        if (value.length < length) {
          return errorMsg;
        }
      },
      isMobile: function (value, errorMsg) { // 手机号码格式
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
          return errorMsg;
        }
      }
    };

    var validataFunc = function () {
      var validator = new Validator(); // 创建一个validator 对象
      /***************添加一些校验规则****************/
      validator.add(registerForm.userName, 'isNonEmpty', '用户名不能为空');
      validator.add(registerForm.password, 'minLength:6', '密码长度不能少于6 位');
      validator.add(registerForm.phoneNumber, 'isMobile', '手机号码格式不正确');
      var errorMsg = validator.start(); // 获得校验结果
      return errorMsg; // 返回校验结果
    }

    var registerForm = document.getElementById('registerForm');
    registerForm.onsubmit = function () {
      var errorMsg = validataFunc(); // 如果errorMsg 有确切的返回值,说明未通过校验
      if (errorMsg) {
        alert(errorMsg);
        return false; // 阻止表单提交
      }
    };

    var Validator = function () {
      this.cache = []; // 保存校验规则
    };

    Validator.prototype.add = function (dom, rule, errorMsg) {
      var ary = rule.split(':'); // 把strategy 和参数分开
      this.cache.push(function () { // 把校验的步骤用空函数包装起来,并且放入cache
        var strategy = ary.shift(); // 用户挑选的strategy
        ary.unshift(dom.value); // 把input 的value 添加进参数列表
        ary.push(errorMsg); // 把errorMsg 添加进参数列表
将strategies[strategy]的方法属性绑定到dom对象上,然后ary作为参数传递进去,
        return strategies[strategy].apply(dom, ary);
      });
    };

    Validator.prototype.start = function () {
      for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
        var msg = validatorFunc(); // 开始校验,并取得校验后的返回信息
        if (msg) { // 如果有确切的返回值,说明校验没有通过
          return msg;
        }
      }
    };
  </script>
</body>

</html>

以上只能一个输入框针对一个正则
再次改进,可以一个输入框对应多个正则校验

<html>

<body>
  <form action="http:// xxx.com/register" id="registerForm" method="post">
    请输入用户名:<input type="text" name="userName" />
    请输入密码:<input type="text" name="password" />

    请输入手机号码:<input type="text" name="phoneNumber" />
    <button>提交</button>
  </form>
  <script>
    /***********************策略对象**************************/
    var strategies = {
      isNonEmpty: function (value, errorMsg) {
        if (value === '') {
          return errorMsg;
        }
      },
      minLength: function (value, length, errorMsg) {
        if (value.length < length) {
          return errorMsg;
        }
      },
      isMobile: function (value, errorMsg) {
        if (!/(^1[3|5|8][0-9]{9}$)/.test(value)) {
          return errorMsg;
        }
      }
    };
    /***********************Validator 类**************************/
    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: 'isNonEmpty',
        errorMsg: '用户名不能为空'
      }, {
        strategy: 'minLength:6',
        errorMsg: '用户名长度不能小于10 位'
      }]);
      validator.add(registerForm.password, [{
        strategy: 'minLength:6',
        errorMsg: '密码长度不能小于6 位'
      }]);
      var errorMsg = validator.start();
      return errorMsg;
    }
    registerForm.onsubmit = function () {
      var errorMsg = validataFunc();
      if (errorMsg) {
        alert(errorMsg);
        return false;
      }

    };
  </script>
</body>

</html>
举报

相关推荐

0 条评论