策略模式及在表单验证中的应用

izhuhaodev 发布于2019-08-26 10:24 / 1230人阅读

摘要：策略模式根据不同参数可以命中不同的策略在函数是一等公民的中策略模式的使用常常隐藏在高阶函数中稍微变换下上述的形式如下可以发现我们平时已经在使用它了恭喜我们又掌握了一种设计模式。

策略模式

根据不同参数可以命中不同的策略

const strategy = {
  "S": function(salary) {
    return salary * 4
  },
  "A": function(salary) {
    return salary * 3
  },
  "B": function(salary) {
    return salary * 2
  }
}

const calculateBonus = function(level, salary) {
  return strategy[level](salary)
}

calculateBonus("A", 10000) // 30000

在函数是一等公民的 JS 中, 策略模式的使用常常隐藏在高阶函数中, 稍微变换下上述 demo 的形式如下, 可以发现我们平时已经在使用它了, 恭喜我们又掌握了一种设计模式。

  return salary * 4
}

const A = function(salary) {
  return salary * 3
}

const B = function(salary) {
  return salary * 2
}

const calculateBonus = function(func, salary) {
  return func(salary)
}

calculateBonus(A, 10000) // 30000

在一个Web项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单.
假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。

所有选项不能为空

用户名长度不能少于6位

密码长度不能少于6位

手机号码必须符合格式

邮箱地址必须符合格式
HTML代码：

一般情况下的JavaScript代码：

策略模式

使用

// 获取表单form元素
var form = document.getElementById("f1");

// 创建表单校验实例
var validation = new Formvalidation(VerifiPolicy);
// 编写校验配置
validation.add(form.username, "isNoEmpty", "用户名不能为空");
validation.add(form.password, "minLength: 6", "密码长度不能小于6个字符");
validation.add(form.code, "isMobile", "请填写正确的手机号");

// 开始校验，并接收错误信息
var errorMsg = validation.start();

// 如果有错误信息输出，说明校验未通过
if(errorMsg){
    // 做一些其他的事
    return false;
}

编写环境类

// 构造函数
var Formvalidation = function(VerifiPolicy){
    // 保存策略对象
    this.strategies = VerifiPolicy;
    // 验证缓存
    this.validationFns = [];
}

// add 方法  add方法第一个参数，是要验证的表单元素，第二个参数是一个字符串，使用 冒号(:) //分割，前面是策略方法名称，后面是传给这个方法的参数，第三个参数仍然是错误信息，
Formvalidation.prototype.add = function(dom, rule, errorMsg){

    var ary = rule.split(":");
    var arg = [];
    var self = this;
    this.validationFns.push(function(){
        arg = [];    // 重置参数
        var ruleName = ary[0];    // 策略对象方法名

        // 组装参数
        arg.push(dom.value);
        if(ary[1]){
            arg.push(ary[1]);
        }
        arg.push(errorMsg);

        // 调用策略函数
        return self.strategies[ruleName].apply(dom, arg);
    });
}

// 开始验证
Formvalidation.prototype.start = function(){
    for(var i = 0; ; i++){
        var msg = this.validationFns[i]();
        if(msg){
            return msg;
        }
    }
}

编写策略类

// 策略对象
var VerifiPolicy = {
    // 判断是否为空
    isNoEmpty : 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;
        }
    }
    // 其他
}

超融合服务器专线服务策略模式策略者模式应用安全策略 form表单中的action

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106115.html

探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。在一个Web项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单。这篇文章就阐述了如何编写相对看着舒服的表单验证代码。假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。 ...

Bamboy 2019-08-20 16:32 评论0 收藏0
探索两种优雅的表单验证——策略设计模式和ES6的Proxy代理模式

原文收录在我的 GitHub博客 (https://github.com/jawil/blog) ，喜欢的可以关注最新动态，大家一起多交流学习，共同进步，以学习者的身份写博客，记录点滴。在一个Web项目中，注册，登录，修改用户信息，下订单等功能的实现都离不开提交表单。这篇文章就阐述了如何编写相对看着舒服的表单验证代码。假设我们正在编写一个注册的页面，在点击注册按钮之前，有如下几条校验逻辑。 ...

light 2019-08-01 16:50 评论0 收藏0
JavaScript 设计模式系列 - 策略模式与动态表单验证

摘要：策略模式又称政策模式，其定义一系列的算法，把它们一个个封装起来，并且使它们可以互相替换。的表单具有表单验证功能，用来校验用户输入的表单内容。实际需求中表单验证项一般会比较复杂，所以需要给每个表单项增加自定义校验方法。 showImg(https://segmentfault.com/img/remote/1460000020135990); 策略模式（Strategy Pattern...

宋华 2019-08-26 14:06 评论0 收藏0
JS策略模式《JavaScript设计模式与开发实践》阅读笔记

摘要：策略模式可以避免代码中的多重判断条件。策略模式在程序中或多或少的增加了策略类。此文仅记录本人阅读设计模式与开发实践这个本时的感受，感谢作者曾探写出这么好的一本书。设计模式中很重要的一点就是将不变和变分离出来。参考设计模式与开发实践曾探策略模式的定义是：定义一系列的算法，把它们一个个封装起来，并且是它们可以相互替换。策略模式可以避免代码中的多重判断条件。策略模式很好的体现了开放-...

Amos 2019-08-22 17:57 评论0 收藏0