前端每日一题

20220610

前端设计模式的一些记录

策略模式

定义:要实现某一个功能,有多种方案可以选择。我们定义策略，把它们一个个封装起来，并且使它们可以相互
https://juejin.cn/post/6844904138707337229

// 维护权限列表
const jobList = ['FE','BE'];
// 策略
let strategies = {
  checkRole(value) {
    return value === "juejin";
  },
  checkGrade(value) {
    return value >= 1;
  },
  checkJob(value) {
    return jobList.indexOf(value) > 1;
  },
  checkEatType(value) {
    return value === "eat melons";
  },
};

验证

const Validator = function () {
  this.cache = [];
  //添加策略事件
  this.add = function (value, method) {
    this.cache.push(function () {
      return strategies[method](value);
    });
  };
  //检查
  this.check = function () {
    for (let i = 0; i < this.cache.length; i++) {
      let valiFn = this.cache[i];
      let haveAuth = valiFn();
      if (!haveAuth) {
        return false;
      }
    }
    return true;
  };
};

验证条件为:

• 掘金用户
• 掘金等级1级以上

// 小彭使用策略模式进行操作
var compose1 = function() {
  var validator = new Validator();
  const data1 = {
    role: 'juejin',
    grade: 3
  };
  validator.add(data1.role, 'checkRole');
  validator.add(data1.grade, 'checkGrade');
  const result = validator.check();
  return result;
};

策略模式的使用

• 各个判断条件下的策略相互独立可以复用
• 策略内部逻辑相对复杂
• 策略需要灵活组合