加入收藏 | 设为首页 | 会员中心 | 我要投稿 常州站长网 （https://www.0519zz.cn/）- 云渲染、网络安全、数据安全、数据分析、人体识别!
当前位置： 首页 > 运营中心 > 建站资源 > 优化 > 正文

JavaScript 的一些常用设计模式

发布时间：2019-08-19 23:13:38 所属栏目：优化 来源：xianshannan
导读：设计模式是前人解决某个特定场景下对而总结出来的一些解决方案。可能刚开始接触编程还没有什么经验的时候，会感觉设计模式没那么好理解，这个也很正常。有些简单的设计模式我们有时候用到，不过没意识到也是存在的。 学习设计模式，可以让我们在处理问题的

假设我们的绩效分为 A、B、C、D 这四个等级，四个等级的奖励是不一样的，一般我们的代码是这样实现：

  1. /** 
  2.  
  3. * 获取年终奖 
  4.  
  5. * @param {String} performanceType 绩效类型， 
  6.  
  7. * @return {Object} 年终奖，包括奖金和奖品 
  8.  
  9. */ 
  10.  
  11. function getYearEndBonus(performanceType) { 
  12.  
  13. const yearEndBonus = { 
  14.  
  15. // 奖金 
  16.  
  17. bonus: '', 
  18.  
  19. // 奖品 
  20.  
  21. prize: '', 
  22.  
  23. } 
  24.  
  25. switch (performanceType) { 
  26.  
  27. case 'A': { 
  28.  
  29. yearEndBonus = { 
  30.  
  31. bonus: 50000, 
  32.  
  33. prize: 'mac pro', 
  34.  
  35. } 
  36.  
  37. break 
  38.  
  39. } 
  40.  
  41. case 'B': { 
  42.  
  43. yearEndBonus = { 
  44.  
  45. bonus: 40000, 
  46.  
  47. prize: 'mac air', 
  48.  
  49. } 
  50.  
  51. break 
  52.  
  53. } 
  54.  
  55. case 'C': { 
  56.  
  57. yearEndBonus = { 
  58.  
  59. bonus: 20000, 
  60.  
  61. prize: 'iphone xr', 
  62.  
  63. } 
  64.  
  65. break 
  66.  
  67. } 
  68.  
  69. case 'D': { 
  70.  
  71. yearEndBonus = { 
  72.  
  73. bonus: 5000, 
  74.  
  75. prize: 'ipad mini', 
  76.  
  77. } 
  78.  
  79. break 
  80.  
  81. } 
  82.  
  83. } 
  84.  
  85. return yearEndBonus 
  86.  
  87. } 

使用策略模式可以这样：

  1. /** 
  2.  * 获取年终奖 
  3.  * @param {String} strategyFn 绩效策略函数 
  4.  * @return {Object} 年终奖，包括奖金和奖品 
  5.  */ 
  6. function getYearEndBonus(strategyFn) { 
  7.   if (!strategyFn) { 
  8.     return {} 
  9.   } 
  10.   return strategyFn() 
  11. } 
  12.  
  13. const bonusStrategy = { 
  14.   A() { 
  15.     return { 
  16.       bonus: 50000, 
  17.       prize: 'mac pro', 
  18.     } 
  19.   }, 
  20.   B() { 
  21.     return { 
  22.       bonus: 40000, 
  23.       prize: 'mac air', 
  24.     } 
  25.   }, 
  26.   C() { 
  27.     return { 
  28.       bonus: 20000, 
  29.       prize: 'iphone xr', 
  30.     } 
  31.   }, 
  32.   D() { 
  33.     return { 
  34.       bonus: 10000, 
  35.       prize: 'ipad mini', 
  36.     } 
  37.   }, 
  38. } 
  39.  
  40. const performanceLevel = 'A' 
  41. getYearEndBonus(bonusStrategy[performanceLevel]) 

这里每个函数就是一个策略，修改一个其中一个策略，并不会影响其他的策略，都可以单独使用。当然这只是个简单的范例，只为了说明。

策略模式比较明显的特性就是可以减少 if 语句或者 switch 语句。

职责链模式

顾名思义，责任链模式(Chain of Responsibility Pattern)为请求创建了一个接收者对象的链。这种模式给予请求的类型，对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为型模式。

在这种模式中，通常每个接收者都包含对另一个接收者的引用。如果一个对象不能处理该请求，那么它会把相同的请求传给下一个接收者，依此类推。

（编辑：常州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

      【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

      建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的出色浏览效果

      Copygight © 2017-2023 https://www.0519zz.cn/ All Rights Reserved. 常州站长网