js中如何用策略模式替换条件判断

策略模式通过将条件判断逻辑封装为独立策略类,使代码更清晰、易维护。1.定义策略接口,声明算法方法;2.创建具体策略类实现接口;3.环境类持有策略并执行;4.客户端通过环境类动态选择策略。适用于多条件分支且频繁变动的场景,如订单折扣、支付方式等。优点是符合开闭原则,缺点是类数量增加,客户端需了解所有策略。

js中如何用策略模式替换条件判断

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

js中如何用策略模式替换条件判断

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

js中如何用策略模式替换条件判断

如何识别应该使用策略模式的场景?

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

js中如何用策略模式替换条件判断

策略模式的具体实现步骤

定义策略接口: 声明所有具体策略需要实现的方法。比如,在订单折扣的例子中,可以定义一个 DiscountStrategy 接口,包含一个 calculateDiscount 方法。

// 策略接口class DiscountStrategy {  calculateDiscount(price) {    throw new Error("Method 'calculateDiscount()' must be implemented.");  }}

创建具体策略类: 实现策略接口,每个类代表一种具体的算法。例如,可以创建 NormalUserDiscountVipUserDiscountSuperVipUserDiscount 等类,分别实现不同的折扣计算逻辑。

// 具体策略类 - 普通用户折扣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)}`); // 输出:普通用户最终价格:90console.log(`VIP 用户最终价格:${vipOrder.calculateFinalPrice(price)}`); // 输出:VIP 用户最终价格:80console.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)}`); // 输出:初始价格:90order.setDiscountStrategy(new VipUserDiscount());console.log(`切换为 VIP 折扣后的价格:${order.calculateFinalPrice(100)}`); // 输出:切换为 VIP 折扣后的价格:80

策略模式的优缺点是什么?

优点:代码清晰: 将不同的算法封装在独立的类中,避免了大量的条件判断语句。易于维护: 修改或增加新的策略,不会影响其他策略。易于扩展: 可以很容易地增加新的策略类,而无需修改现有代码。符合开闭原则: 对修改关闭,对扩展开放。缺点:类增多: 每个策略都需要一个类,可能会导致类的数量增多。客户端需要了解所有策略: 客户端需要知道有哪些策略,才能选择合适的策略。

除了订单折扣,策略模式还有哪些应用场景?

策略模式的应用场景非常广泛,比如:

支付方式选择: 可以将不同的支付方式(支付宝微信支付、银行卡支付)封装成不同的策略类。排序算法选择: 可以将不同的排序算法(冒泡排序、快速排序、归并排序)封装成不同的策略类。数据验证: 可以将不同的数据验证规则封装成不同的策略类。

总而言之,策略模式是一种非常有用的设计模式,可以帮助我们编写更清晰、更易于维护和扩展的代码。当然,任何设计模式都不是银弹,需要根据具体的场景来选择是否使用。

以上就是js中如何用策略模式替换条件判断的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1506476.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月20日 04:10:07
下一篇 2025年12月20日 04:10:24

