node封裝一個(gè)控制臺(tái)進(jìn)度條插件???????詳情
前言
控制臺(tái)的進(jìn)度條大家都見(jiàn)得不少了吧？大家都知道控制臺(tái)的進(jìn)度條是怎么實(shí)現(xiàn)的嗎？最近自己在寫(xiě)幾個(gè)node腳本工具，期間有需要進(jìn)度展示的一個(gè)需求，所以就順手寫(xiě)了一個(gè)可以自定義的進(jìn)度條插件，可以直接引入并配置使用。
插件效果
功能實(shí)現(xiàn)
控制臺(tái)單行輸出
這里使用了single-line-log來(lái)實(shí)現(xiàn)控制臺(tái)的單行輸出，single-line-log是在控制臺(tái)（或流）中同一行輸出的Node.js模塊。在編寫(xiě)進(jìn)度條或在較長(zhǎng)的操作過(guò)程中顯示狀態(tài)消息時(shí)，此功能非常有用。
安裝:
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);控制臺(tái)輸出多彩顏色
這里使用了chalk來(lái)改變控制臺(tái)輸出顏色，chalk是一個(gè)顏色插件，可以通過(guò)chalk.blue(‘hello world’)來(lái)改變文字的顏色，可以通過(guò)這個(gè)插件讓你的在控制臺(tái)的輸出變得花里胡哨。
安裝;
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!'));具體配置可以參考文檔：www.npmjs.com/package/cha…
進(jìn)度條效果實(shí)現(xiàn)
進(jìn)度條的效果主要是通過(guò)單行輸出來(lái)實(shí)現(xiàn)，我們只需要根據(jù)參數(shù)來(lái)改變進(jìn)度條的長(zhǎng)度和比例數(shù)字及提示就可以，這里我們將其封裝成一個(gè)類(lèi)。
初始化配置
初始化的時(shí)候可以傳入配置信息，未傳入的配置則為默認(rèn)配置，具體配置如下:
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;
}更新進(jìn)度條狀態(tài)
通過(guò)傳入當(dāng)前進(jìn)度，可以修改進(jìn)度條的狀態(tài)。
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('');
}插件說(shuō)明
配置說(shuō)明
目前的配置項(xiàng)如下，后續(xù)可以根據(jù)需求繼續(xù)擴(kuò)展
config = {
duration: 100, //總進(jìn)度數(shù)
current: 0, //當(dāng)前進(jìn)度
block:'█',
showNumber:true,
tip:{
0: '努力加載中……',
50:'加載一半啦，不要著急……',
75:'馬上就加載完了……',
100:'加載完成'
},
color:'green'
}- duration
總進(jìn)度數(shù)
- current
當(dāng)前進(jìn)度數(shù)
- block
顯示塊，如下圖：
- showNumber
是否展示當(dāng)前進(jìn)度，效果如下圖:
- tip
配置不同進(jìn)度時(shí)的提示語(yǔ)，這里以百分制，如下圖：
- color
進(jìn)度條及文字顏色，如下圖:
使用
1、安裝依賴(lài)
npm install @jyeontu/progress-bar
2、在代碼中引用
引入依賴(lài)
const progressBar = require('@jyeontu/progress-bar');配置信息
const config = {
duration: 100,
current: 0,
block:'█',
showNumber:true,
tip:{
0: '努力加載中……',
50:'加載一半啦，不要著急……',
75:'馬上就加載完了……',
100:'加載完成'
},
color:'blue'
}定時(shí)器模擬進(jìn)度
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);到此這篇關(guān)于node封裝一個(gè)控制臺(tái)進(jìn)度條插件詳情的文章就介紹到這了,更多相關(guān)node封裝進(jìn)度條插件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
nodejs項(xiàng)目windows下開(kāi)機(jī)自啟動(dòng)的方法
今天小編就為大家分享一篇nodejs項(xiàng)目windows下開(kāi)機(jī)自啟動(dòng)的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
node.js中的fs.writeFile方法使用說(shuō)明
這篇文章主要介紹了node.js中的fs.writeFile方法使用說(shuō)明,本文介紹了fs.writeFile的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
這篇文章主要給大家介紹了關(guān)于使用nvm管理(切換)node版本的相關(guān)資料,nvm是node.js的版本管理器,可以安裝和切換不同版本node.js,文中通過(guò)圖文介紹的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要介紹了如何在Nodejs中使用模塊fs文件系統(tǒng)，對(duì)nodejs感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了14款NodeJS Web框架推薦,其中大多數(shù)框架都是基于node.js的Express實(shí)現(xiàn),需要的朋友可以參考下2014-07-07
本篇文章主要介紹了詳解NODEJS基于FFMPEG視頻推流測(cè)試，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
Ubuntu 16.04 64位中搭建Node.js開(kāi)發(fā)環(huán)境教程
如果想要在Ubuntu 16.04上安裝Node.js的話(huà)，這篇文章對(duì)你來(lái)說(shuō)肯定很重要。Node.js從本質(zhì)上來(lái)說(shuō)就是一個(gè)運(yùn)行在服務(wù)端上的封裝好了輸入輸出流的javascript程序。本文給大家詳細(xì)介紹了在Ubuntu 16.04 64位搭建Node.js開(kāi)發(fā)環(huán)境的步驟，有需要的朋友們可以參考學(xué)習(xí)。2016-10-10
用Node編寫(xiě)RESTful API接口的示例代碼
本篇文章主要介紹了用Node編寫(xiě)RESTful API接口的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
基于Express和Multer實(shí)現(xiàn)文件本地服務(wù)器文件上傳功能
在現(xiàn)代應(yīng)用程序中，文件上傳功能成為了用戶(hù)共享和存儲(chǔ)數(shù)據(jù)的重要途徑，所以本文我們一起來(lái)探討文件上傳中間件的重要性，并提供常見(jiàn)的實(shí)現(xiàn)方法和相應(yīng)的代碼吧2023-06-06
Node.JS循環(huán)刪除非空文件夾及子目錄下的所有文件
這篇文章主要介紹了Node.JS循環(huán)刪除非空文件夾及子目錄下的所有文件及node.js遞歸刪除非空文件夾的實(shí)例代碼，需要的朋友可以參考下2018-03-03