js 设计模式（1）- 策略模式

策略模式

        要实现某一个功能，有多种可能，就可以定义侧率，将它们一个一个的封装起来。

例子

       1. 权限判断

        一个功能需要是管理员并且是一级管理员才能使用，最简单的办法就是if-else直接判断，但是如果条件多了，代码就成屎山了，全是if-else。策略模式可以维护一个策略对象，将各种可能集成为一个地方

// 定义策略

// 权限列表
const list = ["admin", "xxx", "xxx"];
// 策略对象
const strategies = {
  // 判断是否为管理员
  checkRole: function (value) {
    return value === "管理员";
  },
  // 判断是否为一级
  checkGrade: function (value) {
    return value === 1;
  },
  // 判断权限是否在权限列表
  checkList: function (value) {
    return list.indexOf(value) !== -1;
  },
};

        在定义一个校验类，用来执行定义好的策略，这类定义一个数组属性用来存策略，定义一个添加方法用来添加策略，最后定义一个执行方法，循环遍历数组执行

const Auth = class {
  constructor() {
    // 存储策略方式
    this.cache = [];    
  }
  // 添加策略
  add(value, method) {
    this.cache.push(function () {
      return strategies[method](value);
    });
  }

  // 检查
  check() {
    // 循环遍历数组
    for (let i = 0; i < this.cache.length; i++) {
      let Fn = this.cache[i];
      let data = Fn();
      if (!data) {
        return false;
      }
    }
    return true;
  }
};

        使用的时候

         拿到当前用户的权限数据，实例化对象后添加策略，执行check，拿到返回值

const Fn = function () {
  // 用户的权限数据
  const data = {
    role: "管理员",
    grade: 1,
  };
  // 实例化对象
  const validator = new Auth();
  // 添加策略
  validator.add(data.role, "checkRole");
  validator.add(data.grade, "checkGrade");
  // 执行check
  const res = validator.check();
  return res;
};
console.log(Fn());

          2. 表单校验

            在一个注册页面中，点击注册的时候，会有三条校验逻辑

                ①用户名不能为空

                ②密码长度不能少于六位

                ③手机号码必须符合格式

             常规的写法就是if-else的进行判断，用策略模式进行编写，先定义好策略

// 定义策略
const strategies1 = {
  // 是否为空
  isNonEmpty: function (value, errMsg) {
    if (value === "") {
      return errMsg;
    }
  },
  // 最小长度
  minLength: function (value, errMsg) {
    if (value.length < 6) {
      return errMsg;
    }
  },
  // 手机号码格式
  isMobile: function (value, errMsg) {
    if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
      return errMsg;
    }
  },
};

           定义校验类

const Validate = class {
  constructor() {
    // 存储策略方式
    this.cache = [];
  }
  // 添加策略
  add(value, method, msg) {
    this.cache.push(function () {
      return strategies1[method](value, msg);
    });
  }
  // 检查
  check() {
    // 循环遍历数组
    for (let i = 0; i < this.cache.length; i++) {
      let Fn = this.cache[i];
      let data = Fn();
      if (data) {
        return data;
      }
    }
    return true;
  }
};

        使用的时候

const Fn1 = function () {
  // 用户的权限数据
  const data = {
    name: "牛马",
    passWord: "11",
    phone: 15363209378,
  };
  // 实例化对象
  const validator = new Validate();
  // 添加策略
  validator.add(data.name, "isNonEmpty", "用户名不能为空");
  validator.add(data.passWord, "minLength", "密码不能小于六位");
  validator.add(data.phone, "isMobile", "请正确输入手机号码");
  // 执行check
  const res = validator.check();
  return res;
};
console.log(Fn1());