设计模式-策略模式-前端javascript学习笔记

1、概述

前端策略模式是一种常用的设计模式，它可以帮助我们更好地组织、管理和重构代码。策略模式可以将一组相似的算法封装成类，使得它们可以相互之间替换，而不会影响到客户端的代码。这种模式可以在不改变原有代码的情况下，增加、删除或替换算法，从而提高代码的复用性和可维护性。 在前端开发中，策略模式可以用来处理一些常见的问题，比如表单验证、排序、搜索等。以表单验证为例，我们可以将各种验证规则封装成不同的类，然后根据用户的输入，动态地选择相应的验证类进行验证。这样可以避免代码中充斥着大量的 if-else 语句，提高代码的可读性和可维护性。 另外，策略模式还可以用来优化代码的性能。比如在一些计算密集型的算法中，我们可以通过将算法分解成不同的部分，并采用策略模式进行优化，从而提高代码的运行效率。 总之，前端策略模式是一种非常实用的设计模式，它可以帮助我们更好地组织、管理和优化代码。通过合理地运用策略模式，我们可以提高代码的复用性、可读性和可维护性，从而更好地完成前端开发工作。

2、示例

计算不同绩效下员工的年终奖金额，年终奖参数S---1.5倍基础薪资，A---1.2倍基础薪资，B---1.0倍基础薪资，C---0.8倍基础薪资。

正常情况下我们为了追求速度可能通过以下代码去实现该功能

const calcuateBonus = (salary, level) => {
   if(level === 'S') return salary * 1.5;
   if(level === 'A') return salary * 1.2;
   if(level === 'B') return salary * 1;   if(level === 'C') return salary * 0.8;
}

上面的代码存在很多问题，比如如果奖金系数修改或者增加绩效规则后，我们需要深入函数主体内部去进行修改代码，且函数内部充斥大量的if-else，代码的耦合度过高，不易维护。我们可以尝试通过策略模式去优化以上代码。

// 定义规则算法集合
const strategies = { 
  "S": salary => salary * 1.5,
  "A":  salary => salary * 1.2,
  "B":  salary => salary * 1,
  "C":  salary => salary * 0.8,	
};
// 使用规则算法
const calculateBonus = (level, salary) => strategies[level](salary);	

我们通过使用策略模式重构代码。将算法的实现和使用进行分割，有效的提升了代码的可读性和可维护性，在今后的涉及到规则的变化，我们只需在strategies里增加或者修改相应的规则即可。