如何少写点if…else

我心飞翔 分类:javascript

最近在维护一个老项目,前一个同事离职之后给我留下了这样的业务逻辑代码,似曾相识的感觉吗?

if (a == 1) {
  if (b && d = 1 || e = 2 && d = 3) {
    if (c && d = 1 || e = 2) {...}else{...}
  }
} else if (a == 2) {
  if (b) {
    if (c) {...}
  }
} else if (a == 3) {
  if (b) {
    if (c) {...}
  }
}
 

为什么要修改它

这段代码有问题吗? 没有问题,功能一直在稳定的运行,如果下次再多一些情况需要判断,那么就显得难以维护了,而且这对同事也是一种999的暴击伤害好吗,虽然不至于干架,不过一定会被人鄙视,提升代码可读性和可维护性刻不容缓。
当你修改别人代码的时候,只需要改一个方法,但是梳理业务逻辑可能需要半天时间,你崩溃嘛...该一行代码牵动整个业务逻辑,到处报错或者出现bug,你崩溃嘛...怎么来维护同事关系,让同事刮目相看呢?

如果你想和你刚交的同事之间保持亲密关系,那么请往下看

进化:switch

switch (a) {
case 1:
  b(123);
  break;
case 2:
  b(567);
  break;
case 3:
  switch(res){
    case 1:
    b(234);
    break;
  }
  break;
}
 

switch相对于if...else语句在代码可读性上有了明显的提升,不过如果存在多重判断,就显得有点吃力了,也会影响代码的可读性。

进化:状态模式

function resultState(type) {
  let state = {
    state0: function() {
      // 情况1
    },
    state1: function() {
      // 情况2
    },
    state2: function() {
      // 情况3
    },
    state3: function() {
      // 情况4
    },
    state4: function() {
      // 情况5
    }
  },
  result = 'state' + type;

  state[result] && state[result]()
}

// 执行第一种情况
resultState(1)
 

以上代码对于多个if...else语句可读性更好,拓展性也比switch...case语句高,以后如果出现更多的逻辑判断,添加代码也不会影响可读性。

进化:多重判断下的状态模式封装

上面的状态模式代码如果每个状态中还需要其他状态的判断,那么代码的可维护性和可读性也会受影响。

对于多重状态判断,我们来举个例子:
1. 满10享受满减活动1
2. 满20享受满减活动2,包邮,不打折
3. 满30享受满减活动3,包邮,且8折
4. 满40享受满减活动4,不包邮,且7折

对于上面的一些活动,来看一下状态,总共三种状态,存在三重的判断情况:满减活动,包邮活动,打折活动

function getResult(type, money) {
// 满减活动状态控制
let reduceState = {
state0: function(money) {
// 满减活动1 
return money - 2
},
state1: function() {
// 满减活动2
},
state2: function() {
// 满减活动3
},
state4: function() {
// 满减活动3
},
// ...拓展更多邮费活动
}
let expressState = {
state0: function(money) {
// 包邮
return money - 10
},
state1: function() {
// 不包邮
},
state2: function() {
// 减2块邮费
},
state3: function() {
// 减6块邮费
},
// ...拓展更多邮费活动
}
let discountState = {
state0: function(money) {
// 打9折
return money * 9 / 10 // js小数计算存在问题整数不会
},
state1: function() {
// 打8折
},
state2: function() {
// 打7折
},
// ...拓展更多打折活动
}
let activityState = {
state0: function() {
// 第一种组合
let result = reduceState.state0(money) // 满减活动
return result
},
state1: function() {
// 第二种组合
let result = reduceState.state0(money) // 满减活动
result = expressState.state1(result) // 包邮活动
return result
},
state2: function() {
// 第三种组合
let result = reduceState.state0(money) // 满减活动
result = expressState.state2(result) // 包邮活动
result = discountState.state1(result) // 打折活动
return result
},
state3: function() {
// 更多的活动组合
}
}
return activityState['state' + type]()
}
getResult(1, 100) // 执行

多重判断定义多种状态就可以了,在activityStae对象中自由组合你想要的结果,如果要添加活动或者修改活动,也只需要维护activityStae这一个对象就可以了。在同事处理这部分的代码时,他也不需要再去关注活动的逻辑,只关心activityStae中的活动方法是否搭配正确,多种活动之间的耦合度也降低了,每种类型的活动各管各的,即使其中一种活动有了变化,也只需要修改一个方法即可,不必去理清整套代码的逻辑。

我在代码上一直在改进,通过重构项目中的部分if...else语句,降低了业务之间的耦合程度,细粒度的拆分各种活动,各个活动不耦合,维护起来方便,代码的质量和稳定性也能得到提升。

以上为伪代码,部分地方可能报错,不过大体思想和逻辑应该还算清晰了。

推荐《javascript设计模式》,看了的确受益匪浅,一些前人总结的代码思想对提升自己的设计能力,代码的稳定性、可拓展性、可维护性都很有帮助。

作者:掘金-如何少写点if...else

回复

我来回复
  • 暂无回复内容