队列在项目中的应用

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

任务需求是控制多个弹窗的展示,需要有优先级,同时也需要根据数据的状态,来展示不同的弹窗。如果是直接通过硬编码的形式控制,通过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,有兴趣的可以关注,每周不定期更新。不断分享,不断进步

上次更新: 1/12/2021, 9:02:39 AM

评 论: