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

更新于 2月12日  约 4 分钟
在实际项目中,往往有很复杂的流程,随着项目的推进,可能流程有会有改动,如果前期代码没有做好流程管理,对后期的维护带来巨大的麻烦

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

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;
    }

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

阅读 148更新于 2月12日

推荐阅读
目录