node封裝一個控制臺進(jìn)度條插件???????詳情
前言
控制臺的進(jìn)度條大家都見得不少了吧？大家都知道控制臺的進(jìn)度條是怎么實(shí)現(xiàn)的嗎？最近自己在寫幾個node腳本工具，期間有需要進(jìn)度展示的一個需求，所以就順手寫了一個可以自定義的進(jìn)度條插件，可以直接引入并配置使用。
插件效果
功能實(shí)現(xiàn)
控制臺單行輸出
這里使用了single-line-log來實(shí)現(xiàn)控制臺的單行輸出，single-line-log是在控制臺（或流）中同一行輸出的Node.js模塊。在編寫進(jìn)度條或在較長的操作過程中顯示狀態(tài)消息時，此功能非常有用。
安裝:
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!'));具體配置可以參考文檔：www.npmjs.com/package/cha…
進(jìn)度條效果實(shí)現(xiàn)
進(jìn)度條的效果主要是通過單行輸出來實(shí)現(xiàn)，我們只需要根據(jù)參數(shù)來改變進(jìn)度條的長度和比例數(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)
通過傳入當(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('');
}插件說明
配置說明
目前的配置項如下，后續(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)度時的提示語，這里以百分制，如下圖：
- color
進(jìn)度條及文字顏色，如下圖:
使用
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'
}定時器模擬進(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封裝一個控制臺進(jìn)度條插件詳情的文章就介紹到這了,更多相關(guān)node封裝進(jìn)度條插件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文記錄了在項目中使用node.js請求favican.ico的時候會出現(xiàn)2條請求，浪費(fèi)資源，經(jīng)過一番改進(jìn)，記錄下來過程，以后注意。2014-12-12
Node.js 使用 Express-Jwt和JsonWebToken 進(jìn)行Token身份
這篇文章主要介紹了Node.js 使用 Express-Jwt和JsonWebToken 進(jìn)行Token身份驗證的操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
這篇文章主要介紹了pm2與Verdaccio搭建私有npm庫過程詳解,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹了如何在Node.js應(yīng)用程序中實(shí)現(xiàn)獲取視頻詳情的功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
Node.js查找當(dāng)前目錄下文件夾實(shí)例代碼
本篇文章主要介紹了Node.js查找當(dāng)前目錄下文件夾實(shí)例代碼，具有一定的參考價值，有興趣的可以了解一下。2017-03-03
由于nodejs是單線程運(yùn)行的，所以nodejs需要借助事件輪詢，本篇文章主要介紹了Node.js：events事件模塊，有興趣的可以了解一下。2016-11-11
使用NVM下載Node.js管理多版本的詳細(xì)教程(附圖文)
在開發(fā)過程會一直遇到nodejs的版本問題,直接安裝則只有一個版本,極其不方便,nvm則是用來管理nodejs的工具,可以通過nvm來安裝切換不同版本的nodejs,所以本文給大家介紹了使用NVM下載Node.js管理多版本的詳細(xì)教程,文中有詳細(xì)的圖文教程,需要的朋友可以參考下2025-04-04
Express框架實(shí)現(xiàn)簡單攔截器功能示例
這篇文章主要介紹了Express框架實(shí)現(xiàn)簡單攔截器功能,結(jié)合實(shí)例形式分析了express框架攔截器相關(guān)功能與使用方法,需要的朋友可以參考下2023-05-05
在本篇文章里小編給大家整理的是關(guān)于Nodejs libuv運(yùn)行原理以及相關(guān)知識點(diǎn)，有需要的朋友們可以學(xué)習(xí)下。2019-08-08
這篇文章主要給大家介紹了關(guān)于利用node.js如何爬取中關(guān)村的在線電瓶車信息的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用node.js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11