Teilen Sie einen Beispielcode für den Fortschrittsbalken beim Drucken des NodeJS-Terminals

In diesem Artikel wird hauptsächlich der Beispielcode für den Fortschrittsbalken des NodeJS-Terminals vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor, um einen Blick darauf zu werfen

1. (Speichern, Kompilieren usw.) möchten wir oft den aktuellen Fortschritt oder die Anzahl der fehlgeschlagenen (erfolgreichen) Aufgaben wissen, wenn unser Code oder Programm veröffentlicht wurde und der Benutzer den Installationsprozess durchführt, ein entsprechendes (Terminal-/Befehlszeilen-) Fortschritt Die Leiste kann die Schritte und Prozesse der Installation genau wiedergeben, die Benutzerfreundlichkeit des Programms verbessern und die Sorgen des Benutzers beim Warten bis zu einem gewissen Grad lindern ...

Grundprinzipien

Erstens ist es einfacher, Text im Terminal auszudrucken. Mithilfe von einfachem Text und Symbolen können Sie dann die Wirkung der Befehlszeile selbst zusammensetzen (Beispiel unten):
Datei hochgeladen: 43,60 % ████████████████ ██████/ 150/344

Natürlich können Sie den Effekt selbst nach Ihren Bedürfnissen gestalten. Ich gebe Ihnen hier nur eine Referenz.

Hier konstruiere ich die Methode zum Drucken der Befehlszeile in ein Toolmodul

, und die spezifische Implementierung ist wie folgt:-)

progress-bar.js

3. Führen Sie

// 这里用到一个很实用的 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 += &#39;█&#39;;
  }
  // 拼接灰色条
  var empty = &#39;&#39;;
  for (var i=0;i<this.length-cell_num;i++) {
   empty += &#39;░&#39;;
  }
  // 拼接最终文本
  var cmdText = this.description + &#39;: &#39; + (100*percent).toFixed(2) + &#39;% &#39; + cell + empty + &#39; &#39; + opts.completed + &#39;/&#39; + opts.total;
  // 在单行输出文本
  slog(cmdText);
 };
}
// 模块导出
module.exports = ProgressBar;

auf der Grundlage der obigen Implementierung aus. Lassen Sie uns zunächst über die Verwendung dieses sprechen:

progress-bar.js

Führen Sie den obigen Code aus. Der Ausführungseffekt ist wie folgt:

// 引入工具模块
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();

Studenten, die js lernen müssen, achten bitte auf die chinesische PHP-Website

js-Video-Tutorial, viele js-Online-Video-Tutorials. Das Ansehen ist kostenlos!

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Beispielcode für den Fortschrittsbalken beim Drucken des NodeJS-Terminals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!