JS策略模式替代if-else的高效方法
亲爱的编程学习爱好者,如果你点开了这篇文章,说明你对《JS中策略模式替代条件判断的方法》很感兴趣。本篇文章就来给大家详细解析一下,主要介绍一下,希望所有认真读完的童鞋们,都有实质性的提高。
策略模式通过将条件判断逻辑封装为独立策略类,使代码更清晰、易维护。1.定义策略接口,声明算法方法;2.创建具体策略类实现接口;3.环境类持有策略并执行;4.客户端通过环境类动态选择策略。适用于多条件分支且频繁变动的场景,如订单折扣、支付方式等。优点是符合开闭原则,缺点是类数量增加,客户端需了解所有策略。

策略模式,简单说,就是把一堆 if...else 或者 switch...case 语句,变成一个个独立的策略类,然后根据不同的情况选择不同的策略来执行。这样做的好处嘛,当然是让代码更清晰、更易于维护和扩展啦。

将条件判断替换为策略模式,核心在于定义一系列算法(策略),并将每个算法封装在独立的类中。 客户端可以根据运行时条件选择不同的策略,而无需修改现有代码。

如何识别应该使用策略模式的场景?
当你发现代码中充斥着大量的条件判断,而且这些判断逻辑还经常变动,那么策略模式可能就是个不错的选择。举个例子,比如你有一个订单处理系统,根据不同的用户类型(普通用户、VIP 用户、超级 VIP 用户)有不同的折扣策略。如果直接用 if...else 来判断,代码会变得很臃肿,而且每增加一种用户类型,都要修改代码。这时候,用策略模式就能很好地解决这个问题。

