如何为你的JavaScript代码日志着色详解

 更新时间:2019年04月08日 10:06:43   作者:nicejade  
这篇文章主要给大家介绍了关于如何为你的JavaScript代码日志进行着色的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧

前言

在使用 JavaScript 开发项目,可借助 console.log 来打印日志,以便捷分析问题;但,当接触相对比较项目,纯黑色的日志输出,就会使得其作用大大削弱;虽然 info, wran、error 等方法会区别颜色输出,但各自皆有其职责,不便挪来加以滥用;此时,就需求扩展些方法,来为你的 JavaScript 代码日志着色,使得日志可以发挥更大的价值。

要实现这个功能,其实很简单;利用 console.log 字符串替代和格式设置功能即可;下面为其格式说明符的完整列表:

说明符 输出
%s 将值格式化为字符串
%i 或 %d 将值格式化为整型
%f 将值格式化为浮点值
%o 将值格式化为可扩展 DOM 元素。如同在 Elements 面板中显示的一样
%O 将值格式化为可扩展 JavaScript 对象
%c 将 CSS 样式规则应用到第二个参数指定的输出字符串

传递到任何记录方法的第一个参数可能包含一个或多个格式说明符。格式说明符由一个 % 符号与后面紧跟的一个字母组成,字母指示应用到值的格式。字符串后面的参数会按顺序应用到占位符。

关于 console 更多功能和用法,可参见 使用控制台 | Google Developers;下面是对彩色输出 log 的一个简单示例:

console.log(`%c 倾城之链: %s`, 'color: #65c294', ': 一个蛮有用的网站')
console.log(`%c 倾城之链: %c%s`, 'color: #65c294', 'color: #1a1a1a', ': 一个蛮有用的网站')

前面提及,当涉及到较大型项目,为了能从日志显现代码大致流向,最好可以封装方法,针对不同的模块日志,以不同颜色作下区分显示;这在一定程度上可以将所打出的日志利益更大化;下面是对此的一点实践方案:

const _gLogColorObj = {
 moduleA: '#009ad6', // 青色
 moduleB: '#65c294' // 若竹色
}

const _gConsole = (theme, args) => {
 const regStr = `%c@λ~${theme.toLocaleUpperCase()}: ${_gGetMatchStr(args)}`
 const color = _gLogColorObj[theme]
 console.log(regStr, `color: ${color}`, ...args)
}

const _gRegMatchObj = {
 object: '%o',
 function: '%o',
 number: '%i',
 string: '%s',
 undefined: '%s',
 boolean: '%s'
}

const _gGetMatchStr = args => {
 const cMatchArr = []
 for (let key in args) {
 cMatchArr.push(_gRegMatchObj[typeof args[key]])
 }
 return cMatchArr.join(' ')
}

const $log = {
 moduleA: (...args) => {
 _gConsole('moduleA', args)
 },
 moduleB: (...args) => {
 _gConsole('moduleB', args)
 }
 // 您可以在此定义更多方法,来区分不同模块; 
}

上面代码中,主要基于表驱动法,根据所设计的模块名(Eg: moduleA)以及既定色值,彩色化你的 JS 代码日志输出,并指明日志所在模块;这样一来,即可使得日志输出更加清晰。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对脚本之家的支持。

相关文章

  • Bootstrap布局方式详解

    Bootstrap布局方式详解

    这篇文章主要为大家详细介绍了Bootstrap布局方式,分析了Bootstrap网格系统的各种特性,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 可以用来搜索当前页面内容的js代码

    可以用来搜索当前页面内容的js代码

    搜索页面内容的js代码,不过这效率不是很高,大篇幅内容不建议使用。
    2009-12-12
  • JS实现消息来时让网页标题闪动效果的方法

    JS实现消息来时让网页标题闪动效果的方法

    这篇文章主要介绍了JS实现消息来时让网页标题闪动效果的方法,实例分析了JavaScript基于时间函数动态操作页面元素的技巧,并附带了开心网的标题闪动解决方案,需要的朋友可以参考下
    2016-04-04
  • 再论Javascript下字符串连接的性能

    再论Javascript下字符串连接的性能

    这是个老话题了,之所以再拿出来说,是因为浏览器一直在进步,以前最好的方法现在不一定是最好的。
    2011-03-03
  • JS验证邮件地址格式方法小结

    JS验证邮件地址格式方法小结

    这篇文章主要介绍了JS验证邮件地址格式方法,结合两个实例形式分析了JavaScript基于正则表达式进行邮件格式验证的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-12-12
  • JavaScript实现拖拽网页内元素的方法

    JavaScript实现拖拽网页内元素的方法

    这篇文章主要介绍了JavaScript实现拖拽网页内元素的方法,以注释形式较为详细的分析了javascript事件监听、元素定位的相关技巧,并配有详细的注释以便于理解,需要的朋友可以参考下
    2015-04-04
  • BootStrap表单控件之文本域textarea

    BootStrap表单控件之文本域textarea

    这篇文章主要介绍了BootStrap表单控件之文本域textarea,需要的朋友可以参考下
    2017-05-05
  • JavaScript创建防篡改对象的方法分析

    JavaScript创建防篡改对象的方法分析

    这篇文章主要介绍了JavaScript创建防篡改对象的方法,结合具体实例形式分析了javascript基于不可扩展对象、密封的对象和冻结的对象实现防篡改对象的相关操作技巧,需要的朋友可以参考下
    2018-12-12
  • 详解JS异步加载的三种方式

    详解JS异步加载的三种方式

    这篇文章主要介绍了详解JS异步加载的三种方式,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-03-03
  • js弹性势能动画之抛物线运动实例详解

    js弹性势能动画之抛物线运动实例详解

    这篇文章主要为大家详细介绍了js弹性势能动画之抛物线运动的制作方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论