书签分享收藏举报版权申诉 / 25

立即下载加入VIP,免费下载

当前位置：首页 > 经管营销 > 经济市场 > JavaScript设计模式之策略模式.docx

JavaScript设计模式之策略模式.docx

文档编号：26404573
上传时间：2023-06-19
格式：DOCX
页数：25
大小：52.16KB

《JavaScript设计模式之策略模式.docx》由会员分享，可在线阅读，更多相关《JavaScript设计模式之策略模式.docx（25页珍藏版）》请在冰豆网上搜索。

JavaScript设计模式之策略模式.docx

JavaScript设计模式之策略模式

在网上搜索“为什么MVC不是一种设计模式呢？

”其中有解答：

MVC其实是三个经典设计模式的演变：

观察者模式（Observer）、策略模式（Strategy）、组合模式（Composite）。

所以我今天选择学习策略模式。

策略模式：

定义了一系列家族算法，并对每一种算法单独封装起来，让算法之间可以相互替换，独立于使用算法的客户。

通常我并不会记得“牛顿第一定律”的具体内容，所以我也难保证我会对这个定义记得多久……用FE经常见到的东西来举个例子说明一下：

1.$（"div"）.animation（{left:

'50px'},1000,'easein'）;

2.

3.$（"div"）.animation（{left:

'50px'},1000,'linear'）;

4.

5.$（"div"）.animation（{left:

'50px'},1000,'swing'）;

6.

7.//看最后三个关于动画效果的参数

8.

9.//Jquery文档总提到easing（第三个参数）:

要使用的擦除效果的名称（需要插件支持）.默认jQuery提供"linear" 和 "swing".

我们在对元素设置动画的缓动效果，实际就是策略模式的一种实现。

这样的缓动算法跟我们使用Jquery的人来说没有直接关系，假如我的项目中某个动画需要一种新的算法效果，那么我们再去开发一个插件就好了。

反之，如果Jquery没有提供这样一种插件机制，那针对需求变化难不成要去改动Jquery的源码吗？

在《大话设计模式》一书中，作者举例的是一个商场的收银系统，在实际操作中，商場可能因为“双11买一送一”、“满500立减50”、“中秋节全场11折”等活动而对最终的收费产生变化。

如果哪一天商场突然倒闭，全场两元，这时候我们仅需要给软件系统增加一个所有商品价格变两元的插件算法（类）即可。

我先来模拟一下策略模式的基本代码形态：

1.

DOCTYPE html>

2.

3.

4.

5. Document

6.

7.

8.

9. function ConcreteStrategyA（）{

10. this.AlgorithmInterface = function（）{

11. console.log（"算法A"）;

12. }

13. }

14.

15. function ConcreteStrategyB（）{

16. this.AlgorithmInterface = function（）{

17. console.log（"算法B"）;

18. }

19. }

20.

21. function ConcreteStrategyC（）{

22. this.AlgorithmInterface = function（）{

23. console.log（"算法C"）;

24. }

25. }

26.

27. //Context,用一个createStrategy来配置，维护一个对Strategy对象的引用

28.

29. function Context（strategy）{

30. this.strategy = strategy;

31. this.ContextInterface = function（）{

32. strategy.AlgorithmInterface（）;

33. }

34.

35. }

36.

37. //应用

38. var context1 = new Context（new ConcreteStrategyA（））;

39. context1.ContextInterface（）;

40.

41. var context2 = new Context（new ConcreteStrategyB（））;

42. context2.ContextInterface（）;

43.

44. var context3 = new Context（new ConcreteStrategyC（））;

45. context3.ContextInterface（）;

46.

47.

48.

通常来说，具体的某一种算法必须保证实现了某一些接口或者继承某个抽象类，才不会发生类型错误，在javascript中去实现接口、抽象类、继承等特性要费一些周章，所以我这个例子是不严谨的，仅从最简单的实现方式着手。

具体实现一个商场收银系统：

包括一个单独js文件，和一个具体的实现html文件

1.//因为要用到数值验证，所以...这里用的是jquery2.1里面的isNum

2.function isNum（obj）{

3. return obj - parseFloat（obj）>=0;

4.}

5.//算法A，没有活动，正常收费

6.function ConcreteStrategyA（）{

7. this.AlgorithmInterface = function（money）{

8. return money;

9. }

10.}

11.//算法B，满300减100

12.function ConcreteStrategyB（MoneyCondition,MoneyReturn）{

13. this.MoneyCondition = MoneyCondition,

14. this.MoneyReturn = MoneyReturn;

15.

16. this.AlgorithmInterface = function（money）{

17. var result=money;

18. if（money>=MoneyCondition）{

19. result = money - Math.floor（money/MoneyCondition）*MoneyReturn;

20. }

21. return result;

22. }

23.}

24.//算法C，打折

25.function ConcreteStrategyC（moneyRebate）{

26. this.moneyRebate = moneyRebate;

27. this.AlgorithmInterface = function（money）{

28. return money*this.moneyRebate;

29. }

30.}

31.

32.//Context,用一个createStrategy来配置，维护一个对Strategy对象的引用

