命令列進度條實現

對於很多包管理工具而言，擁有一個進度條基本上來說是必備的，可以輕鬆的讓使用者知道當前程式的進度。

命令列下其實也可以活得很精彩。

---

今天來學一下如何製作一個命令列下的進度條工具。回想之前用Python寫過的getpass2，用了標準輸出來實現的。和這次的進度條需求相比，感覺應該是一回事。應該就是清空上次的列印內容，然後write本行資料。

單行輸出

果不其然，在網上大致搜了一下，發現很多都是使用類似的思路。那既然如此，就沒必要重複造輪子了。乾脆用人家的好了。

single-line-log

關於這個模組的使用，可以通過npm進行安裝，也可以下載原始碼，放到本地使用。其核心程式碼超少，我就直接貼出程式碼好了。

/**
 * 單行內容輸出效果。
 */
const MOVE_LEFT = new Buffer('1b5b3130303044', 'hex').toString();
const MOVE_UP = new Buffer('1b5b3141', 'hex').toString();
const CLEAR_LINE = new Buffer('1b5b304b', 'hex').toString();

/**
 * 藉助一個第三方的計算字串長度的模組。
 */
const stringwidth = require('string-width');

module.exports = function(stream) {
    var write = stream.write;
    var str;

    stream.write = function(data) {
        if(str && data!== str) str = null;
        return write.apply(this, arguments);
    };

    if(stream === process.stderr || stream === process.stdout) {
        process.on('exit', ()=>{
            if(str!==null) stream.write('');
        });
    }

    var prevLineCount = 0;
    var log = function(){
        str = '';
        var nextstr = Array.prototype.join.call(arguments, ' ');

        // 清屏
        for(var i =0; i < prevLineCount; i++) {
            str += MOVE_LEFT + CLEAR_LINE + (i < prevLineCount-1?MOVE_UP:'');
        }

        // 更新實際內容
        str += nextstr;
        stream.write(str);

        // 下行要刪除多少行內容
        var prevLines = nextstr.split('\n');
        prevLineCount = 0;
        for(var i = 0; i < prevLines.length; i++) {
            prevLineCount += Math.ceil(stringwidth(prevLines[i]) / stream.columns) || 1;
        }
    };

    log.clear = function() {
        stream.write('');
    };

    return log;
};

/**
 * 對外提供介面。
 */
module.exports.stdout = module.exports(process.stdout);
module.exports.stderr = module.exports(process.stderr);

是的，就只有這麼幾行的內容。閱讀程式碼就不難發現，就是我上面說的那個思路。

測試輸出

接下來簡單的進行測試一下。因為對於小檔案來說，嗖的一下就完事了，所以乾脆找個大檔案，比如一個電影來進行測試。

var log = require('./singleline').stdout;
var fs = require('fs');
var strformat = require('str-format');
var read = 0;
var filepath = "E:\\Video\\電影\\大內密探零零發.mkv";
var size = fs.statSync(filepath).size;

var rs = fs.createReadStream(filepath);
rs.on('data', function(data){
    read += data.length;
    var percentage = Math.floor(100*read/size);
    // log("Writing to super large file\n["+percentage+'%]', read, 'bytes readed.')
    log(strformat.format('Writing to super large file.\n[ {}% ] bytes readed.', [percentage]))
});

裡面用到了我之前寫的一個Python風格的字串格式化模組。有需要的可以使用

npm install str-format

來進行安裝和使用。

下面來看下執行的效果。

其實這樣就實現了一個簡單的進度條了。但是為了使其更加通用，接下來對其進行了一個封裝。

---

progressbar

雖然說是進行了封裝， 其實重要的還只是percentage那部分的內容了。

封裝程式碼

/**
 * 進度條實現。
 */
const log = require('./singleline').stdout;
const strformat = require('str-format').format;

/**
 * 封裝一個進度條工具。
 */
