先说废话：本文来自于自己日常闭门造车的一些成果。为自己所用，随意修改，随意使用，有益于他人我会很高兴。在处理图纸时，在不知道工作总量的情况下，会有各种步骤和操作。UI上的进度展示需求，完成起来并不容易。这里有一个比较简单好用的进度设置和更新widget：updater.js采用了一种可以动态设置剩余工作量的方法来适应不同进程对进度的评估。//比如一开始你总共只知道4个主要步骤，那么你可以：letupdater=updaterCreate(_,4,cb);//要完成两个步骤，使用：updater.addStep();updater.addStep();//找到第三步，有1000个小步：updater.adjustLeft(1000+50);//因为还有一大步，假设需要50步；for(leti=0;i<1000;i++)updater.addStep();//第三步完成后，找到第四步，有2000个小步：updater.adjustLeft(2000);//后面没有台阶，所以不用保留；for(leti=0;i<2000;i++)updater.addStep();代码如下：//这段代码有助于实现需要监控进度的逻辑//cb函数参数如：//{message,percent}exportdefaultfunctionupdaterCreate(name,total,cb){letleftSteps=全部的;让completePercent=0;function_updatePercent(percent){cb({message:`${name}${percent}/100`,percent})}functionaddStep(n){if(completePercent>=100)return;//补充当前步数letstep=('number'===typeof(n))??：1;如果（步骤>左步骤）步骤=左步骤；//更新百分比letlastPercent=completePercent;completePercent+=step*(100-completePercent)/leftSteps;//前百分比不一样就if(parseInt(completePercent)!==parseInt(lastPercent))_updatePercent(parseInt(completePercent));leftSteps-=步骤；}functionadjustLeft(steps){leftSteps=steps;}return{addStep,adjustLeft};}/*testimportupdaterCreatefrom'./util/updater'letleftStep=4;console.log(`updaterCreate(_,${leftStep},_);`);let{addStep,adjustLeft}=updaterCreate("藻时工作...",leftStep,({message,percent})=>{console.log(message);})console.log(`addStep();`);addStep();console.log(`addStep();`);addStep();leftStep=9999999;adjustLeft(leftStep);console.log(`adjustLeft(${leftStep});`);for(leti=0;i
