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
就能解决的事情,那就没必要了。但是如果有时候分支很多的话,最好还是考虑一下封装,这样代码清晰,使用也方便。