策略模式的具体实现步骤
定义策略接口: 声明所有具体策略需要实现的方法。比如,在订单折扣的例子中,可以定义一个
DiscountStrategy接口,包含一个calculateDiscount方法。// 策略接口 class DiscountStrategy { calculateDiscount(price) { throw new Error("Method 'calculateDiscount()' must be implemented."); } }创建具体策略类: 实现策略接口,每个类代表一种具体的算法。例如,可以创建
NormalUserDiscount、VipUserDiscount、SuperVipUserDiscount等类,分别实现不同的折扣计算逻辑。// 具体策略类 - 普通用户折扣 class NormalUserDiscount extends DiscountStrategy { calculateDiscount(price) { return price * 0.9; // 九折 } } // 具体策略类 - VIP 用户折扣 class VipUserDiscount extends DiscountStrategy { calculateDiscount(price) { return price * 0.8; // 八折 } } // 具体策略类 - 超级 VIP 用户折扣 class SuperVipUserDiscount extends DiscountStrategy { calculateDiscount(price) { return price * 0.7; // 七折 } }创建环境类(Context): 环境类负责维护一个策略对象,并提供一个方法来执行策略。客户端通过环境类来使用策略,而无需直接与具体策略类交互。
// 环境类 class Order { constructor(userType) { this.userType = userType; this.discountStrategy = this.createDiscountStrategy(userType); } createDiscountStrategy(userType) { switch (userType) { case "normal": return new NormalUserDiscount(); case "vip": return new VipUserDiscount(); case "superVip": return new SuperVipUserDiscount(); default: return new NormalUserDiscount(); // 默认策略 } } calculateFinalPrice(price) { return this.discountStrategy.calculateDiscount(price); } }客户端使用: 客户端只需要创建环境类,并传入相应的参数,就可以使用不同的策略了。
// 客户端使用 const normalOrder = new Order("normal"); const vipOrder = new Order("vip"); const superVipOrder = new Order("superVip"); const price = 100; console.log(`普通用户最终价格:${normalOrder.calculateFinalPrice(price)}`); // 输出:普通用户最终价格:90 console.log(`VIP 用户最终价格:${vipOrder.calculateFinalPrice(price)}`); // 输出:VIP 用户最终价格:80 console.log(`超级 VIP 用户最终价格:${superVipOrder.calculateFinalPrice(price)}`); // 输出:超级 VIP 用户最终价格:70
如何动态切换策略?
上面的例子中,策略是在 Order 类的构造函数中确定的。如果需要在运行时动态切换策略,可以修改 Order 类,提供一个 setDiscountStrategy 方法。
class Order {
constructor(userType) {
this.userType = userType;
this.discountStrategy = this.createDiscountStrategy(userType);
}
createDiscountStrategy(userType) {
switch (userType) {
case "normal":
return new NormalUserDiscount();
case "vip":
return new VipUserDiscount();
case "superVip":
return new SuperVipUserDiscount();
default:
return new NormalUserDiscount(); // 默认策略
}
}
setDiscountStrategy(discountStrategy) {
this.discountStrategy = discountStrategy;
}
calculateFinalPrice(price) {
return this.discountStrategy.calculateDiscount(price);
}
}
// 客户端动态切换策略
const order = new Order("normal");
console.log(`初始价格:${order.calculateFinalPrice(100)}`); // 输出:初始价格:90
order.setDiscountStrategy(new VipUserDiscount());
console.log(`切换为 VIP 折扣后的价格:${order.calculateFinalPrice(100)}`); // 输出:切换为 VIP 折扣后的价格:80策略模式的优缺点是什么?
- 优点:
- 代码清晰: 将不同的算法封装在独立的类中,避免了大量的条件判断语句。
- 易于维护: 修改或增加新的策略,不会影响其他策略。
- 易于扩展: 可以很容易地增加新的策略类,而无需修改现有代码。
- 符合开闭原则: 对修改关闭,对扩展开放。
- 缺点:
- 类增多: 每个策略都需要一个类,可能会导致类的数量增多。
- 客户端需要了解所有策略: 客户端需要知道有哪些策略,才能选择合适的策略。
除了订单折扣,策略模式还有哪些应用场景?
策略模式的应用场景非常广泛,比如:
- 支付方式选择: 可以将不同的支付方式(支付宝、微信支付、银行卡支付)封装成不同的策略类。
- 排序算法选择: 可以将不同的排序算法(冒泡排序、快速排序、归并排序)封装成不同的策略类。
- 数据验证: 可以将不同的数据验证规则封装成不同的策略类。
总而言之,策略模式是一种非常有用的设计模式,可以帮助我们编写更清晰、更易于维护和扩展的代码。当然,任何设计模式都不是银弹,需要根据具体的场景来选择是否使用。
今天关于《JS策略模式替代if-else的高效方法》的内容就介绍到这里了,是不是学起来一目了然!想要了解更多关于条件判断,策略模式的内容请关注golang学习网公众号!
国巨并购芝浦电子进展顺利
- 上一篇
- 国巨并购芝浦电子进展顺利
- 下一篇
- MySQL定时任务清理数据方法
-
- 文章 · 前端 | 4天前 | 前端 · 性能优化 · css · Core Web Vitals · 渲染性能 · 前端 渲染性能 CSS性能 CLS content-visibility contain-intrinsic-size Layout
- 前端长页面渲染卡顿怎么排查:用 content-visibility 跳过离屏区块
- 430浏览 收藏
-
- 文章 · 前端 | 1星期前 | 前端 · javascript · AbortController · 表单提交 · AbortController 旧响应覆盖 前端重复提交 loading锁 fetch取消 按钮防抖
- 前端按钮重复提交怎么办:loading 锁和 AbortController 最小配方
- 442浏览 收藏
-
- 文章 · 前端 | 1星期前 | 前端 · 缓存 · Service Worker · 白屏 · 发布故障 · 缓存策略 前端白屏 Service Worker CacheStorage 资源404 发布回滚
- 前端发布后白屏复盘:Service Worker 缓存旧入口导致 JS 资源 404
- 469浏览 收藏
-
- 文章 · 前端 | 1星期前 | 前端开发 · localStorage · 表格配置 · 用户偏好 · 后台系统 · 用户偏好 localStorage 前端表格 列配置 可见列 列宽保存
- 前端表格列设置刷新后丢失怎么办:可见列、列宽和顺序这样保存
- 351浏览 收藏
-
- 文章 · 前端 | 1星期前 | 前端 · 接口排查 · 运维手册 · 性能告警 · 前端 AbortController 接口超时 Network瀑布图 降级回滚 线上告警
- 前端接口超时告警运行手册:从瀑布图到降级回滚
- 287浏览 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 485次学习
-
- ljg-skills
- ljg-skills 是李继刚开源的 AI 技能与提示词集合,面向大模型使用者整理了一批可复用的 prompt、角色设定和任务技能模板,适合用于学习提示词设计、搭建个人 AI 工作流和沉淀团队常用智能体能力。
- 4428次使用
-
- MELO音乐
- MELO音乐是一站式AI视频与音乐制作助手,对标suno, udio的高品质体验。提供伴奏生成、原创写词、无损导出、哼唱识曲、混音变声等全套音频与短视频编辑工具。无论是流行Kpop、电音说唱、民谣古风、摇滚儿歌还是商用轻音乐,MELO为你免费谱曲,轻松做同款!
- 4079次使用
-
- UniScribe
- UniScribe 是一款 AI 音视频转文字与内容整理工具,支持上传音频、视频文件或粘贴 YouTube 链接,自动生成转写文本、摘要、思维导图和关键问题,并支持多格式导出,适合会议记录、课程学习、访谈整理和内容创作复盘。
- 4064次使用
-
- 剧云
- 剧云是专业中文剧本创作平台,安全稳定运行十余年,集成AI编剧、剧本医生审核、人物小传、剧情关系图、大纲编写、多人协作、Word导入导出、版权管控功能,数据安全防护,轻松高效创作剧本。
- 4253次使用
-
- 万象有声
- 万象有声,一个专为有声创作者打造的新一代智能有声内容创作平台。平台提供专业的智能拆章、智能画本编辑、AI配音、AI生成音效、后期制作、智能对轨、智能审听等有声创作全流程工具,可以帮助创作者高效、低成本创作出引人入胜的有声作品。立即体验,让有声书制作更简单!
- 4223次使用
-
- JavaScript函数定义及示例详解
- 2025-05-11 502浏览
-
- CSS变量简化按钮悬停效果技巧
- 2026-05-31 501浏览
-
- JavaScript符号类型详解与应用
- 2026-05-31 501浏览
-
- HTML剪贴板复制粘贴怎么用
- 2026-05-26 501浏览
-
- data-*属性详解:HTML数据存储与DOM操作技巧
- 2026-05-25 501浏览

