javascript前端设计模式之策略模式

最近接手了一个老项目，看见那屎山一样的代码着实难受😣。涉及到支付，代码就不贴出来了。因为我们的支付渠道比较多，有微信、支付宝、银联和各大银行以及第三方，看了他们的代码，一堆if-else,不仅分支多，还嵌套很多层级，一言难尽🤦。所以准备重构一下，想到了使用对象映射和策略模式。

对象映射减少 if-else判断

const payMap = {
    other: (args)=>{
        console.log("第三方支付")
    },
    wxJsPay: (args)=>{
        console.log("wxjspay")
    },
    wxNativePay: (args)=>{
        console.log("wxnativepay")
    },
    ...

}

先定义出所有的支付渠道，以及给出每个渠道怎么处理支付的逻辑，然后根据订单的支付方式去调用对应的支付就行了。这样就不会存在所有的支付都用if判断一遍了。

//根据支付方式调用支付
function unionPay(payType,args){
   payMap(payType) && payMap(payType).call(this.config)
}

使用策略模式减少 if-else

//函数式闭包返回

const payStategy = (()=>{
    const payMap = {
        wxJsPay: (args)=>{
            console.log("wxJspay")
            // TODO 返回需要处理的逻辑，下面仅为示例
            return 1+2
        },
        aliPay: (args)=>{
            //TODO
        }
        ...
    }
    return {
        //新增支付渠道处理
        addStategy(paytype,fn){
            if(payMap[payType]) throw new Error("该支付渠道已存在,请重命名")
            payMap[payType] = fn
        },
        payCall(payType,args){
            return payMap[payType] && payMap[payType](args)
        }
    }
})()

const orderPay = payStategy.payCall('wxJsPay','test')
payStategy.addStategy('other',()=>{console.log('第三方支付添加')})
payStategy.payCall('other')

//使用class构建策略模式
//这里就使用看到别人写的满减的例子吧
class Stategy{
    stateyMap = {}
    constructor(){
      this.stateMap = {
        'discount200-20':(price)=>{
            return price - Math.floor(price/200) * 20
        },
        'discount300-50':(price)=>{
            return price - Math.floor(price/300) * 50
        }
      }
    }
    
    addStategy(stategyName,fn){
        if(this.stategyMap[stategyName]) throw new Error('duplicate stategyName')
        this.stategyMap[stategyMap] = fn
    }
    
    stategyCall(stategyName,args){
        return this.stategyMap[stategyName] && this.stategyMap[stategyName](args)
    }

}

const stategy = new Stategy()

stategy.stategyCall('discount300-50',400)

总结

设计模式也不是必须使用的，有时候过度的使用设计模式反而会起反效果。如果就只是一个if-else就能解决的事情，那就没必要了。但是如果有时候分支很多的话，最好还是考虑一下封装，这样代码清晰，使用也方便。