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

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

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

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

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

原文链接:segmentfault.com

上一篇:高级前端知识点汇总
下一篇:教你一步步封装vue组件并发布到npm

相关推荐

  • 🚩四年前端带你理解路由懒加载的原理

    前言 说起路由懒加载,大家很快就知道怎么实现它,但是问到路由懒加载的原理,怕有一部分小伙伴是一头雾水了吧。下面带大家一起去理解路由懒加载的原理。 路由懒加载也可以叫做路由组件懒加载,最常用的是通过im...

    1 个月前
  • 🔥手写大厂前端知识点源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    4 个月前
  • 🔥前端面试大厂手写源码系列(上)

    如今前端攻城狮的要求越来越高,会使用常见的API已经不能满足现如今前端日益快速发展的脚步。现在大厂基本都会要求面试者手写前端常见API的原理,以此来证明你对该知识点的理解程度。

    3 个月前
  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    (/public/upload/4dc64bf14f4bd714fcd87e98b6a10373) 第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两...

    2 个月前
  • (本人)2019前端校招经历

    我是一个想要找前端工作的妹纸,最近电话面了挺多企业,在每次面试中都会发现自己的不足或者没涉及到的方面,一边被拒一边学习新知识。想要在这里记录、分享前端校招遇到的问题,希望每一次都有提升,下一次不会再犯...

    2 年前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇开发环境搭建 私人管家包管理器 待续 点击查看源网页(/public/upload/7b9b054b364e1627547...

    1 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 目录: 磨刀篇开发环境搭建 私人管家包管理器 待续 点击查看源网页(/public/upload/fde96d7941fadecf7f3...

    2 个月前
  • (前端工程化01)私人管家-包管理器

    字数:3883, 阅读时间:10分钟,点击阅读原文 点击查看源网页(/public/upload/4b3364dbda7cb152b15a01d33da483ed) 包管理器 在很久很久...

    2 个月前
  • (初级前端)面试如何写出一个满意的深拷贝

    前言 已经有很多关于深拷贝与浅拷贝的文章,为什么自己还要写一遍呢💯 ❝ 学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。

    9 天前
  • (二)各大笔试网站(牛客网、赛码网、测评网)介绍和做题技巧——以前端开发为例

    (/public/upload/3855e8b808281493dde93db067f6b1c2) 进行笔试之前,我们首先要了解的是,我们春招、秋招的时候,企业用的是什么平台。

    5 个月前

官方社区

扫码加入 JavaScript 社区