前端工具包之log美化

前言

咱們在開發過程當中，總會封裝一些公共函數來做爲咱們的工具來簡化代碼或者複用代碼，爲此，我打算整理一下我平常工做中經常使用的一些封裝的工具函數，本篇文章主要想實現下面的控制檯輸出效果，接下來就來看看吧。

系列文章

1.前端工具包之深淺拷貝

2.前端工具包之日期格式化

3.前端工具包之防抖函數

4.前端工具包之小工具

5.前端工具包之log美化

背景

做爲一個前端開發者，確定避免不了F12的控制檯調試，而在前端調試過程當中咱們會常常寫console.log來將咱們想調試的部分在控制檯打印輸出，像下面這種

可是這種調試若是過多了咱們極可能分不清上下文或者某一個函數內的打印狀況，因此有時候我會額外的打印分割線和說明，如

這樣雖然相對比較清晰了，可是有時候因爲行數多顏色相同，仍是不方便區分也不夠美觀。因爲我是個vue開發者，而後無心中發現了一個這樣的輸出

哎，好像發現了新大陸（我知道好多人可能會吐槽，這不就是瀏覽器打印彩色字體嘛，噗，聞道有前後，恕我知道的比較晚哈）

出於好奇我點進去這個插件的sources，發現了一段這樣的代碼

src_bridge.on('log-detected-vue', () => {
      console.log(
        `%c vue-devtools %c Detected Vue v${Vue.version} %c`,
        'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px; color: #fff',
        'background:#41b883 ; padding: 1px; border-radius: 0 3px 3px 0; color: #fff',
        'background:transparent'
      )
    })
複製代碼

原來console有這麼多方法呀，如什麼分組啊，dir，table均可以針對不一樣輸出來輸出不一樣的內容，感興趣的能夠去搜一下這裏由於只想實現一個相似的工具打印，因此只介紹一下log的格式化輸出功能

格式化輸出

log 的格式化輸出有幾個佔位符

佔位符	含義
%s	字符串輸出
%d or %i	整數輸出
%f	浮點數輸出
%o	打印javascript對象，能夠是整數、字符串以及JSON數據
%c	自定義輸出樣式

示例1

console.log("歡迎%s和%s兩位新同窗",'小明','小張');

console.log("圓周率整數部分：%d，帶上小數是：%f",3.1415,3.1415);
複製代碼

直接打開f12輸入上面兩行就會獲得下面的輸出

示例2

console.log("%c我是綠色傾斜的字體", "color: green; font-style: italic");

console.log("%c 我是3D樣式", " text-shadow: 0 1px 0 #ccc,0 2px 0 #c9c9c9,0 3px 0 #bbb,0 4px 0 #b9b9b9,0 5px 0 #aaa,0 6px 1px rgba(0,0,0,.1),0 0 5px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.3),0 3px 5px rgba(0,0,0,.2),0 5px 10px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.2),0 20px 20px rgba(0,0,0,.15);font-size:5em");

