策略模式

在策略模式中，我们创建表示各种策略的对象和一个行为随着策略对象改变而改变的context对象。

介绍

意图

• 定义一系列的算法，把它们一个个封装，并使它们可以互相替换

主要解决

• 在有多种算法相似的情况下，使用if...else所带来的复杂和难以维护

何时使用

• 一个系统有许多许多类，而区分它们的只是它们的直接行为

关键代码

• 实现同一个接口

应用实例

1. 诸葛亮的锦囊妙计，每一个锦囊就是一个策略
2. 旅游的出行方式，每一种交通工具都是一个策略

优点

• 算法可以自由切换
• 避免使用多重条件判断
• 扩展性良好

缺点

• 策略类会增加
• 所有策略类都需要对外暴露

实现

场景介绍

• 假设有两个input框，一个是公司名，一个是付款卡号，在提交表单时，有如下校验规则：公司名不能为空且长度不能超过12；付款卡号不能为空且长度不能超过20

公司名companyName 付款卡号payAccount

常规写法

submit: function() {
  if (!this.companyName) {
    alert(‘公司名不能为空‘)
    return
  }
  if (!this.payAccount) {
    alert(‘付款卡号不能为空‘)
    return
  }
  if (this.companyName.length > 12) {
    alert(‘公司名不能超过12个字符‘)
    return
  }
  if (this.payAccount.length > 12) {
    alert(‘付款卡号不能超过12个字符‘)
    return
  }
}

策略模式实现

1. 新建一个validate.js -- 定义一个validator类

class Validator {
  // 存放 -- 所有规则校验的结果
  validateResult = []
  // 存放 -- 所有的校验规则
  rules = {
    isEmpty: function(value, errMsg) {
      if(!value) {
        return errMsg
      }
    },
    maxLength: function(value, length, errMsg) {
      if(value.trim().length > length) {
        return errMsg
      }
    }
  }
  /**
   * value：要校验的值
   * rules：该值要用到哪些校验规则
   */ 
  check(value, rules) {
    for(let i = 0; i < rules.length; i++) {
      let oRule = rules[0]
      let ruleArr= oRule.rule.split(‘:‘)
      let errMsg = oRule.errMsg
      let rule = ruleArr.shift()
      ruleArr.unshift(value)
      ruleArr.push(errMsg)
      // 遍历规则后，将结果扔进数组
      this.validateResult.push(
        this.rules[rule].appay(value, ruleArr)
      )
    }
  }

  // 遍历结果数组，若有值，则返回错误提示信息
  checkResult() {
    for(let i = 0; i < validateResult.length; i++) {
      let errMsg = this.validateResult[i]
      if (errMsg) return errMsg
    }
  } 
}
export {
  Validator
}

2. 在需要使用校验规则的页面调用这个类

import { Validator } from ‘@/validate.js‘
submitForm: function() {
  const validator = new Validator()
  validator.check(this.companyName, [{
    rule: ‘isEmpty‘,
    errMsg: ‘公司名不能为空‘
  },{
    rule: ‘maxLength: 12‘,
    errMsg: ‘公司名不能超过12个字符‘
  }])
  validator.check(this.payAccount, [{
    rule: ‘isEmpty‘,
    errMsg: ‘付款卡号不能为空‘
  },{
    rule: ‘maxLength: 12‘,
    errMsg: ‘付款卡号不能超过12个字符‘
  }])
  let errMsg = validator.checkResult()
  if(errMsg) {
    alert(errMsg)
    return
  }
}

策略模式

原文：https://www.cnblogs.com/pleaseAnswer/p/14619962.html