专题7: 设计模式之策略模式

[luoxue-victor]

定义

定义一系列的算法, 把它们一个个封装起来, 并且使它们可相互替换。

优缺点

优点

1. 算法可以自由切换。
2. 避免使用多重条件判断。
3. 扩展性好，符合开闭原则。

缺点

1. 策略类会增多。
2. 所有策略类都需要对外暴露。

实战

在vue中有一个合并选项策略 optionMergeStrategies，它的功能就是把选项添加一些策略，可以达到我们对选项数据操作的目的

官方例子，将选项 _my_option 添加策略，让它的值加一

Vue.config.optionMergeStrategies._my_option = function (parent, child, vm) {
  return child + 1
}

const Profile = Vue.extend({
  _my_option: 1
})

// Profile.options._my_option = 2

我们来简单实现一下这个合并选项策略

// 策略模式 store
const optionMergeStrategies: { [prop: string]: any } = {};

// 给 _my_option 添加策略
optionMergeStrategies._my_option = function(value) {
  return value + 1
}

// 声明 data
const data = {
  // 添加策略
  _my_option: 1,
  // 未添加策略
  option: 1
};

// 响应式
function reactive (data) {
  const hander = {
    get(target, key, value) {
      const v = Reflect.get(target, key, value);
      // 此属性存在策略
      if (typeof optionMergeStrategies[key] === 'function') {
        return optionMergeStrategies[key](v)
      }
      return v
    }
  };
  return new Proxy(data, hander);
}

const proxy = reactive(data);
// 测试是否添加了响应
proxy._my_option = 10
proxy.option = 10

console.log(proxy._my_option, proxy.option); // 11 10

这样你就可以做更多的事情了，比如验证手机号，邮箱等等，再也不用写很多的 if else 了，而且你也可以随时更换策略。符合了设计模式的开闭原则。