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);
}
})
运行结果:
实际项目中,往往线下环境要开启调试,而线上环境要有条件开启。
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');
运行结果:
我们是一群有着特殊信仰的群体...
顺便打个广告?AIS-TXD招人,前端/设计师快到碗里来,简历速投 txd-jobs@list.alibaba-inc.com
源码可以看下官方github,基本逻辑如下:
/node.js
, browser 使用 /browser.js
node.js
部分 处理命令行启动指令,颜色定义和命令行展示库ttybrowser.js
部分 处理js申明配置,颜色定义(枚举web安全色值),底层使用 console.log
本期的npm包 debug 就介绍到这里,遇到有相似场景的情况就放心使用吧, 还有什么实用的npm包欢迎在留言区推荐啦。
关注查看更多原创内容
关注公众号投递简历 (招聘视觉、交互、前端)
扫码关注w3ctech微信公众号
共收到0条回复