前端策略模式&应用

周郎妙计安天下，陪了夫人又折兵

诸葛亮三个锦囊妙计

 问题？？？ 为什么不只做一个锦囊，把妙计都写在一张纸上

优点：

    1. 赵云看起来方便

    2. 锦囊可以用多次

    3. 随意添加新的锦囊

--》诸葛亮思路清晰  --》 策略模式的高手

    策略模式：需要在不同情况下使用不同的策略

   1.代码清晰，易维护

   2.随意组合，可复用

   3.任意扩展，不影响原有逻辑

技术抽象

1.环境（Context）角色：持有一个Strategy的引用

2.抽象策略（Strategy）角色：这是一个抽象角色，通常有一个接口或抽象类实现

3.具体策略（ConcreteStartegy）角色：包装了相关的算法或者行为

实例 validator 表单校验

抽象策略（Strategy）角色

 具体策略（ConcreteStartegy）角色

import { string } from "public/js/html-docx";

export enum ValidatorEnum {
  validateServer = 'validateServer',
  validateEmail = 'validateEmail',
  validatePhone = 'validatePhone',
  validateIpV4 = 'validateIpV4',
  validateIpV6 = 'validateIpV6',
}

interface IStrategy {
  [propName: string]: (value: any, errorMsg: string) => string;
}


const validatorConfig:IStrategy = {
  // 服务器地址验证 域名验证
  validateServer: (value, errorMsg: string) => {
    const reg = /^(?=^.{3,255}$)[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+$/;
    if (!reg.test(value)) {
      return errorMsg;
    }
    return '';
  },
  // 邮箱验证
  validateEmail: (value, errorMsg) => {
    const reg = /^[\w\d]+([._\\-]*[\w\d])*@([\w\d]+[-\w\d]*[\w\d]+\.){1,63}[\w\d]+$/;
    if (!reg.test(value)) {
      return errorMsg;
    }
    return '';
  },
  // 手机号验证
  validatePhone: (value, errorMsg) => {
    const reg = /^((1[3|3|4|5|6|7|8][0-9])+\d{8})$/;
    if (!reg.test(value)) {
      return errorMsg;
    }
    return '';
  },

  validateIpV4: (value, errorMsg) => {
    const reg = /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/i;
    if (!reg.test(value)) {
      return errorMsg;
    }
    return '';
  },
  validateIpV6: (value, errorMsg) => {
    const reg = /^((([0-9A-Fa-f]{1,4}:){7}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}:[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){5}:([0-9A-Fa-f]{1,4}:)?[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){4}:([0-9A-Fa-f]{1,4}:){0,2}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){3}:([0-9A-Fa-f]{1,4}:){0,3}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){2}:([0-9A-Fa-f]{1,4}:){0,4}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){6}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(([0-9A-Fa-f]{1,4}:){0,5}:((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|(::([0-9A-Fa-f]{1,4}:){0,5}((\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b)\.){3}(\b((25[0-5])|(1\d{2})|(2[0-4]\d)|(\d{1,2}))\b))|([0-9A-Fa-f]{1,4}::([0-9A-Fa-f]{1,4}:){0,5}[0-9A-Fa-f]{1,4})|(::([0-9A-Fa-f]{1,4}:){0,6}[0-9A-Fa-f]{1,4})|(([0-9A-Fa-f]{1,4}:){1,7}:))$/i;
    if (!reg.test(value)) {
      return errorMsg;
    }
    return '';
  },
};

export default validatorConfig;

环境（Context）角色

import validatorConfig from '@/config/validators.config';

interface strategy {
  strategy: string;
  errorMsg: string;
}

interface Iparams {
  [propName: string]: any;
}

interface Ivalidator {
  [propName: string]: strategy[];
}

interface Icatch {
  params: Iparams;
  fieldValidator: Iparams;
}

export default class Validator {
  catch: Icatch;

  constructor(n: Icatch) {
    this.catch = n;
  }

  add(params: Iparams, fieldValidator: Ivalidator): void {
    const obj = {
      params: params,
      fieldValidator: fieldValidator,
    };
    this.catch = obj;
  }

  check(): any {
    const { params, fieldValidator } = this.catch;
    let errorInfo = {};
    for (const k in params) {
      let errorObj = {};
      for (const valid of fieldValidator[k]) {
        const msg = validatorConfig[valid.strategy](params[k], valid.errorMsg);
        if (msg) {
          errorObj[k] = msg;
          break;
        }
      }
      errorInfo = { ...errorInfo, ...errorObj };
    }
    return errorInfo;
  }
}

应用