console.log('%c色彩帶 ', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;');

console.log('%c我是帶有背景的輸出.', 'color: #fff; background: #f40; font-size: 24px;');
複製代碼

複製上面的到控制檯執行，你會獲得以下輸出

怎麼樣，是否是很酷呢，如今看來，相似vue-devtools 打印的這種文本是否是很好理解呢，到如今，我們就能夠開始實現本身的彩色輸出工具函數的封裝了。下面看代碼

工具封裝

先簡要分析一下，如今大多數庫都會提供幾個狀態的色值，如 element會提供primary，success，info，warning，danger等相似的默認色值，並且咱們還想實現非狀態的自定義顏色，那麼咱們就須要一個輔助的獲取顏色值的函數，和一個真正輸出的函數，並且這個工具庫還得有一些快捷輸出，

1.首先是獲取顏色值的輔助函數，該函數有6個默認樣式的顏色，也能夠直接傳入標準的顏色字符來返回。

/**
 * @description 返回這個樣式的顏色值
 * @param {String} type 樣式名稱 [ primary | success | warning | danger | info ]
 */
function typeColor (type = 'default') {
  let color = ''
  switch (type) {
    case 'primary':
      color = '#2d8cf0'
      break
    case 'success':
      color = '#19be6b'
      break
    case 'info':
      color = '#909399'
      break
    case 'warning':
      color = '#ff9900'
      break
    case 'danger':
      color = '#f03f14'
      break
    case 'default':
      color = '#35495E'
      break
    default:
      color = type
      break
  }
  return color
}
複製代碼

2.通用顏色的打印方法，這裏咱們給函數起名爲print，直譯爲打印

const log = {} // 定義一個對象

/**
 * 打印方法
 * @param text 輸出文本
 * @param type 輸出樣式，能夠是6個狀態值，也能夠是自定義顏色
 * @param back 是否將色值應用於背景色
 */
log.print = function (text, type = 'default', back = false) {
  if (typeof text === 'object') { // 若是是對象則調用打印對象方式
    console.dir(text)
    return
  }
  if (back) { // 若是是打印帶背景圖的
    console.log(
      `%c ${text} `,
      `background:${typeColor(type)}; padding: 2px; border-radius: 4px;color: #fff;`
    )
  } else {
    console.log(
      `%c ${text} `,
      `color: ${typeColor(type)};`
    )
  }
}
複製代碼

這裏作一個斷定，由於咱們輸出的可能爲對象，若是是對象則直接用dir方法打印，若是是字符串，則再根據配置來輸出，作個簡單的測試以下

// 彩色字體
log.print('=======彩色字體======')
log.print('this is default log')
log.print('this is primary log','primary')
log.print('this is success log','success')
log.print('this is info log','info')
log.print('this is warning log','warning')
log.print('this is danger log','danger')
log.print('this is custom log','#df85ff')
// 背景底色
log.print('=======背景底色======')
log.print('this is primary log','primary',true)
log.print('this is success log','success',true)
log.print('this is info log','info',true)
log.print('this is warning log','warning',true)
log.print('this is danger log','danger',true)
log.print('this is custom log','#df85ff',true)
複製代碼

這麼看輸出，是否是好看多了。接下來咱們仿照vue-devtools來在擴展一個方法，參考上面的源碼改寫一下輸出不一樣的類型顏色便可

/**
 * 漂亮的輸出
 * @param title 前面的標題
 * @param text 輸出文本
 * @param type 輸出樣式，能夠是6個狀態值，也能夠是自定義顏色
 */
log.pretty = function (title, text, type = 'primary') {
  console.log(
    `%c ${title} %c ${text} %c`,
    `background:${typeColor(type)};border:1px solid ${typeColor(type)}; padding: 1px; border-radius: 4px 0 0 4px; color: #fff;`,
    `border:1px solid ${typeColor(type)}; padding: 1px; border-radius: 0 4px 4px 0; color: ${typeColor(type)};`,
    'background:transparent'
  )
}
複製代碼

咱們這裏的輸出稍微區別一下vue-devtools，採用前帶背景後面爲白色實現，若有想法能夠根據實際自行改變。這裏輸出看看效果。

// 漂亮的輸出
log.print('=======漂亮的輸出======')
log.pretty('title','this is primary')
log.pretty('title','this is default','default')
log.pretty('title','this is success','success')
log.pretty('title','this is info','info')
log.pretty('title','this is warning','warning')
log.pretty('title','this is danger','danger')
log.pretty('title','this is custom','#df85ff')
log.pretty('bin-ui','https://wangbin3162.gitee.io/bin-ui/')
複製代碼

就會獲得以下的輸出

怎麼樣，是否是頗有個性呢，有了顏色作區分，之後打印就會更加靈活美觀了。

最後咱們再給咱們的工具豐富一下幾個接口函數，由於咱們想快速打印不一樣狀態的字體時總得輸入type的類型很不友好，咱們能夠這樣寫

log.primary = function (text, back = false) {
  this.print(text, 'primary', back)
}
log.success = function (text, back = false) {
  this.print(text, 'success', back)
}
log.info = function (text, back = false) {
  this.print(text, 'info', back)
}
log.warning = function (text, back = false) {
  this.print(text, 'warning', back)
}
log.danger = function (text, back = false) {
  this.print(text, 'danger', back)
}
複製代碼

ps 實際上就至關於快捷調用了print方法，只是無須設置顏色值了，輸出依然是第一個例子那種

log.print('=======便捷輸出彩色文字======')
log.primary('this is primary')
log.success('this is success')
log.info('this is info')
log.warning('this is warning')
log.danger('this is danger')

log.print('=======便捷輸出彩色背景文字======')
log.primary('this is primary back',true)
log.success('this is success back',true)
log.info('this is info back',true)
log.warning('this is warning back',true)
log.danger('this is danger back',true)
複製代碼

到這裏整個log的工具就封裝完成了，把以上代碼組合一下就能夠拿到本身的項目中使用啦，這裏說一下我本身的vue組件庫 bin-ui ,你打開官網文檔也會發現一個相似的輸出連接到文檔地址

其實組件庫已經集成了這個小工具包，直接使用 this.$log.print就能夠快速調用啦。

---

相關連接

我的主頁 | bin-ui | bin-admin