最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 如何少写点if...else

    正文概述 掘金(啦啦啦啦啦同志)   2021-03-18   561

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

    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

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元