设计模式第2篇｜策略模式

墨蓝 2024-04-17 10:28 149阅读 0赞

![be5851166c5a455aaf1ff143fcaa08ca.png][]

--------------------

> ? 作者简介：[程序员小豪][Link 1]，全栈工程师，热爱编程，曾就职于**蔚来、腾讯**，现就职于某互联网大厂，技术栈：Vue、React、Python、Java  
> ? 本文收录于小豪的[前端][Link 2]系列专栏，后续还会更新**前端入门以及前端面试**的一些相关文章，手把手带你从零学习前端到面试找工作，并如果有想进入前端领域工作的同学，这个[前端][Link 2]专栏会对你有所帮助，欢迎关注起来呀  
> ? 本人也会持续的去关注`AIGC以及鸿蒙`的一些动向并总结到博客中，大家感兴趣的可以关注一下我的[人工智能][Link 3]专栏  
> ? [云原生][Link 4]的入门学习系列，大家有兴趣的可以看一看

#### 目录 ####

*  引言
 *  策略模式是什么？
 *  实现
 *   *  不使用策略模式
     *  使用策略模式
 *  优点
 *  结语

## 引言 ##

最近啊 有一款新游戏非常火，叫幻兽帕鲁，玩家呢可以在这个游戏里用精灵球捕捉帕鲁，捕捉到帕鲁后可以让帕鲁帮你干活赚钱，帕鲁生病你就可以卖掉这批帕鲁，换下一批帕鲁干活，正所谓晚上玩帕鲁，白天当帕鲁，(加入一个电视频道坏了的视频)，由于这个游戏的爆火，所以在网上的各个平台都有人去出售这款游戏，小豪有个朋友呢也去网上某个平台购买这个游戏，在购买时需要涉及支付嘛，这个平台给的渠道有微信支付、支付宝支付、抖音支付、paypal支付以及银行支付等等，小豪作为一个程序员嘛，就会开始思考这种多渠道支付场景会如何设计，其中我认为这里面一定会涉及的设计模式就是`策略模式`。

![c7af5fc802f641a0ae2ffaf527113b50.png][]

## 策略模式是什么？ ##

策略模式（Strategy Pattern）是一种软件设计模式，它允许在运行时根据需要选择算法或行为。策略模式通常涉及定义一系列算法，并将它们封装在单独的类中，使得这些算法可以互相替换。  
这样讲可能大家会有点懵，秉承着`talk is cheap，show me the code`的原则，我直接用代码讲解一下吧。

## 实现 ##

### 不使用策略模式 ###

下面这段这段代码就是我不使用策略模式对上述多渠道支付场景的实现，我们可以看到每一个支付渠道就要在pay方法中加一个if else，每一个if条件里去对每一个支付场景进行具体实现，但是这样实现起来整个代码看起来`不够清晰整洁`，也`不遵守设计模式的开闭原则`，业务复杂度上去后代码`不好维护，不好拓展`。

const pay = (type) => {
        
        if(type === 'wx') {
        
            wx.pay()
        } else if(type === 'ali') {
        
            ali.pay()
        } else if(type === 'douyin') {
        
            douyin.pay()
        } else if(type === 'paypal') {
        
            paypal.pay() 
        } else if(type === 'xxx') {
        
            xxx.pay
        }
    }

### 使用策略模式 ###

这是我们使用策略模式对上述多渠道支付场景的实现，首先实现了一个`Strategy策略类`，这个策略类里会初始化一个`strategies策略对象`，用于不同策略映射不同行为，addStrategy方法用于添加新策略，pay方法用于执行策略.  
下面这里讲每一种支付渠道**单独封装成了一个方法**，用`addStrategy`方法添加支付渠道与支付渠道行为方法的**映射**，下面这里执行微信支付，会去`strategies`取出微信支付对应的行为并执行.

class Strategy {
        
        constructor() {
        
            this.strategies = {
        }
        }
        addStrategy(type, func) {
        
            this.strategies[type] = func
        }
        pay(type,params) {
        
            return this.strategies[type](params)
        }
    }
    
    const payStrategy = new Strategy()
    
    const wxPay = (appid) => {
        
        wx.authorize()
        wx.pay(appid)
    }
    
    const aliPay = (appid) => {
        
        ali.authorize()
        ali.pay(appid)
    }
    
    const douyinPay = (appid) => {
        
        douyin.authorize()
        douyin.pay(appid)
    }
    
    const paypalPay = (appid) => {
        
        paypal.authorize()
        paypal.pay(appid)
    }
    
    const xxxPay = (appid) => {
        
        xxx.authorize()
        xxx.pay(appid)
    }
    
    payStrategy.addStrategy('wx', wxPay)
    payStrategy.addStrategy('ali', aliPay)
    payStrategy.addStrategy('douyin', douyinPay)
    payStrategy.addStrategy('paypal', paypalPay)
    payStrategy.addStrategy('xxx', xxxPay)
    
    payStrategy.pay('wx', 'testAppid')

## 优点 ##

通过上面两段代码的对比，我们可以总结出策略模式具有以下优点：

1.  **分离算法**：策略模式将算法的定义与使用分离开来，使得每个算法可以独立变化，`易于维护和扩展`。
2.  **避免使用条件语句**：策略模式可以`避免使用大量的条件语句`，使代码更加清晰、简洁。
3.  **符合开闭原则**：新增加算法时不需要修改已有的代码，只需添加新的策略即可。
4.  **提高代码复用性**：策略模式将相同的行为封装在不同的策略中，使得这些行为可以被多个上下文共享和复用。

## 结语 ##

各位看官老爷们好，小豪已经建立了技术交流群，如果你很感兴趣，可以私信我加入我的社群。

?社群中不定时会有很多活动，例如学习资料分享、大厂面经分享、技术讨论、行业大佬创业杂谈等等。

?本人目前是在互联网大厂正式工作，也有过多个大厂的工作经历，加入社群也会有简历修改辅导，模拟面试，手把手项目实战教学，大厂工作内推机会以及大厂面试题解析分享等福利。

?社群方向很多，相关领域有Web全栈（前后端）、人工智能、AIGC、自媒体变现、前沿科技文章分享、论文精读等等。

?不管你是多新手的小白，都欢迎你加入社群中讨论、聊天、分享，加速助力你成为下一个技术大佬！也随时欢迎您跟我沟通，一起交流，一起成长。变现、进步、技术、资料、项目、你想要的这里都会有

?网络的风口只会越来越大，风浪越大，鱼越贵！欢迎您加入社群~一个人可以或许可以走的很快，但一群人将走的更远！

?想都是问题，做都是答案！行动起来吧！欢迎评论区or后台与我沟通交流，也欢迎您扫描下方二维码直接加入到我的交流社群！(微信：adcoderhao)

[be5851166c5a455aaf1ff143fcaa08ca.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/1d86d41dcd6e4b81aea32458b2e5d8eb.png
[Link 1]: https://blog.csdn.net/A_D_H_E_R_E
[Link 2]: https://blog.csdn.net/a_d_h_e_r_e/category_12357719.html
[Link 3]: https://blog.csdn.net/a_d_h_e_r_e/category_12402347.html
[Link 4]: https://blog.csdn.net/a_d_h_e_r_e/category_12369482.html
[c7af5fc802f641a0ae2ffaf527113b50.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/14/dda7e7a0a3a448d2993faecc64996ebb.png