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

最新推荐文章于 2024-06-12 11:13:48 发布

程序员小豪

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量1k

点赞数 26

分类专栏：前端文章标签：前端 javascript 设计模式策略模式

本文链接：https://blog.csdn.net/A_D_H_E_R_E/article/details/135942794

版权

前端专栏收录该内容

29 篇文章 24 订阅

订阅专栏

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

引言

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

策略模式是什么？

策略模式（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')