js策略模式优化if-else

在开发中遇到一个函数的圈复杂度有21，原因是里面包含了7个if判断，于是就想着怎么优化这部分代码，把圈复杂度降下来。

我们经常遇到比较复杂的条件判断，最普遍的做法是if-else判断,但是这种方法往往会让我们的代码变得臃肿；优雅一点的写法会使用switch...case;本文我们来介绍一下如何运用策略模式来优化复杂的if-else判断。

一、什么是策略模式

策略模式是指定义一系列的算法，把他们一个个都封装起来，目的是把算法的实现和使用分开来。

• 如何实现：通过一个对象或者其他hash数据结构，来映射不同的策略。
• 优点：1.避免使用多重条件判断 2.扩展性好、复用性好
• 缺点：1.策略类会增多。

二、使用策略模式优化代码

• 优化前

  // 圈复杂度16，you must be kidding
  item.forEach((col) => {
      if (col.index === 'devFaultModule' || col.index === 'userFaultModule') {
          ......
      }
      if (col.index === 'devFaultIsDuplicated') {
          col.click = () => {
              ......
          };
      }
      if (col.index === 'rosbagState') {
          col.click = () => {
              ......
          };
      }
      if (col.index === 'relatedVisionId') {
          col.click = () => {
              ......
          };
      }
      if (col.index === 'alarmErrorCode') {
          col.click = () => {
              ......
          };
      }
      if (col.index === 'faultOccurredContext') {
          col.click = () => {
              ......
          };
      }
      if (col.index === 'visionStatus') {
          col.click = () => {
              ......
          };
      }
  });
  

• 优化后

  addColClick = {
          'devFaultIsDuplicated': () => {
              ......
          },
          'rosbagState': () => {
             ......
          },
          'relatedVisionId': () => {
             ......
          },
          'alarmErrorCode': () => {
             ......
          },
          'faultOccurredContext': () => {
             ......
          },
          'visionStatus': () => {
            ......
          },
      };
  item.forEach((col) => { //圈复杂度4
      if (col.index === 'devFaultModule' || col.index === 'userFaultModule') {
         col.listOfFilter = faultModule;
         col.options = faultModule;
         col.formatter = (value) => this.FAULT_MODULE_OBJ[value];
       }
       col.click = this.addColClick[col.index];
  });
  

以上例子为了便于说明可能不太恰当，但在实际开发中这种思想非常实用。