javascript中实现灵活通用的进度条管理部件

先说废话：这篇文章来自于我平日闭门造车过程中的一些成果。有用自取，随意改，随意用，惠及他人我就开心。

正题

在处理图纸时会遇到各种步骤繁多，不知工作总量的操作，不容易完成 UI上对于进度展示的需求。

这里做了一个比较简单有用的 进度设定和更新小工具：updater.js

其采用了 可以动态设定剩余工作量的方式，来适应不同流程中对进度的评估。

//比如，开始只知道一共 4个大步骤，那么，就可以：

    let updater = updaterCreate(_, 4, cb);

//完成两个步骤，使用：

    updater.addStep();
    updater.addStep();

//发现第三个步骤，有1000个小步骤：

    updater.adjustLeft(1000 + 50); //因为还有一个大步骤，所以预留其假定还需要50步骤；
    for(let i = 0; i < 1000; i++)
        updater.addStep();

//第三步骤完成后，发现第4个步骤，有2000个小步骤：

    updater.adjustLeft(2000); //后面没有步骤了，就不用留了；
    for(let i = 0; i < 2000; i++)
        updater.addStep();

代码如下：

//本代码 帮助实现需要监控进度的逻辑
//cb 函数 参数如：
//{message, percent}

export default function updaterCreate(name, total, cb) {
    let leftSteps = total;
    let completePercent = 0;

    function _updatePercent(percent) {
        cb({
            message: `${name} ${percent}/100`,
            percent
        })
    }

    function addStep(n) {
        if (completePercent >= 100) return;

        //补充当前步骤数目
        let step = ('number' === typeof (n)) ? n : 1;
        if (step > leftSteps) step = leftSteps;

        //更新百分比
        let lastPercent = completePercent;
        completePercent += step * (100 - completePercent) / leftSteps;

        //前后百分比 不一样就
        if (parseInt(completePercent) !== parseInt(lastPercent))
            _updatePercent(parseInt(completePercent));

        leftSteps -= step;
    }

    function adjustLeft(steps) {
        leftSteps = steps;
    }

    return {addStep, adjustLeft};
}

/* test

import updaterCreate from './util/updater'

let leftStep = 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 (let i = 0; i < leftStep; i++) {
    addStep();
}


console.log(`All steps complete.`);



*/