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

## 插件效果

![progressBar.js - node-scripting-tool - Visual Studio Code [管理员] 2022-07-28 10-09-46 00_00_00-00_00_30.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a5a81296907e4f86934c2b85f3fc2fa2~tplv-k3u1fbpfcp-watermark.image?)

## 功能实现
### 控制台单行输出
这里使用了`single-line-log`来实现控制台的单行输出，`single-line-log`是在控制台（或流）中同一行输出的Node.js模块。在编写进度条或在较长的操作过程中显示状态消息时，此功能非常有用。
- 安装
```shell
npm install single-line-log
```
- 示例代码
```javascript
var log = require('single-line-log').stdout;
var timer, i = 0;

timer = setInterval(()=>{
  log(i++ + ' % loading...');
  if (i > 100 ) { 
    clearInterval(timer);
    log('100% 加载完成');
  }
},100);
```
### 控制台输出多彩颜色
这里使用了`chalk`来改变控制台输出颜色，`chalk`是一个颜色插件，可以通过chalk.blue(‘hello world’)来改变文字的颜色，可以通过这个插件让你的在控制台的输出变得花里胡哨。
- 安装
```
npm install chalk
```
- 示例代码
```shell
const chalk = require('chalk');

console.log(chalk.red('我是红色文字'));
console.log(chalk.green('我是绿色文字'));
console.log(chalk.yellow('我是黄色文字'));
console.log(chalk.yellow.bgGreen('我是背景绿色的黄色文字'));
console.log(chalk.yellow.bgWhiteBright('我是背景白色的黄色文字'));
console.log(chalk.underline.bgBlue('我有下划线'));
console.log(chalk.green(
  'I am a green line ' +
  chalk.blue.underline.bold('with a blue substring') +
  ' that becomes green again!'
));
const error = chalk.bold.red;
const warning = chalk.hex('#FFA500'); // Orange color
console.log(error('Error!'));
console.log(warning('Warning!'));
```
具体配置可以参考文档：[https://www.npmjs.com/package/chalk](https://www.npmjs.com/package/chalk)
### 进度条效果实现
进度条的效果主要是通过单行输出来实现，我们只需要根据参数来改变进度条的长度和比例数字及提示就可以，这里我们将其封装成一个类。
#### 初始化配置
初始化的时候可以传入配置信息，未传入的配置则为默认配置，具体配置如下
```javascript
constructor(config = {}){
    this.initConfig(config);
}
initConfig(config){
    const defaultConfig = {
        duration: 100,
        current: 0,
        block:'█',
        showNumber:true,
        tip:{
            0: '努力加载中……',
            50:'加载一半啦，不要着急……',
            75:'马上就加载完了……',
            100:'加载完成'
        },
        color:'blue'
    };
    Object.assign(defaultConfig,config);
    this.config = defaultConfig;
}
```
#### 更新进度条状态
通过传入当前进度，可以修改进度条的状态。
```javascript
run(current){
    const {block, duration, tip, color, showNumber} = this.config;
    let tipList = Object.keys(tip).sort((a,b)=> b-a);
    let showTip = tip[0];
    const step = duration / 100;
    const len = Math.floor(current / step);
    for(let i = 0; i < tipList.length; i++){
        if(len >= tipList[i]) {
            showTip = tip[tipList[i]];
            break;
        }
    }
    singleRowLog(chalk[color](block.repeat(Math.floor(len / 2)),(showNumber ? (len + '% ') : '') + showTip));
    if(len == 100) console.log('');
}
```
## 插件说明
### 配置说明
目前的配置项如下，后续可以根据需求继续扩展
```javascript
config = {
    duration: 100,  //总进度数
    current: 0,     //当前进度
    block:'█',      
    showNumber:true,
    tip:{
        0: '努力加载中……',
        50:'加载一半啦，不要着急……',
        75:'马上就加载完了……',
        100:'加载完成'
    },
    color:'green'
}
```
- duration
> 总进度数

- current
> 当前进度数

- block
> 显示块，如下图：

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/25c6ac4839fa4db3b691eae76a56ae1f~tplv-k3u1fbpfcp-watermark.image?)

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

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bbecdc4c9c4c440ba770fe4aa4ca8c94~tplv-k3u1fbpfcp-watermark.image?)

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

![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/66677c23b0004f35a92aa6cbf6857327~tplv-k3u1fbpfcp-watermark.image?)

![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ca0d6315446f4e559d1a1f9879a796ab~tplv-k3u1fbpfcp-watermark.image?)

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63918bd4c9e7495cb0baeac44d7f575e~tplv-k3u1fbpfcp-watermark.image?)

![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/936d1dda74a6462b8831018f49b68b0f~tplv-k3u1fbpfcp-watermark.image?)

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

![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/48a1b503830642ceb36c197a282ef95b~tplv-k3u1fbpfcp-watermark.image?)
## 使用
### 1、安装依赖
```shell
npm install @jyeontu/progress-bar
```
### 2、在代码中引用
- 引入依赖
```javascript
const progressBar = require('@jyeontu/progress-bar');
```
- 配置信息
```javascript
const config = {
    duration: 100,
    current: 0,
    block:'█',
    showNumber:true,
    tip:{
        0: '努力加载中……',
        50:'加载一半啦，不要着急……',
        75:'马上就加载完了……',
        100:'加载完成'
    },
    color:'blue'
}
```
- 定时器模拟进度
```javascript
var timer, i = 0;
let progressBarC = new progressBar(config);
timer = setInterval(()=>{
    progressBarC.run(i++);
    if (i > 100 ) { 
        clearInterval(timer);
    }
},100);
```
### 3、完整示例代码
```javascript
// const progressBar = require('./progressBar');
const progressBar = require('@jyeontu/progress-bar');
const config = {
    duration: 100,
    current: 0,
    block:'█',
    showNumber:true,
    tip:{
        0: '努力加载中……',
        50:'加载一半啦，不要着急……',
        75:'马上就加载完了……',
        100:'加载完成'
    },
    color:'blue'
}
var timer, i = 0;
let progressBarC = new progressBar(config);
timer = setInterval(()=>{
    progressBarC.run(i++);
    if (i > 100 ) { 
        clearInterval(timer);
    }
},100);
```
## 源码地址
[https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/progressBar](https://gitee.com/zheng_yongtao/node-scripting-tool/tree/master/src/progressBar)

## 说在后面

> 🎉这里是[JYeontu](https://link.juejin.cn?target=http%3A%2F%2Fjyeontu.xyz%2FJYeontuBlog%2F%23%2Fhome "https://link.juejin.cn?target=http%3A%2F%2Fjyeontu.xyz%2FJYeontuBlog%2F%23%2Fhome")，喜欢算法，GDCPC打过卡；热爱羽毛球，大运会打过酱油。毕业一年，两年前端开发经验，目前担任H5前端开发，算法业余爱好者,有空会刷刷算法题，平时喜欢打打羽毛球🏸 ，也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。