如何為你的JavaScript代碼日志著色詳解

更新時間：2019年04月08日 10:06:43 作者：nicejade

這篇文章主要給大家介紹了關于如何為你的JavaScript代碼日志進行著色的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

前言

在使用 JavaScript 開發(fā)項目，可借助 console.log 來打印日志，以便捷分析問題；但，當接觸相對比較項目，純黑色的日志輸出，就會使得其作用大大削弱；雖然 info， wran、error 等方法會區(qū)別顏色輸出，但各自皆有其職責，不便挪來加以濫用；此時，就需求擴展些方法，來為你的 JavaScript 代碼日志著色，使得日志可以發(fā)揮更大的價值。

要實現(xiàn)這個功能，其實很簡單；利用 console.log 字符串替代和格式設置功能即可；下面為其格式說明符的完整列表：

說明符	輸出
%s	將值格式化為字符串
%i 或 %d	將值格式化為整型
%f	將值格式化為浮點值
%o	將值格式化為可擴展 DOM 元素。如同在 Elements 面板中顯示的一樣
%O	將值格式化為可擴展 JavaScript 對象
%c	將 CSS 樣式規(guī)則應用到第二個參數(shù)指定的輸出字符串

傳遞到任何記錄方法的第一個參數(shù)可能包含一個或多個格式說明符。格式說明符由一個 % 符號與后面緊跟的一個字母組成，字母指示應用到值的格式。字符串后面的參數(shù)會按順序應用到占位符。

關于 console 更多功能和用法，可參見使用控制臺 | Google Developers；下面是對彩色輸出 log 的一個簡單示例：

console.log(`%c 傾城之鏈: %s`, 'color: #65c294', ': 一個蠻有用的網(wǎng)站')
console.log(`%c 傾城之鏈: %c%s`, 'color: #65c294', 'color: #1a1a1a', ': 一個蠻有用的網(wǎng)站')

前面提及，當涉及到較大型項目，為了能從日志顯現(xiàn)代碼大致流向，最好可以封裝方法，針對不同的模塊日志，以不同顏色作下區(qū)分顯示；這在一定程度上可以將所打出的日志利益更大化；下面是對此的一點實踐方案：

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)
 }
 // 您可以在此定義更多方法，來區(qū)分不同模塊； 
}

上面代碼中，主要基于表驅(qū)動法，根據(jù)所設計的模塊名（Eg： moduleA）以及既定色值，彩色化你的 JS 代碼日志輸出，并指明日志所在模塊；這樣一來，即可使得日志輸出更加清晰。

總結

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對腳本之家的支持。

您可能感興趣的文章: