美文网首页
javascript 如何利用 策略模式 优化表单验证

javascript 如何利用 策略模式 优化表单验证

作者: 周超102 | 来源:发表于2020-03-13 10:17 被阅读0次

    背景

    在做移动端项目开发的时候,经常会遇到各种表单验证,有时候不同的页面,验证规则是一样的 ,如图


    image

    之前项目里的验证代码写的很凌乱,最近刚好遇到这个模块的功能需要重构,于是对代码做了大量的优化,记录一下如何利用策略模式优化表单验证的

    优化前

    之前我们的验证代码是这样写的,把验证func写到一个公共模块里面,然后每个方法返回一个包含是否通过和message字段的对象

    //common.js
    export default {
      validateName: function (data, message = '', flag = false) {
        if (!/xxx/.test(data)) {
          message = '验证不通过提示语'
        } else {
          flag = true
        }
        return {
          message,
          flag
        }
      },
      validatePhone: function (data, message = '') {},
      validateAddress: function (data, message = '') {}
    }
    

    然后在业务代码里面引用,这种不仅代码量比较大,而且这种基础验证模块和业务模块耦合严重,我们应该尽量做到将不同模块和功能代码分离,提高代码的可扩展性

    优化后

    如果验证不通过,在基础验证代码里立即弹出msg,业务代码只需要判断返回的是true或者false就行了

    //common.js
    export default {
      validateName: function (data, msg = '') {
        if (!/xxx/.test(data)) {
          msg = '验证不通过提示语'
        }
        msg && alert(msg)
        return !!msg
      },
      validatePhone: function (data, msg = '') {},
      validateAddress: function (data, msg = '') {}
    }
    

    这样业务代码看上去很简洁

    //index.js
    import validate from './common.js'
    const keys = Object.keys(validate)
    //通过some方法,有1个验证不通过,就跳出验证,然后主业务代码里通过判断validateResult的值,验证是否完全通过。
    //还有dataKey需要和validateKey有一定的映射规则
    const validateResult = keys.some(key => {
      return !validate[key](this.data[dataKey])
    })
    

    如果你的验证方法包含了很多本页面用不到的其他验证规则,你只需在业务代码添加一个白名单字段

    const whiteList = ['validatePhone','validateName','validateAddress']
    

    如果你的验证有先后顺序,添加一个优先级字段

    const whiteList = [{
        name:'validatePhone',
        level:1,
    },{
        name:'validateName',
        level:2,
    }]
    

    以上就是我对表单验证规则的优化心得,有哪里需要改进的希望大家可以指点出来,相互交流

    相关文章

      网友评论

          本文标题:javascript 如何利用 策略模式 优化表单验证

          本文链接:https://www.haomeiwen.com/subject/aigfshtx.html