阅读 203

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
复制代码

场景

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

  • 表单校验的规则

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

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

  • ......

优点

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

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

文章分类
前端