昨天在梦游时遇到了卷神，给予我一个“装逼的Title”——卷王，我不服，我反驳说：无偿加班，不求回报，压榨技术价值的才叫卷，而我想要获得能力和价值。卷神说：你先带着吧，等你用你的能力收获价值的时候再来洗白~。我说：五千年磨了根棒

为了Node爬虫拥有更好的输出体验，我们这次丰富一下MD，打好一个1k star的仓库基础。另外再封装几个颜值控件，在撸这块时候，我在想另一个插件，能否把爬虫脚手架作为一个插件，一行命令就搞定一切？晚上再跟三上幽雅聊一聊。

README

写README一定要认真，院长一项重视README的编写，以及用户上手教程要足够的通俗易懂。每个人的事件都很宝贵，3分钟对于你来说可能很持久，但对于掘友来讲可能更持久。所以，文档一定要言简意赅~

也可以关注下院长以往文档：

• FastVue3-快速玩转Vue3
• 3D代码生成
• 现代JS效率库
• ...

PrintJS

这里的print不是你想的print,实在控制台的输出，本来想用 console但被占用了。

const { print, sleep } = require("../src/utils");
const ProgressBar = require("../src/utils/progress");
const ora = require("ora");
const chalk = require("chalk");

(async () => {
  print("yellow", "> 数据爬取开始");
  const spinner = ora({
    text: "等待数据接口",
    color: "blue",
  });
  spinner.start();
  setTimeout(() => {
    spinner.stop();
    print("green", "> 接口已相应，准备爬取");
    const currentPage = 1;
    const pageLength = 50;
    const progress = new ProgressBar(
      `> 第${currentPage}页 下载进度`,
      pageLength
    );
    for (let i = 0; i < pageLength; i++) {
      sleep(2000);
      progress.render({ completed: i + 1, total: pageLength });
    }
  }, 2000);

  print("cyan", "> 全部数据已完成");
})();

测试下看看效果

还不错，这里涉及了颜色，等待，加载进度条三个控件。其中print最简单

const chalk = require("chalk");

const print = (color, text) => {
  console.log(chalk[color](text));
};

// print("green", "> 执行当前任务");
module.exports = print;

进度条封装

进度条可以有效的防止我们爬取过程中的焦虑，实时监听数据进度。

const { stdout } = require("single-line-log");

// 封装的 ProgressBar 工具
function ProgressBar(description, bar_length) {
  // 两个基本参数(属性)
  this.description = description || "Progress"; // 命令行开头的文字信息
  this.length = bar_length || 25; // 进度条的长度(单位：字符)，默认设为 25

  // 刷新进度条图案、文字的方法
  this.render = function (opts) {
    let percent = (opts.completed / opts.total).toFixed(4); // 计算进度(子任务的 完成数 除以 总数)
    let cell_num = Math.floor(percent * this.length); // 计算需要多少个 █ 符号来拼凑图案

    // 拼接黑色条
    let cell = "";
    for (let i = 0; i < cell_num; i++) {
      cell += "█";
    }

    // 拼接灰色条
    let empty = "";
    for (let i = 0; i < this.length - cell_num; i++) {
      empty += "░";
    }

    // 拼接最终文本
    let cmdText =
      this.description +
      ": " +
      (100 * percent).toFixed(2) +
      "% " +
      cell +
      empty +
      " " +
      opts.completed +
      "/" +
      opts.total +
      "\n";

    // 在单行输出文本
    stdout(cmdText);
  };
}

// 模块导出
module.exports = ProgressBar;

插件推荐

• ora:进度转轮，地址：www.npmjs.com/package/ora
• inquirer：交互式命令工具 地址：www.npmjs.com/package/inq…
• chalk：控制台输出美化 地址：www.npmjs.com/package/cha…
• yargs：命令行参数解析 地址：www.npmjs.com/package/yar… 以上按需自取，还有很多好玩的，先上车后漂移，先开枪后瞄准。

如果喜欢我的文章，麻烦点个赞，评个论，收个藏，关个注。

手绘图，手打字，纯原创，摘自未发布的书籍：《高阶前端指北》，转载请获得本人同意。