简化理解:策略设计模式

举报
掘金安东尼 发表于 2022/08/12 10:11:01 2022/08/12
【摘要】 工厂设计模式、构造函数设计模式、这 3 种设计模式,真切时刻发生在我们日常编码生活中,蓦然回首,灯火阑珊处。本篇带来另外一种设计模式介绍,你或许天天和它打交道,但是不认识它,它就是“策略模式”。策略模式就像诸葛亮的锦囊,它在代码中是这样体现的:比方说,我们有一个销售活动,它有着不同的销售策略function getPrice(originalPrice, status) { if (sta...

工厂设计模式、构造函数设计模式、这 3 种设计模式,真切时刻发生在我们日常编码生活中,蓦然回首,灯火阑珊处。

本篇带来另外一种设计模式介绍,你或许天天和它打交道,但是不认识它,它就是“策略模式”。

策略模式就像诸葛亮的锦囊,它在代码中是这样体现的:

比方说,我们有一个销售活动,它有着不同的销售策略

function getPrice(originalPrice, status) {
  if (status === 'pre-sale') { // 预售打 8 折
    return originalPrice * 0.8
  }
  
  if (status === 'promotion') { // 促销打 9 折或者便宜 20
    if (origialPrice <= 100) {
      return origialPrice * 0.9
    } else {
      return originalPrice - 20
    }
  }

	if (status === 'black-friday') { // 周五有多种打折策略
    if (origialPrice >= 100 && originalPrice < 200) {
      return origialPrice - 20
    } else if (originalPrice >= 200) {
      return originalPrice - 50
    } else {
      return originalPrice * 0.8
    }
  }
  
  if (status === 'default') { // 默认不打折
    return originalPrice
  }
}

这样写,有无毛病?

老观众都知道:当然是有的,它违反了“开闭原则”和“单一职责原则”。(这两个原则经常提到,敲重点)

为啥违反“开闭原则”?因为当你要加入一个新的策略的时候,要修改 getPrice 函数内部代码,这不是我们提倡的,我们提倡:不频繁修改函数体内部,通过预留的扩展接口来增加功能;

即:修改函数内部 ⇒ no,拓展函数功能 ⇒ yes

为啥违法“单一职责”?因为 getPrice 函数负责的判断太多了,又是这又是那的,职责太多,都没有解耦;

还有一个更大的问题,当其中的一种策略代码报错,会影响到整个 getPrice 函数的向下执行。

基于以上的原因,于是乎,策略模式闪亮登场!!

function preSalePrice(origialPrice) { // 预售打 8 折
  return originalPrice * 0.8
}

function promotionPrice(origialPrice) { // 促销打 9 折或者便宜 20
  if (origialPrice <= 100) {
    return origialPrice * 0.9
  } else {
    return originalPrice - 20
  }
}

function blackFridayPrice(origialPrice) { // 周五有多种打折策略
  if (origialPrice >= 100 && originalPrice < 200) {
    return origialPrice - 20
  } else if (originalPrice >= 200) {
    return originalPrice - 50
  } else {
    return originalPrice * 0.8
  }
}

function defaultPrice(origialPrice) { // 默认不打折
  return origialPrice
}

let priceStrategies = { // 打折策略
  'pre-sale': preSalePrice,
  'promotion': promotionPrice,
  'black-friday': blackFridayPrice,
  'default': defaultPrice
}

function getPrice(originalPrice, status) { // 根据策略获取价格
  return priceStrategies[status](originalPrice)
}

优化后,代码从这样:

image.png

变成了这样:

image.png

图片来源

完美解决!!代码看起来更简洁、清晰。

如果你的代码有很多 if…else… 判断,各判断里的代码又相互独立,可考虑使用策略模式,封装各判断的代码,用 map 的方式,取出你的锦囊妙计吧

策略模式,就这,原来设计模式就在我们身边~~

参考:useful-design-patterns

作者:bytefish

OK,以上便是本篇分享。点赞关注评论,为好文助力👍

我是掘金安东尼 🤠 100 万阅读量人气前端技术博主 💥 INFP 写作人格坚持 1000 日更文 ✍ 关注我,陪你一起度过漫长编程岁月 🌏

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。