當咱們對大量文件進行批量處理的時候(例如:上傳/下載、保存、編譯等),經常但願知道當前進展如何,或者失敗(成功)的任務有多少;當咱們的代碼或程序已經發布,用戶在執行安裝的過程當中,一個合適的(終端/命令行)進度條能夠準確反映安裝的步驟和進程,提高程序的可用性,必定程度緩解用戶在等待中的煩惱……npm
首先,在終端打印出文本是件比較容易的事情。
那麼使用簡單的文本和符號,就夠本身拼湊出命令行的效果(下面例子):工具
文件已上傳: 43.60% █████████████████████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 150/344
固然,進度條的效果能夠根據須要本身設計啦,我這裏只是給你們一個參考。ui
這裏,我將打印命令行的方法構形成一個工具模塊 progress-bar.js
,具體實現以下 :-)this
// 這裏用到一個很實用的 npm 模塊,用以在同一行打印文本 var slog = require('single-line-log').stdout; // 封裝的 ProgressBar 工具 function ProgressBar(description, bar_length){ // 兩個基本參數(屬性) this.description = description || 'Progress'; // 命令行開頭的文字信息 this.length = bar_length || 25; // 進度條的長度(單位:字符),默認設爲 25 // 刷新進度條圖案、文字的方法 this.render = function (opts){ var percent = (opts.completed / opts.total).toFixed(4); // 計算進度(子任務的 完成數 除以 總數) var cell_num = Math.floor(percent * 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 = this.description + ': ' + (100*percent).toFixed(2) + '% ' + cell + empty + ' ' + opts.completed + '/' + opts.total; // 在單行輸出文本 slog(cmdText); }; } // 模塊導出 module.exports = ProgressBar;
基於上面的實現,先說一下這個 progress-bar.js
的用法:spa
// 引入工具模塊 var ProgressBar = require('./progress_bar'); // 初始化一個進度條長度爲 50 的 ProgressBar 實例 var pb = new ProgressBar('下載進度', 50); // 這裏只是一個 pb 的使用示例,不包含任何功能 var num = 0, total = 200; function downloading() { if (num <= total) { // 更新進度條 pb.render({ completed: num, total: total }); num++; setTimeout(function (){ downloading(); }, 500) } } downloading();
run 一下上面的代碼,執行效果以下:命令行
原創文章,轉載請註明出處設計