快捷導(dǎo)航

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

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

這篇文章主要給大家介紹了關(guān)于如何為你的JavaScript代碼日志進(jìn)行著色的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

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

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

關(guān)于 console 更多功能和用法，可參見(jiàn) 使用控制臺(tái) | Google Developers；下面是對(duì)彩色輸出 log 的一個(gè)簡(jiǎn)單示例：

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

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

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

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

總結(jié)

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

您可能感興趣的文章: