Skip to main content

moregeek program

简化理解:策略设计模式_安东尼漫长的技术岁月的博客-多极客编程

就在前不久,我们讲了创建对象的 3 种常见设计模式:工厂设计模式、构造函数设计模式、原型设计模式(​​蓦然回首,“工厂、构造、原型”设计模式,正在灯火阑珊处​​)。这 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)
}

优化后,代码从这样:

简化理解:策略设计模式_策略模式

变成了这样:

简化理解:策略设计模式_策略模式_02

​图片来源​

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

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

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

参考:​​useful-design-patterns​

作者:​​bytefish​

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

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

©著作权归作者所有:来自51CTO博客作者掘金安东尼的原创作品,请联系作者获取转载授权,否则将追究法律责任
简化理解:策略设计模式
https://blog.51cto.com/u_13961087/5556198

easyexcel导入校验必填项不能为空_wx62c28c691b357的博客-多极客编程

前言记录每天开发中遇到的小问题!我是一个前端,为了有工时可填,老板给我分了后端的活。这不就接触到了全新的芝士了嘛,本人表示很开心O(∩_∩)O哈哈~需求详情某页面,新增和导入数据时,增加两个字段的必填项校验;前端部分使用的是vue和element-ui,新增,加必填项校验这种事情最简单了,直接用el-form的rules属性就好了呀epaVehicleType:[ {required: true

想知道vue3与vue2的区别?五千字教程助你快速上手vue3!_wx62ddfbf3622e6的博客-多极客编程

从Vue3发布以来,我就一直对其非常感兴趣,就一直想着将其投入公司的生产中,但是开始考虑到很多不确定性就暂时对一些很小的功能进行一些尝试;慢慢的发现组合式Api的形式非常适合开发(个人感觉),尤其是Vue3.2推出了setup语法糖后直呼真香。后面公司的新项目几乎全部采用了Vue3了。使用Vue3开发也将近大半年了,所以写了这篇文章对Vue2和Vue3做了一个对比总结,一是为了对这段时间使用Vue

#yyds干货盘点#前端不同的渲染技术的区别和联系_文本、的博客-多极客编程

前端可用的渲染技术有 html + css、canvas、svg、webgl,我们会综合运用这些技术来绘制页面。有没有想过这些技术有什么区别和联系,它们和图形学有什么关系呢?本文我们就来谈一下网页渲染技术的计算机理论基础。渲染的理论基础人眼的视网膜有视觉暂留机制,也就是看到的图像会继续保留 0.1s 左右,图形界面就是根据这个原理来设计的一帧一帧刷新的机制,要保证 1s 至少要渲染 10 帧,这样

十分钟教会你如何使用vitepress搭建及部署个人博客站点_wx62ddfbf3622e6的博客-多极客编程

使用VitePress可以让我们快速搭建一个静态博客网站,这篇文章将带领大家搭建一个基于VitePress的静态博客网站并且部署到GitHub Pages(github提供的静态网页服务)快速上手新建目录并初始化(我的目录名为kittydocs)这里我们使用pnpm式,当然yarn,npm都是可以的,如果你没有安装pnpm可以全局安装npm i pnpm -g然后初始化pnpm init安装vit

43%非常看好typescript…解读“2022前端开发者现状报告”_华为云开发者社区的博客-多极客编程

摘要:近日,The Software House 发布了“2022前端开发者现状报告”,笔者在此对报告内容进行解读,供大家参考。本文分享自华为云社区《​​“2022前端开发者现状报告”解读​​》,作者:华为云PaaS服务小智。本次调研对象的覆盖面以及样本量都比较可观——超过120个国家(或地区)、3700+的前端开发者参与了调研;与此同时,报告也邀请了19位业内专家,针对一些问题,分享了自己的见解

简化理解:策略设计模式_安东尼漫长的技术岁月的博客-多极客编程

就在前不久,我们讲了创建对象的 3 种常见设计模式:工厂设计模式、构造函数设计模式、原型设计模式。这 3 种设计模式,真切时刻发生在我们日常编码生活中,蓦然回首,灯火阑珊处。本篇带来另外一种设计模式介绍,你或许天天和它打交道,但是不认识它,它就是“策略模式”。策略模式就像诸葛亮的锦囊,它在代码中是这样体现的:比方说,我们有一个销售活动,它有着不同的销售策略function getPrice(ori

前端chrome浏览器调试总结_wx62e8a975d8564的博客-多极客编程

引言“工欲善其事,必先利其器” 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能干专业的事,这个灵感要来源于之前我想买化妆品时,店里的海报标语,由此联想到,如果你想在某个事情上做好,并且做的专业,那么你一定要把你的工具用好,这样才能事半功倍,我见过很多师兄师姐,他们写了很多代码,他们能够很快的完成工作

如何制作网页_mb62d3b4c95d588的博客-多极客编程

如何制作网页如何制作网页?如何做一个自己喜欢的网站呢?看到别人有自己的网站是不是有点羡慕呢?当然。比较复杂的网站就需要很多技术上面的知识咯。比如javascrpt、jquery、ajax、flash等等!这些都只是让网站的页面好看。使静态的网站变为动态的。那如何制作个简单的网页呢?那么先用Dreamweaver ,Frontpage做,然后细节用Homesite,Hotdog修改,图片用Photo

每天一个css小特效,文字闪烁——【钢铁侠:爱你三千遍】_wx62af348f4156e的博客-多极客编程

@[toc] 前言 我是前端小刘不怕牛牛,love you 3000,愿你能遇到值得的人。今天分享一个唯美的文字闪烁CSS特效希望大家能喜欢 效果图 HTML篇 代码: <div class="main"> <div> <span>I</span></div> <div

十分钟教会你如何使用vitepress搭建及部署个人博客站点_wx62ddfbf3622e6的博客-多极客编程

使用VitePress可以让我们快速搭建一个静态博客网站,这篇文章将带领大家搭建一个基于VitePress的静态博客网站并且部署到GitHub Pages(github提供的静态网页服务)快速上手新建目录并初始化(我的目录名为kittydocs)这里我们使用pnpm式,当然yarn,npm都是可以的,如果你没有安装pnpm可以全局安装npm i pnpm -g然后初始化pnpm init安装vit

jquery对于链和捕获的实战研究_mb625ae00326074的博客-多极客编程

jQuery链 通过jQuery,可以将操作/方法链接在一起。链接允许我们在一条语句中运行多个jQuery方法(在同一个元素上)。JQuery方法链接到目前为止,我们一次编写一条jQuery语句(一条接一条)。然而,有一种称为链接的技术允许我们在同一个元素上一个接一个地运行多个jQuery命令。提示:这样,浏览器就不必多次查找同一元素。要链接一个动作,只需将该动作附加到上一个动作。下面的示例链接

css中常用函数和渐变效果_13339380的博客-多极客编程

calccalc()函数支持加减乘除四种运算,很多类型都可以使用calc()函数,例如​​angle​​、​​length​​、​​frequency​​、​​time​​,​​percentage​​、​​number​​、​​integer​​,因为calc()有很多约束,所以这些类型不一定都可以出现calc()函数。我们在calc()函数中不能使用当前css属性不支持的数据类型。// 下面这