function ProgressBar(description, bar_length) {
    this.description = description || "PROGRESS";
    this.length = bar_length.length || 28;

    // 重新整理進度條圖案，文字的方法
    this.render = function(opts) {
        var percentage = (opts.completed/opts.total).toFixed(4);
        var cell_num = Math.floor(percentage * this.length);
        // 拼接黑色條
        var cell = '';
        for(var i = 0; i < cell_num; i++) {
            cell += '█';
        }
        // 拼接灰色條
        var empty = '';
        for(var i = 0; i < this.length - cell_num; i++) {
            empty += '░';
        }
        // 拼接最終文字
        var cmdtext = strformat("<{}:{}%> {}{}  [ {}/{} `{}`]", [this.description, (100*percentage).toFixed(2),
        cell, empty, opts.completed, opts.total, opts.status]);
        log(cmdtext);
    };
}

/**
 * 模組匯出。
 */
module.exports = ProgressBar;

測試進度條效果

var ProgressBar = require('./progressbar');
var pb = new ProgressBar('下載進度', 50);
var num = 0, total = 100;
function downloading() {
    if (num < total) {
        pb.render({ completed: num, total: total, status: '下載中...' });
        num++;
        setTimeout(function () {
            downloading();
        }, 50);
    }else{
        pb.render({completed: num, total: total, status: "下載完畢."});
            process.exit(0);
    }
}

downloading()

執行效果，如下：

至此，一個還算是比較通用的進度條就算是完成了。每次需要手動更新進度的時候，只需要呼叫render方法即可。

美化

單純的黑白字元，看起來挺枯燥的，下面使用一個終端彩色模組來對其進行一下美化。

美化版進度條包裝

/**
 * 進度條實現。
 */
const log = require('./singleline').stdout;
const strformat = require('str-format').format;
const clicolor = require('cli-color');

/**
 * 封裝一個進度條工具。
 */
function ProgressBar(description, bar_length) {
    this.description = description || "PROGRESS";
    this.length = bar_length.length || 28;

    // 重新整理進度條圖案，文字的方法
    this.render = function(opts) {
        var percentage = (opts.completed/opts.total).toFixed(4);
        var cell_num = Math.floor(percentage * this.length);
        // 拼接黑色條
        var cell = '';
        for(var i = 0; i < cell_num; i++) {
            cell += '█';
        }
        // 拼接灰色條
        var empty = '';
        for(var i = 0; i < this.length - cell_num; i++) {
            empty += '░';
        }
        
        var percent = (100*percentage).toFixed(2);
        /**
         * 使用cli-color進行包裝美化。
         */
        this.description = clicolor.blue.bold(this.description);
        cell = clicolor.green.bgBlack.bold(cell);
        opts.completed = clicolor.yellow.bold(opts.completed);
        opts.total = clicolor.blue.bold(opts.total);
        opts.status = percent==100.00?clicolor.green.bold(opts.status):clicolor.red.bold(opts.status);


        // 拼接最終文字
        var cmdtext = strformat("<{}:{}%> {}{}  [ {}/{} `{}`]", [this.description, percent,
        cell, empty, opts.completed, opts.total, opts.status]);
        log(cmdtext);
    };
}

/**
 * 模組匯出。
 */
module.exports = ProgressBar;

美化版進度條測試

var ProgressBar = require('./progressbar');
var pb = new ProgressBar('下載進度', 72);
var num = 0, total = 100;
function downloading() {
    if (num < total) {
        pb.render({ completed: num, total: total, status: '下載中...' });
        num++;
        setTimeout(function () {
            downloading();
        }, 20);
    }else{
        pb.render({completed: num, total: total, status: "下載完畢."});
            process.exit(0);
    }
}

downloading()

下面看下執行結果。

• 先看下在VSCode下的執行效果。

  
  
  

  VSCode命令列進度條美化版

• 然後是常規的CMD命令列下效果。

  
  
  

  常規CMD命令列進度條美化版

---

好了，大致就是這麼個內容了。在Linux上還有很多更加優秀的此類實現。有機會再去借鑑借鑑好了。