队列在前端项目中的应用

作者：HerryLo (opens new window)

博客原文链接 (opens new window)

这次总算是用上了数据结构啦，不然我自己也快忘了，知识只有在使用的前提下，才是活的知识，才不容易忘记。这次在项目中用到的是队列，当然这里不是为了秀，只是为了记录、总结，分享开发中的心得。

任务需求是控制多个弹窗的展示，需要有优先级，同时也需要根据数据的状态，来展示不同的弹窗。如果是直接通过硬编码的形式控制，通过if-else其实也可以解决这个问题，但这会导致代码的耦合，不利于后期的维护和迭代，如果需要增加弹窗，反而还需要一段一段的修改，而通过队列控制，每一个弹窗都是一个函数，是否展示根据每个函数调用的结果来保证，好了我们来说说具体思路吧！

具体思路和代码

需求：现在有A、B、C三个弹窗，需要在app首页展示，需要控制它们的展示顺序，展示顺序是A——>B——>C...等，每个弹窗只展示一次。当A弹窗展示之后，叉掉A弹窗，才会再展示B弹窗，以此类推。但也会有一种情况，比如在app首页展示了A，但是用户未操作，直接点击到app个人中心，当再次进入首页时，需要展示B弹窗，以此类推。

大致的需求如上，其中还有一些小的细节，在这里就省略了，我们现在需要来对它进行实现。

let APopShow = getStorage('APopShow')
let BPopShow = getStorage('BPopShow')
let CPopShow = getStorage('CPopShow')
if(!APopShow) {
    AShow = true
    setStorage(!AShow)
    return;
}else if(!BPopShow) {
    BShow = true
    setStorage(!BShow)
    return;
}else if(!CPopShow){
    CShow = true
    setStorage(!CShow)
    return;
}

上面就是一个最简易的代码了，这个伪代码非常的简洁，if - else if - else if ....通过一系列的if-else来控制展示的顺序。这里会封装为一个公用的弹窗组件，来控制多个弹窗的展示。

使用队列优化

队列可以很好的解决这个问题，避免大量的if-else，队列是先进先出，通过队列控制函数调用，而函数中就是具体的业务逻辑了。我们这里是用队列的知识，不是完全照搬队列！！

let Queue = [];
let AShow = false;
let BShow = false;
let CShow = false;

function pushQueue(fnc) {
    if(fnc instanceof Function){
        Queue.push(fnc);
    }
}
function runQueue() {
    for(let fn item Queue) {
        fn();
    }
}

function AFunc() {};
function BFunc() {if(AShow) return false;};
function CFunc() {if(BShow) return false;};

pushQueue(AFunc);
pushQueue(BFunc);
pushQueue(CFunc);

runQueue();

队列只是负责允许就是了，而具体的业务逻辑，在各自的业务函数中，自己去实现就可以了，我们在这里做到了一定程度的代码分离。当然这只是简易的代码实现，具体的细节可以调整和优化。

在这里通过队列，对代码进行了解耦，也利于后期来扩展和维护了。以上就是通过队列实现的逻辑了，其实还可以通过订阅发布模式来实现，控制多个弹窗的展示，拆分多个组件，通过全局的状态，同时通过发布订阅，来控制弹窗的展示和顺序。大家也可以考虑一下！！

可以解决哪些问题

项目中解决的问题：

    1.控制调用顺序，先进先出;
    2.多个弹窗的执行顺序;
    3.大量请求，缓解服务器请求压力;
    4.消息队列;
    。。。等

调用优先级的问题；控制执行顺序；

扩展

有一个需求，在一个事件中需要发出1w个请求，是一次性发出1w个，还是通过其他方式来进行控制合理呢？留待思考🤔吧！！

ps: 微信公众号：Yopai，有兴趣的可以关注，每周不定期更新。不断分享，不断进步