翼度科技»论坛 编程开发 JavaScript 查看内容

前端设计模式——策略模式

8

主题

8

帖子

24

积分

新手上路

Rank: 1

积分
24
在前端开发中,策略模式是一种常用的设计模式,它可以让我们在不改变对象本身的情况下,通过修改其内部的算法实现不同的行为。策略模式常常被用于实现一些复杂的业务逻辑,特别是需要根据不同的条件进行处理的情况。
下面是一个简单的示例,演示了如何使用策略模式来实现一个计算器:
  1. // 定义一个策略对象
  2. const strategies = {
  3.   add: function(num1, num2) {
  4.     return num1 + num2;
  5.   },
  6.   subtract: function(num1, num2) {
  7.     return num1 - num2;
  8.   },
  9.   multiply: function(num1, num2) {
  10.     return num1 * num2;
  11.   },
  12.   divide: function(num1, num2) {
  13.     return num1 / num2;
  14.   }
  15. };
  16. // 定义一个计算器对象
  17. const Calculator = function(strategy) {
  18.   this.calculate = function(num1, num2) {
  19.     return strategy(num1, num2);
  20.   }
  21. };
  22. // 使用策略模式来创建一个计算器对象
  23. const addCalculator = new Calculator(strategies.add);
  24. const subtractCalculator = new Calculator(strategies.subtract);
  25. const multiplyCalculator = new Calculator(strategies.multiply);
  26. const divideCalculator = new Calculator(strategies.divide);
  27. // 使用计算器对象进行计算
  28. console.log(addCalculator.calculate(10, 5)); // 输出 15
  29. console.log(subtractCalculator.calculate(10, 5)); // 输出 5
  30. console.log(multiplyCalculator.calculate(10, 5)); // 输出 50
  31. console.log(divideCalculator.calculate(10, 5)); // 输出 2
复制代码
 
在上面的示例中,我们首先定义了一个策略对象,其中包含了四个不同的算法:加、减、乘和除。然后我们定义了一个计算器对象,它接收一个策略对象作为参数,并将其保存在内部。最后,我们使用策略模式来创建四个不同的计算器对象,每个对象使用不同的算法进行计算。
这个示例展示了如何使用策略模式来实现一个简单的计算器,但实际上它可以应用于许多其他的场景中,例如表单验证、图表绘制等。策略模式可以让我们通过修改策略对象来改变对象的行为,从而实现更加灵活和可扩展的代码。

来源:https://www.cnblogs.com/ronaldo9ph/p/17206376.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

举报 回复 使用道具