33.//这里将算法相关的从客户端剥离出来，简单工厂模式

34.function Context（type）{

35. this.strategy = null;

36. switch（type）{

37. case "a":

38. this.strategy = new ConcreteStrategyA（）;

39. break;

40. case "b":

41. this.strategy = new ConcreteStrategyB（"300","100"）;

42. break;

43. case "c":

44. this.strategy = new ConcreteStrategyC（"0.8"）;

45. break;

46. }

47.

48. this.ContextInterface = function（money）{

49. if（!

isNum（money））{

50. money = 0;

51. }

52. return this.strategy.AlgorithmInterface（money）;

53. }

54.

55.}

HTML部分：

1.

DOCTYPE html>

2.

3.

4.

5. Document

6.

7. .block {

8. padding:

5px 0;

9. border-bottom:

1px solid #ccc;

10. }

11. .menu {margin:

10px auto;text-align:

center;}

12.

13.

14.

15.

16. 单价（RMB）：

数量：

计算方式：

正常收费满300减100打8折合计：

17.

18.

19.

20.

21.

22. 总价：

23.

24.

25.

26. var tPrice = document.getElementsByClassName（"tPrice"）,

27. tNum = document.getElementsByClassName（"tNum"）,

28. tAlg = document.getElementsByClassName（"tAlg"）,

29. tMoney = document.getElementsByClassName（"tMoney"）,

30. total = document.querySelector（"#total"）;

31.

32. var addBtn = document.querySelector（"#addBtn"）;

33. addBtn.addEventListener（"click",function（）{

34. var html = '单价（RMB）：

数量：

计算方式：

正常收费满300减100打8折合计：

';

35. var div = document.createElement（"div"）;

36. div.className="block";

37. div.innerHTML = html;

38. this.parentNode.parentNode.insertBefore（div,this.parentNode）;

39. }）

40.

41.

42. function calculate（e）{

43.

44. //根据事件对象判断事件源，获取同类元素中的位置

45. var num = 0,className = e.target.className;

46. switch（className）{

47. case "tPrice":

48. for（var i=tPrice.length-1;i>=0;i--）{

49. if（tPrice[i]==e.target）{

50. num = i;

51. }

52. }

53. break;

54. case "tNum":

55. for（var i=tNum.length-1;i>=0;i--）{

56. if（tNum[i]==e.target）{

57. num = i;

58. }

59. }

60. break;

61. case "tAlg":

62. for（var i=tAlg.length-1;i>=0;i--）{

63. if（tAlg[i]==e.target）{

64. num = i;

65. }

66. }

67. break;

68. default:

69. return;

70. }

71.

72.

73. var context = new Context（tAlg[num].value）;

74. var money = 0;

75. var totalValue = 0;

76.

77. money = context.ContextInterface（tPrice[num].value*tNum[num].value）;

78.

79. tMoney[num].value = money;

80.

81. for（var index=0,len=tMoney.length;index

82. totalValue += tMoney[index].value*1;

83. }

84. total.value = totalValue;

85. }

86.

87. //绑定DOM事件

88. // tPrice[0].addEventListener（'keyup',calculate,false）;

89. // tNum[0].addEventListener（'keyup',calculate,false）;

90. // tAlg[0].addEventListener（'change',calculate,false）;

91.

92. document.addEventListener（'keyup',calculate,false）;

93. document.addEventListener（'change',calculate,false）;

94.

95.

96.

最开始我对商品单价、数量、计算方式仅提供一个可操作的地方，这也是《大话设计模式》一书中产品的基本形态，考虑到更良好交互性，我增加了一个按钮，可以增加更多行。

这带来的一点小问题就是：

起初我只需要为几个元素绑定事件即可，现在要对可能产生的更多元素绑定事件，所以我就选择了“事件代理”，获得发生事件的元素位置，改变同一行中的相应元素的值，对于总价，则总是遍历所有的单行总价相加。

BTW，在获取元素的时候使用了getElementsByClassName而没有使用querySelectorAll，是因为后者获取的不是一个动态集合。

接着我尝试将昨天学习的观察者设计模式与策略模式混合起来，起初我是这样做的....

1.

DOCTYPE html>

2.

3.

4.

5. Document

6.

7. .block {

8. padding:

5px 0;

9. border-bottom:

1px solid #ccc;

10. }

11. .menu {margin:

10px auto;text-align:

center;}

12.

13.

14.

15.

16. 单价（RMB）：

数量：

计算方式：

正常收费满300减100打8折合计：

17.

18.

19.

20.

21.

22. 总价：

23.

24.

25.

26.

27. //发布者

28. function Publisher（obj）{

29. t

文档加载中……请稍候！
如果长时间未打开，您也可以点击刷新试试。

下载文档到电脑，查找使用更方便

下载	加入VIP,免费下载

版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载

配套讲稿：: 如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
特殊限制：: 部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。
关键词：: JavaScript 设计模式策略

冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。

关于本文

本文标题：JavaScript设计模式之策略模式.docx
链接地址：https://www.bdocx.com/doc/26404573.html

JavaScript设计模式之策略模式.docx

热门标签