node封装控制台进度条插件

说在前面

控制台的进度条大家都见得不少了吧？大家都知道控制台的进度条是怎么实现的吗？最近自己在写几个node脚本工具，期间有需要进度展示的一个需求，所以就顺手写了一个可以自定义的进度条插件，可以直接引入并配置使用。

插件效果

我们会发现插件的效果是随着时间推进，进度条越来越长

功能实现

控制台单行输出

这里使用了single-line-log来实现控制台的单行输出，single-line-log是在控制台（或流）中同一行输出的Node.js模块。在编写进度条或在较长的操作过程中显示状态消息时，此功能非常有用。

• 安装

npm install single-line-log

• 示例代码

1.  
   var log = require('single-line-log').stdout;
2.  
   var timer, i = 0;
3.  
    
4.  
   timer = setInterval(()=>{
5.  
   log(i ' % loading...');
6.  
   if (i > 100 ) {
7.  
   clearInterval(timer);
8.  
   log('100% 加载完成');
9.  
   }
10.  
    },100);

控制台输出多彩颜色

 这里使用了chalk来改变控制台输出颜色，chalk是一个颜色插件，可以通过chalk.blue(‘hello world’)来改变文字的颜色，可以通过这个插件让你的在控制台的输出变得花里胡哨。 

• 安装

npm install chalk

• 示例代码

1.  
   const chalk = require('chalk');
2.  
    
3.  
   console.log(chalk.red('我是红色文字'));
4.  
   console.log(chalk.green('我是绿色文字'));
5.  
   console.log(chalk.yellow('我是黄色文字'));
6.  
   console.log(chalk.yellow.bgGreen('我是背景绿色的黄色文字'));
7.  
   console.log(chalk.yellow.bgWhiteBright('我是背景白色的黄色文字'));
8.  
   console.log(chalk.underline.bgBlue('我有下划线'));
9.  
   console.log(chalk.green(
10.  
    'I am a green line '
11.  
    chalk.blue.underline.bold('with a blue substring')
12.  
    ' that becomes green again!'
13.  
    ));
14.  
    const error = chalk.bold.red;
15.  
    const warning = chalk.hex('#FFA500'); // Orange color
16.  
    console.log(error('Error!'));
17.  
    console.log(warning('Warning!'));

具体配置可以参考文档:www.npmjs.com

进度条效果实现

进度条的效果主要是通过单行输出来实现，我们只需要根据参数来改变进度条的长度和比例数字及提示就可以，这里我们将其封装成一个类。

初始化配置

初始化的时候可以传入配置信息，未传入的配置则为默认配置，具体配置如下

1.  
   constructor(config = {}){
2.  
   this.initConfig(config);
3.  
   }
4.  
   initConfig(config){
5.  
   const defaultConfig = {
6.  
   duration: 100,
7.  
   current: 0,
8.  
   block:'█',
9.  
   showNumber:true,
10.  
    tip:{
11.  
    0: '努力加载中……',
12.  
    50:'加载一半啦，不要着急……',
13.  
    75:'马上就加载完了……',
14.  
    100:'加载完成'
15.  
    },
16.  
    color:'blue'
17.  
    };
18.  
    Object.assign(defaultConfig,config);
19.  
    this.config = defaultConfig;
20.  
    }

更新进度条状态

通过传入当前进度，可以修改进度条的状态。

1.  
   run(current){
2.  
   const {block, duration, tip, color, showNumber} = this.config;
3.  
   let tipList = Object.keys(tip).sort((a,b)=> b-a);
4.  
   let showTip = tip[0];
5.  
   const step = duration / 100;
6.  
   const len = Math.floor(current / step);
7.  
   for(let i = 0; i < tipList.length; i ){
8.  
   if(len >= tipList[i]) {
9.  
   showTip = tip[tipList[i]];
10.  
    break;
11.  
    }
12.  
    }
13.  
    singleRowLog(chalk[color](block.repeat(Math.floor(len / 2)),(showNumber ? (len '% ') : '') showTip));
14.  
    if(len == 100) console.log('');
15.  
    }

插件说明

配置说明

目前的配置项如下，后续可以根据需求继续扩展

1.  
   config = {
2.  
   duration: 100, //总进度数
3.  
   current: 0, //当前进度
4.  
   block:'█',
5.  
   showNumber:true,
6.  
   tip:{
7.  
   0: '努力加载中……',
8.  
   50:'加载一半啦，不要着急……',
9.  
   75:'马上就加载完了……',
10.  
    100:'加载完成'
11.  
    },
12.  
    color:'green'
13.  
    }

• duration  总进度数
• current    当前进度数
• block     显示块，如下图：

• showNumber    是否展示当前进度，效果如下图

• tip    配置不同进度时的提示语，这里以百分制，如下图：

• color   进度条及文字颜色，如下图

使用

1、安装依赖

npm install @jyeontu/progress-bar

2、在代码中引用

• 引入依赖

const progressBar = require('@jyeontu/progress-bar');

•  配置信息

1.  
   const config = {
2.  
   duration: 100,
3.  
   current: 0,
4.  
   block:'█',
5.  
   showNumber:true,
6.  
   tip:{
7.  
   0: '努力加载中……',
8.  
   50:'加载一半啦，不要着急……',
9.  
   75:'马上就加载完了……',
10.  
    100:'加载完成'
11.  
    },
12.  
    color:'blue'
13.  
    }

• 定时器模拟进度

1.  
   var timer, i = 0;
2.  
   let progressBarC = new progressBar(config);
3.  
   timer = setInterval(()=>{
4.  
   progressBarC.run(i );
5.  
   if (i > 100 ) {
6.  
   clearInterval(timer);
7.  
   }
8.  
   },100);

3、完整示例代码

1.  
   // const progressBar = require('./progressBar');
2.  
   const progressBar = require('@jyeontu/progress-bar');
3.  
   const config = {
4.  
   duration: 100,
5.  
   current: 0,
6.  
   block:'█',
7.  
   showNumber:true,
8.  
   tip:{
9.  
   0: '努力加载中……',
10.  
    50:'加载一半啦，不要着急……',
11.  
    75:'马上就加载完了……',
12.  
    100:'加载完成'
13.  
    },
14.  
    color:'blue'
15.  
    }
16.  
    var timer, i = 0;
17.  
    let progressBarC = new progressBar(config);
18.  
    timer = setInterval(()=>{
19.  
    progressBarC.run(i );
20.  
    if (i > 100 ) {
21.  
    clearInterval(timer);
22.  
    }
23.  
    },100);

这篇好文章是转载于：学新通技术网