前端项目中复杂的流程控制

在实际项目中，往往有很复杂的流程，随着项目的推进，可能流程有会有改动，如果前期代码没有做好流程管理，对后期的维护带来巨大的麻烦

没有流程控制前，代码可能是这样的

if (/** 参数1 */) {
    if (/** 参数2 */) {
        if (/** 参数3 */) {
            // 流程1
        } else {
            // 流程2
        }
    } else {
        // 流程3
    }
}

这样的写法导致后期如果流程稍有改动，可能代码就会大变动，而且时间一长又要重新看代码，才能理清逻辑

流程控制

1. 先理清每个流程，定义好状态机，分别赋予流程一个状态

   const STATUS = {
       process_err: 0,
       process_1: 1,
       process_2: 2,
       process_3: 3,
       process_4: 4
   };

2. 确定每个流程要做事情，并封装好函数
   可以将方法都封装在一个类中

   function fetch1() {
       // TODO
   }
   
   function fetch2() {
       // TODO
   }
   
   function fetch1() {
       // TODO
   }

3. 流程判断

   let processStatus; // 存放流程状态
   
   if (params.a === "a" || params.b === "b") {
       processStatus = STATUS.process_1;
   } else if (params.a !== "a" && params.c === "c") {
       processStatus = STATUS.process_2;
   } else if (params /*.....*/) {
       // TODO
   } else {
       processStatus = STATUS.process_err;
   }
   
   // 根据流程执行对应的方法
   switch (processStatus) {
       case STATUS.process_1:
       case STATUS.process_2:
           fetch1();
           break;
       case STATUS.process_3:
           fetch2();
           break;
       case STATUS.process_4:
           fetch3();
           break;
       default:
           // TODO
           break;
   }

   通过状态机来对流程进行控制，即使后期流程改变或新增，我们只需要改动对应流程的相关代码，而且我们完全可以不用担心改动之外的流程