w3ctech

好用的npm包:debug

npm是JavaScript的包管理系统,提供通用的模块给其他开发者及工程内使用,类似于Java语言 的 maven库,设计师使用的素材库。

好用的npm包系列致力于挖掘一些好玩实用的npm包,聊些使用场景和实现思路。如果说程序员喜欢用自己的方式去实现别人已实现的东西,叫做重复造轮子, 那么这个系列就是带你去看飞轮海 。

基本介绍

DEBUG是一种计算机程序。马克2号(Harvard Mark II)编制程序的葛丽丝·霍波(Grace Hopper)是一位美国海军准将及计算机科学家,同时也是世界最早的一批程序设计师之一。有一天,她在调试设备时出现故障,拆开继电器后,发现有只飞蛾被夹扁在触点中间,从而“卡”住了机器的运行。于是,霍波诙谐的把程序故障统称为“臭虫(BUG)”,把排除程序故障叫DEBUG,而这奇怪的“称呼”,竟成为后来计算机领域的专业行话。

debug在npm上周下载量1千八百万+,github上有6k+的star,是一个受关注的高频基础包。

基本使用场景

主要的功能包括命名空间和色彩定义、毫秒级时间差、printf语法变量替换,附带个函数性能比较的代码示例意思一下。

// 计算函数性能示例,传入一个纯数字数组,计算其平均值
// avgA 使用 lodash 库中 sum 求和
// avgB 使用ES5中 Array.proptype.reduce求和
const _ = require('lodash');
const debug = require('debug');
const debugA = debug('avgA:');
const debugB = debug('avgB:');
const testFixture = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 使用lodash sum求和
function avgA(arr) {
  return _.sum(arr) / arr.length;
}

// 使用原生reduce 求和
function avgB(arr) {
  return arr.reduce((cal, curr) => cal + curr, 0) / arr.length;
}

const range = _.range(0, 10000000, 1);
range.forEach((index) => {
  const result = avgA(testFixture);
  if (index % 1000000 === 0) {
    debugA('time %d', index);
  }
})

range.forEach((index) => {
  const result = avgB(testFixture);
  if (index % 1000000 === 0) {
    debugB('time %d', index);
  }
})

运行结果:

使用场景1: 项目中根据环境开启debug

实际项目中,往往线下环境要开启调试,而线上环境要有条件开启。

const _ = require('lodash');
const debug = require('debug');
const debugA = debug('A:');
const debugB = debug('B:');

// 当环境为production时,所有的debugA均不会输出

if (process.env.NODE_ENV === 'production') {
  debugA.enabled = false;
}

debugA('hello world');
debugB('I am new to debug');

运行结果:

使用场景2: 展示有意思的字符画

我们是一群有着特殊信仰的群体...

顺便打个广告?AIS-TXD招人,前端/设计师快到碗里来,简历速投 txd-jobs@list.alibaba-inc.com

代码分析

源码可以看下官方github,基本逻辑如下:

  • 环境判断分发 Node.js 使用 /node.js , browser 使用 /browser.js
  • node.js 部分 处理命令行启动指令,颜色定义和命令行展示库tty
  • browser.js 部分 处理js申明配置,颜色定义(枚举web安全色值),底层使用 console.log
  • common.js 部分,通用逻辑,包含实例创建、启用开关、色彩选择、printf 语法等

本期的npm包 debug 就介绍到这里,遇到有相似场景的情况就放心使用吧, 还有什么实用的npm包欢迎在留言区推荐啦。

关注查看更多原创内容

关注公众号投递简历 (招聘视觉、交互、前端)

w3ctech微信

扫码关注w3ctech微信公众号

共收到0条回复