JavaScript设计模式总结-策略模式

构成：

策略类、环境类

作用：

替换掉 if-else语句

应用场景举例：

根据不同的情况，要调用不同的策略方法，如表单各种规则校验

基本形式 - Javascript写法

策略类

strategies = {
  S(salary) {
  return salary * 2;
  },
  A(salary) {
  return salary * 3;
  },
  B(salary) {
  return salary * 4;
  },
};

环境类

知道调用哪个策略（函数名），策略（函数）所需入参

const calculateBonus = function(level, salary) {
  return stategies[level](salary);
};

工作中遇到过策略模式

在api.js中定义各种axios请求 - 策略类

在util.js中定义ajax()方法 - 环境类

其中环境类的入参，ajax(axiosMethodName, axiosMethodParams, otherParamsForConfig)

其作用在于，在ajax中封装一些统一的Toast提示，不同的场合要用不同定义的axios方法，各方法具备不同的入参。

策略模式在表单校验中的应用

先定义表单校验函数

const stategies = {
  isNotEmpty(value, errorMsg) {
    ...
  },
  minLength(value, length, errorMsg) {
    ...
  },
};

由于会添加多条规则，因此把所有的规则都要先存起来，再一起调用

const Validator = function() {
  this.cache = []
};

相对于之前例子不同的是，这里先用个function将策略存起来，而非直接调用，本质上来说，还是凭借：1、策略名；2、策略参数来进行调用，表单校验会涉及到dom操作，因此策略参数中还包含了dom节点。

Validator.prototype.add = function(dom, rule, errorMsg) {
  rule === [规则名（即调用的策略名称）, 策略参数];
  this.cache.push(function() {
    分别取出rule的参数
    return strategies[规则名].apply(dom, arg);
  });
};

调用的时候，则遍历所有缓存的规则，逐一调用

Validator.prototype.start = function() {
  遍历this.cache，执行所有存入的校验规则
}

参考文献：

[1] 《JavaScript设计模式与开发时间》，曾探，中国工信出版集团.

JavaScript设计模式总结-策略模式

猜你喜欢