相关推荐

  • 如何用 CSS 实现微信输入法进度条按钮效果?

    如何在 css 中呈现微信输入法的进度条按钮效果? 问题:微信输入法中的进度条按钮具有独特的外观。如何使用 css 来实现这种效果? 答案:要实现微信输入法的进度条按钮效果,可以使用以下 css 属性的组合: linear-gradient:创建渐变效果。background-position:控制…

    2025年12月24日
    300
  • 微信小程序文本省略后如何避免背景色溢出?

    去掉单行文本溢出多余背景色 在编写微信小程序时,如果希望文本超出宽度后省略显示并在末尾显示省略号,但同时还需要文本带有背景色,可能会遇到如下问题:文本末尾出现多余的背景色块。这是因为文本本身超出部分被省略并用省略号代替,但其背景色依然存在。 要解决这个问题,可以采用以下方法: 给 text 元素添加…

    2025年12月24日
    000
  • 如何使用 Laravel 框架轻松整合微信支付与支付宝支付?

    如何通过 laravel 框架整合微信支付与支付宝支付 在 laravel 开发中,为电商网站或应用程序整合支付网关至关重要。其中,微信支付和支付宝是中国最流行的支付平台。本文将介绍如何使用 laravel 框架封装这两大支付平台。 一个简单有效的方法是使用业内认可的 easywechat lara…

    2025年12月24日
    000
  • Laravel 框架中如何无缝集成微信支付和支付宝支付?

    laravel 框架中微信支付和支付宝支付的封装 如何将微信支付和支付宝支付无缝集成到 laravel 框架中? 建议解决方案 考虑使用 easywechat 的 laravel 版本。easywechat 是一个成熟、维护良好的库,由腾讯官方人员开发,专为处理微信相关功能而设计。其 laravel…

    2025年12月24日
    300
  • 如何在 Laravel 框架中轻松集成微信支付和支付宝支付?

    如何用 laravel 框架集成微信支付和支付宝支付 问题:如何在 laravel 框架中集成微信支付和支付宝支付? 回答: 建议使用 easywechat 的 laravel 版,easywechat 是一个由腾讯工程师开发的高质量微信开放平台 sdk,已被广泛地应用于许多 laravel 项目中…

    2025年12月24日
    000
  • 使用Laravel框架如何整合微信支付和支付宝支付?

    使用 Laravel 框架整合微信支付和支付宝支付 在使用 Laravel 框架开发项目时,整合支付网关是常见的需求。对于微信支付和支付宝支付,推荐采用以下方法: 使用第三方库:EasyWeChat 的 Laravel 版本 建议直接使用现有的 EasyWeChat 的 Laravel 版本。该库由…

    2025年12月24日
    000
  • 如何将微信支付和支付宝支付无缝集成到 Laravel 框架中?

    如何简洁集成微信和支付宝支付到 Laravel 问题: 如何将微信支付和支付宝支付无缝集成到 Laravel 框架中? 答案: 强烈推荐使用流行的 Laravel 包 EasyWeChat,它由腾讯开发者维护。多年来,它一直保持更新,提供了一个稳定可靠的解决方案。 集成步骤: 安装 Laravel …

    2025年12月24日
    100
  • 微信小程序TDesign中“t-grid–card”选择器的作用是什么?

    “t-grid–card”选择器在微信小程序TDesign中的疑惑 在微信小程序TDesign UI库中,很多开发者对“t-grid–card”这个CSS选择器感到疑惑。它与DOM结构中元素的class属性“t-grid t-card class t-class”不一致,且命…

    2025年12月24日
    000
  • TDesign UI库中 .t-grid–card 选择器如何理解?

    TDesign UI库CSS选择器中的困惑 在微信小程序的使用中,TDesign UI库提供了丰富的组件,其CSS选择器的写法引起了很多疑问。其中一个令开发者疑惑的写法是 .t-grid–card,它似乎与DOM结构中的类名不一致。 疑问解答 如何理解这个选择器? .t-grid&#82…

    2025年12月24日
    200
  • 微信小程序 TDesign UI 库中 CSS 选择器 .t-grid–card 如何生效?

    微信小程序 TDesign UI 库中的 CSS 选择器疑云 在微信小程序开发中使用 TDesign UI 库时,开发者可能会遇到一些疑惑的 CSS 选择器。例如,在如下 DOM 结构中: 元素 class 是 ‘t-grid t-card class t-class’,但是选择器是 ‘.t-gri…

    2025年12月24日
    200
  • 微信小程序 TDesign UI 库 CSS 选择器:为什么“.t-grid–card” 不匹配 DOM 结构?

    微信小程序 tdesign ui库 css 选择器疑难解答 在微信小程序开发环境中使用 tdesign ui 库时,您可能会遇到这样的 css 选择器: .t-grid–card 乍一看,该选择器似乎不符合 dom 结构中元素的 class 名称: 通常,css 选择器应该与元素的 class 名…

    2025年12月24日
    000
  • 企业微信二维码嵌入iframe后如何调整大小?

    更改iframe中二维码大小 在TS文件中,嵌入了一个iframe包含一个二维码,但由于iframe样式设置不当,二维码被隐藏了一半。解决方法如下: 虽然修改外层iframe的样式不起效果,但可以修改二维码页面本身的样式。 猜测:企业微信二维码 根据问题描述,推测该二维码属于企业微信。企业微信的二维…

    2025年12月24日
    000
  • Bear 博客上的浅色/深色模式分步指南

    我最近使用偏好颜色方案媒体功能与 light-dark() 颜色函数相结合,在我的 bear 博客上实现了亮/暗模式切换。 我是这样做的。 第 1 步:设置 css css 在过去几年中获得了一些很酷的新功能,包括 light-dark() 颜色函数。此功能可让您为任何元素指定两种颜色 &#8211…

    2025年12月24日
    100
  • 小程序嵌入 H5,iOS 字体失效!怎么办?

    小程序嵌入 H5 页面中字体失效问题 在使用 Vue 开发 H5 页面时,为页面设置了字体,但在 iOS 系统小程序中,嵌入的 H5 页面字体却失效了。导致这个问题的原因是什么,该如何解决呢? 问题分析: 小程序中嵌入 H5 页面需要加载其资源,而为了避免安全问题,小程序对加载的外链资源进行了限制。…

    2025年12月24日
    000
  • 小程序嵌入H5页面字体失效怎么办?

    小程序嵌入 h5 页面字体出错怎么办? 在开发小程序时,在 h5 页面中使用自定义字体时,经常会遇到字体失效的问题。这是因为小程序中的 webview 对字体有额外的限制。 问题原因 小程序 webview 需要将字体文件添加到白名单。字体资源需要通过 https 协议访问。 解决方案 添加白名单 …

    2025年12月24日
    000
  • 小程序嵌入 H5 页面字体失效怎么办?

    小程序嵌入的 H5 页面字体失效的解决方法 问题: 在 Vue 开发的 H5 页面中,配置了自定义字体 fontface,但在 iOS 系统的小程序中,字体却失效了。 答案: 小程序的 webview 组件需要配置以下事项: 白名单配置:确保在小程序配置文件中已将 H5 页面 URL 添加到白名单列…

    2025年12月24日
    000
  • 微信小程序样式为何在使用真实数据后发生变化?

    微信小程序样式为何不同? 在开发微信小程序时,常见的疑问是为什么在使用假数据设置样式后,在请求真实数据并使用它时,样式却发生了变化。 以下提供了一个可能导致此问题的根源: DOM 结构与样式冲突 假数据与真实数据可能具有不同的 DOM 结构。当假数据被替换为真实数据时,DOM 结构也会发生变化,从而…

    2025年12月24日
    000
  • 小程序 H5 页面字体设置失效怎么办?

    小程序 H5 页面字体问题 在小程序中嵌入的 H5 页面中,有时会出现字体设置失效的情况。例如,使用 Vue 开发 H5 页面,并设置了自定义字体(通过 @font-face),但在 iOS 小程序中,这些字体却无法显示。 针对此问题,可以尝试以下解决方案: 检查白名单和 HTTPS: 小程序中的 …

    2025年12月24日
    000
  • 微信小程序样式“变脸”:调试正常,接入接口后样式却变了?

    微信小程序样式“变脸”之谜 在微信小程序开发中,样式突然发生改变,往往让人摸不着头脑。近期,一位开发者遇到了这样一个问题:调试时使用假数据呈现正常,但接入后端接口后,样式却发生了变化。 根据提问者的描述,问题可能是由后端返回的数据与假数据结构不一致造成的。但由于提问者并未提供具体的代码片段,因此无法…

    2025年12月24日
    000
  • 小程序内 H5 页面字体失效如何解决?

    小程序嵌入 H5 页面字体失效的解决方法 问题: 在 Vue 开发的 H5 页面中设置了 font-face 样式,但在 iOS 系统中的小程序内字体却失效了。如何解决? 解决方案: 小程序的 webview 需要配置两个重要设置: 白名单注册:将包含字体包的静态资源文件路径添加到小程序的白名单中。…

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信