定义

要实现某一功能有多种方案可以选择；可以定义策略把它们一个个封装起来，并且使它们可以相互转换

场景

当场景中存在多个if或多个if-else时可以使用策略模式
像表单元素中内容的校验、登录用户的权限验证

  1. // 策略模式
  2. // 策略
  3. const strategies = {
  4.     // 字符串
  5.     // 不为空
  6.     isEmpty: (value, errorMsg) => {
  7.         return value !== '' ? '' : errorMsg
  8.     },
  9.     // 最小长度限制
  10.     limitLength: (value, errorMsg, minLength) => {
  11.         return value.length > minLength ? '' : errorMsg
  12.     },
  13.     // 只能是汉字
  14.     isChinese: (value, errorMsg) => {
  15.         return /[\u4E00-\u9FA5]/g.test(value) ? '' : errorMsg
  16.     },
  17.     // 验证手机号
  18.     phoneNumber: (value, errorMsg) => {
  19.         return /^1[]/g.test(value) ? '' : errorMsg 
  20.     },
  21.     // 验证邮箱
  23.     // 验证身份证号码
  25.     // 屏蔽关键字
  28.     // 数字
  29.     // 最小值
  30.     gtMin: (value, errorMsg, minVal) => {
  31.         return value > minVal ? '' : errorMsg
  32.     },
  33.     // 最大值
  34.     ltMax: (value, errorMsg, maxVal) => {
  35.         return value < maxVal ? '' : errorMsg
  36.     },
  37. }
  39. // 校验规则
  40. const Validator = function() {
  41.     this.cache = []
  42.     this.msg = []
  43.     // 添加
  44.     this.addValidatorEvent = function(value, method, errorMsg, ...args) {
  45.         this.cache.push(function () {
  46.             return strategies[method](value, errorMsg, ...args)
  47.         })
  48.     }
  49.     // 检查
  50.     this.checkData = function() {
  51.         this.cache.map((item) => {
  52.             this.msg.push(item())
  53.         })
  54.         return this.msg
  55.     }
  56. }
  58. let validator = new Validator()
  59. validator.addValidatorEvent('', 'isEmpty', '该项不能为空')
  60. validator.addValidatorEvent('123', 'isChinese', '只能是汉字')
  61. validator.addValidatorEvent(22, 'gtMin', '最小值为25', 25)
  62. validator.addValidatorEvent(18, 'ltMax', '最大值为20', 20)
  63. validator.addValidatorEvent('faf', 'limitLength', '字符串最小长度为5', 5)
  64. let res = validator.checkData()
  65. console.log(res)

输出

  1. ["该项不能为空", "只能是汉字", "最小值为25", "", "字符串最小长度为5"]

使用者可根据返回该项的值是否为空字符串来给用户输入提示