Debug是一个NodeJS和浏览器的Log增强工具,功能比较单一,提供彩色的日志信息输出。Github库地址是:https://github.com/visionmedia/debug
使用很简单,官方提供的使用例子如下图所示:
整个源代码代码没多少行。四个文件indx.js, browser.js,node.js和common.js.
Debug应用起来也很简单,统一了浏览器和NodeJS的调用方式。首先通过判断运行环境来检测是加载node.js(后端环境),或者加载browser.js(前端环境),并通过一些检测,检查下是否支持彩色文本输出,并封装了运行环境自带的log函数,文本上色逻辑,最后传递给common.js做统一封装,加入namespace,做进一步的颜色分组区分,输出到用户代码,让用户代码进行调用。
Debug的核心设计思想,就是利用现有的前后端环境中,支持着色的一些功能,让帮用户自动的加一些文本着色的功能。
后端,就是Nodejs环境,一般最终都会用终端来输出日志,而终端往往是支持颜色输出的,不管是windows还是linux,最少限度的,也是支持基本的一些颜色输出的。Debug利用这一点,把log重新定向到stderr,然后写入一些带颜色符号的文字。最终就有颜色输出了。
前端环境,包含了浏览器和Electron,是利用 console.log的%c格式化功能。也就是在log中加入一些简单的CSS样式来凸显文本颜色,背景色等等。但这个功能不是所有的浏览器支持,相对nodejs而言,需要具体的检测下前端的浏览器情况,来确定是否可以使用console.log的%c格式化功能。
比如这样的代码
"console.log('%c a colorful message', 'background: green; color: white; display: block;');" 就是加入了CSS的log输出。从console结果来看,自然是有彩色信息出现。
所以,整体而言,Debug的一个环境判断和封装的过程如下
判断是否存在process和process.type这两个obj用来识别是那种运行环境。Electron则做了特殊处理。
NodeJS环境:
浏览器环境:
用户调用debug()函数的时候,Debug的内部运行过程如下
结束语
这类功能单一的小框架代码,是很适合用来学习的。
第一代码不多,很好阅读。
第二,支持多环境(node和浏览器),可以看下多环境下,JS代码该怎么设计。
第三,学习封装思维,不同的运行环境,如何统一用户的调用接口,并在内部封装过程中保持结构的统一。
第四,学习扩展性,Debug这种设计模式,如果需要增加一个运行环境,也是相当的简单的,只是按现有的结构,增加一个xxx.js,和node.js和browser.js并处同一层级就可以了。扩展性也是很好的。
领取专属 10元无门槛券
私享最新 技术干货