node封装一个控制台进度条插件

简介: node封装一个控制台进度条插件

说在前面

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

插件效果

功能实现

控制台单行输出

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

  • 安装
npm install single-line-log
  • 示例代码
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
  • 示例代码
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

进度条效果实现

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

初始化配置

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

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;
}
更新进度条状态

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

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('');
}

插件说明

配置说明

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

config = {
    duration: 100,  //总进度数
    current: 0,     //当前进度
    block:'█',      
    showNumber:true,
    tip:{
        0: '努力加载中……',
        50:'加载一半啦,不要着急……',
        75:'马上就加载完了……',
        100:'加载完成'
    },
    color:'green'
}
  • duration

总进度数

  • current

当前进度数

  • block

显示块,如下图:

  • showNumber

是否展示当前进度,效果如下图

  • tip

配置不同进度时的提示语,这里以百分制,如下图:

  • color

进度条及文字颜色,如下图

使用

1、安装依赖

npm install @jyeontu/progress-bar

2、在代码中引用

  • 引入依赖
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);

3、完整示例代码

// 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

说在后面

🎉这里是JYeontu,喜欢算法,GDCPC打过卡;热爱羽毛球,大运会打过酱油。毕业一年,两年前端开发经验,目前担任H5前端开发,算法业余爱好者,有空会刷刷算法题,平时喜欢打打羽毛球🏸 ,也喜欢写些东西,既为自己记录📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解🙇,写错的地方望指出,定会认真改进😊,在此谢谢大家的支持,我们下文再见🙌。

目录
相关文章
|
2月前
|
JavaScript 前端开发
nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件
nodejs实现解析chm文件列表,无需转换为PDF文件格式,在线预览chm文件以及目录,不依赖任何网页端插件
|
22天前
IntelliJ IDEA 自定义控制台输出多颜色格式功能 --- 安装Grep Console插件
IntelliJ IDEA 自定义控制台输出多颜色格式功能 --- 安装Grep Console插件
|
7月前
phpstorm插件应用:Test RESTful WEB Service 控制台接口调试工具
phpstorm插件应用:Test RESTful WEB Service 控制台接口调试工具
89 0
|
3月前
|
SQL IDE Java
IDEA控制台如何查看格式化的SQL(MyBatis Log插件)
IDEA控制台如何查看格式化的SQL(MyBatis Log插件)
109 0
|
3月前
|
消息中间件
RabbitMq没开启rabbitmq_management插件控制台报错Node statistics not available
RabbitMq没开启rabbitmq_management插件控制台报错Node statistics not available
|
3月前
|
编解码
node封装一个图片拼接插件
node封装一个图片拼接插件
56 0
|
10月前
|
JavaScript 前端开发 中间件
在 vite 中基于 node 实现 simple-auto-import 插件
在 vite 中基于 node 实现 simple-auto-import 插件
177 0
|
JavaScript 前端开发 Ubuntu
nodejs插件开发与发布
本文主要介绍如何快速创建nodejs插件并发布到npm上。npm是一个让JavaScript程序员分享和复用代码的工具,我们不仅可以install别人的插件,也可以publish自己的代码。
499 0
|
JSON 负载均衡 JavaScript
VS Code 折腾记 - (8) 新一波实用插件推荐(前端)|NG2+|TS2|Vue|React|Node|版本控制|主题
VSCode大法好啊,平均一个月更新一个小版本,每次都可以直观的看到优化的地方和特性。 距离上次的文章已经过去了两个多月了。这期间我又搜罗了一波比较实用的插件推荐;
195 0
|
监控 安全 数据挖掘
明月审计数据分析插件工具在阿里云控制台上线
明月软件与阿里云合作的审计数据分析产品,在阿里云控制台“工具与解决方案中心”及云市场正式上线
399 0
明月审计数据分析插件工具在阿里云控制台上线

相关产品

  • 云迁移中心