JS设计模式 ｜ 策略模式

策略模式

策略模式是定义一系列的算法，把它们一个个封装起来，并且使它们可以相互替换。

策略模式的目的就是使算法的使用与算法分离开来。封装的算法具有一定的独立性，不会随客户端的变化而变化。

Demo

我们实现一个计数器的加减乘除来说明策略模式

function count(type, number1, number2) {
  switch (type) {
    case 'add':
      return number1 + number2;
    case 'subtract':
      return number1 - number2;
    case 'multiply':
      return number1 * number2;
    default:
      return number1 / number2;
  }
}
// if else
function count1(type, number1, number2) {
  if (type === 'add') {
    return number1 + number2;
  } else if (type === 'subtract') {
    return number1 - number2;
  } else if (type === 'multiply') {
    return number1 * number2;
  } else {
    return number1 / number2;
  }
}

使用策略模式

const count = {
  add(number1, number2) {
    return number1 + number2;
  },
  subtract(number1, number2) {
    return number1 - number2;
  },
  multiply(number1, number2) {
    return number1 * number2;
  },
  divide(number1, number2) {
    return number1 / number2;
  },
};

count.add(2, 3); // 5
count.subtract(10, 3); // 7
count.multiply(2, 3); // 6
count.divide(6, 2); // 3

场景

策略模式是一种常用的设计模式 例如

• 表单校验的规则

• 页面需要根据不同的条件渲染不同的按钮

• 商店不同的活动 计算价格

• ......

优点

• 减少重复代码 策略模式利用组合、委托和多态等技术和思想，减少很多模板代码。

• 扩展性 策略模式提供了对开放-封闭原则的完美支持，将算法封装在独立的策略类里面，使它们易于切换，易于理解，易于扩展。