命令行界面设计 - 进度条与提示 - 显示操作进度提示

命令行界面设计 - 进度条与提示 - 显示操作进度提示

在 Node.js 开发中，命令行工具是非常常见的应用场景。当执行一些耗时的操作时，用户往往希望能看到操作的进度，这样可以增强用户体验，让用户了解操作的执行情况。本文将介绍如何在 Node.js 中显示操作进度提示，包括简单的文本提示和进度条的实现。

简单文本进度提示

原理

简单文本进度提示就是在命令行中定期输出当前操作的进度信息。可以通过 console.log 或者 process.stdout.write 来实现。

示例代码

// 模拟一个耗时操作
function simulateLongTask() {
    const totalSteps = 10;
    for (let i = 0; i < totalSteps; i++) {
        // 模拟耗时操作
        for (let j = 0; j < 100000000; j++) {}
        // 计算进度百分比
        const progress = ((i + 1) / totalSteps) * 100;
        console.log(`当前进度: ${progress}%`);
    }
}
simulateLongTask();

代码解释

1. 模拟耗时操作：通过嵌套的 for 循环模拟一个耗时操作。
2. 计算进度百分比：根据当前步骤数和总步骤数计算进度百分比。
3. 输出进度信息：使用 console.log 输出当前进度信息。

缺点

每次输出都会换行，会在命令行中产生大量的输出，不够美观。

使用 process.stdout.write 实现不换行的进度提示

原理

process.stdout.write 可以在不换行的情况下输出内容，通过覆盖之前的输出实现动态更新进度信息。

示例代码

// 模拟一个耗时操作
function simulateLongTask() {
    const totalSteps = 10;
    for (let i = 0; i < totalSteps; i++) {
        // 模拟耗时操作
        for (let j = 0; j < 100000000; j++) {}
        // 计算进度百分比
        const progress = ((i + 1) / totalSteps) * 100;
        // 使用 \r 回到行首，覆盖之前的输出
        process.stdout.write(`\r当前进度: ${progress}%`);
    }
    // 最后换行
    process.stdout.write('\n');
}
simulateLongTask();

代码解释

1. 使用 \r 回到行首：\r 是回车符，它可以将光标移动到当前行的开头，从而覆盖之前的输出。
2. 最后换行：操作完成后，使用 process.stdout.write('\n') 换行，避免后续输出覆盖进度信息。

使用 cli-progress 库实现进度条

原理

cli-progress 是一个功能强大的 Node.js 库，用于在命令行中创建进度条。它提供了多种类型的进度条，如单进度条、多进度条等。

安装

npm install cli-progress

示例代码

const cliProgress = require('cli-progress');
const colors = require('ansi-colors');
// 创建一个单进度条实例
const bar = new cliProgress.SingleBar({
    format: '进度 |' + colors.cyan('{bar}') + '| {percentage}% || {value}/{total} 步',
    barCompleteChar: '\u2588',
    barIncompleteChar: '\u2591',
    hideCursor: true
});
// 总步骤数
const totalSteps = 10;
// 启动进度条
bar.start(totalSteps, 0);
// 模拟一个耗时操作
function simulateLongTask() {
    for (let i = 0; i < totalSteps; i++) {
        // 模拟耗时操作
        for (let j = 0; j < 100000000; j++) {}
        // 更新进度条
        bar.update(i + 1);
    }
    // 停止进度条
    bar.stop();
}
simulateLongTask();

代码解释

1. 创建进度条实例：使用 cliProgress.SingleBar 创建一个单进度条实例，并配置进度条的格式、完成字符、未完成字符等。
2. 启动进度条：调用 bar.start(totalSteps, 0) 启动进度条，指定总步骤数和初始值。
3. 更新进度条：在每次完成一个步骤后，调用 bar.update(i + 1) 更新进度条。
4. 停止进度条：操作完成后，调用 bar.stop() 停止进度条。

总结

通过以上方法，我们可以在 Node.js 命令行工具中方便地显示操作进度提示，提升用户体验。