设计模式-策略模式前端应用校验vue写法

1、定义：定义一系列算法，把它们一个个封装起来，并且它们可以相互替换

2、实际应用：减少if else的使用，在有多种算法相似的情况下，使用 if…else 所带来的复杂和难以维护，提高维护和可读性，具备扩展性

使用案例

优化前写法

　　　　if (this.code.length != 16) {
        if (this.code.length == 0) {
          Toast({
            message: '请输入兑换码或者选择扫描兑换码',
            position: 'middle',
            duration: 3000
          })
          return false
        } else {
          Toast({
            message: '请输入正确的兑换码',
            position: 'middle',
            duration: 1500
          })
        }
      } else if (!validateMobile(this.userTel)) {
        Toast({
          message: '请输入正确的手机号',
          position: 'middle',
          duration: 1500
        })
      } else if (this.codeVal.length == 0) {
        Toast({
          message: '请输入短信验证码',
          position: 'middle',
          duration: 1500
        })
      } else if (this.codeVal.length < 4) {
        Toast({
          message: '请输入正确的短信验证码',
          position: 'middle',
          duration: 1500
        })
      }

 

优化后的写法-采用策论模式+构造函数

我是建一个check.js文件，具体页面引用import { validateCodeFunc } from '@/assets/js/check'

第一步把所有的策略封装起来

const strategys = {
    // 空检验
  isNotEmpty: (value, errorMsg) => {
    if (value === '') return errorMsg
  },
    // 16位数字code
  codeLength: (value, errorMsg) => {
    if (!/^\d{16}$/.test(value)) return errorMsg
  },
    // 4位验证码
  verificationCodeLength: (value, length, errorMsg) => {
    if (value.length != length) return errorMsg
  },
    // 手机号
  mobileFormat: (value, errorMsg) => {
    if (!/^1[3456789]\d{9}$/.test(value)) return errorMsg
  }
}

第二步创建调用策略的环境，需要使用那种策略

export function Validator() {
  this.cache = []  // 保存效验规则
}
Validator.prototype.add = function(value, rule, errorMsg) {
  var str = rule.split(':')  // str 返回的是 [verificationCodeLength,4]
  this.cache.push(function() {
    var strategy = str.shift()// 方法名
    str.unshift(value) // value添加进参数列表
    str.push(errorMsg)  // 把errorMsg添加进参数列表
    return strategys[strategy].apply(value, str)
  })
}
Validator.prototype.start = function() {
  for (var i = 0, validatorFunc; validatorFunc = this.cache[i++];) {
    var msg = validatorFunc()  // 开始效验 并取得效验后的返回信息
    if (msg) {
      return msg
    }
  }
}

第三步最后创建一个Validator实例，在具体页面调用即可

export function validateMobileFunc(params) {
  const validator = new Validator()
  validator.add(params.userTel, 'isNotEmpty', '请输入手机号')
  validator.add(params.userTel, 'mobileFormat', '请输入正确格式的手机号')
  validator.add(params.codeVal, 'isNotEmpty', '请输入验证码')
  validator.add(params.codeVal, 'verificationCodeLength:4', '请输入正确格式的验证码')
  var errorMsg = validator.start()
  return errorMsg
}