vconsole

vconsole

爲移動端開發的前端開發工具。

function

1. 查看console日誌。
2. 查看network請求。
3. 查看文檔元素。
4. 查看cookie/localstorage.
5. 執行手寫的js命令。
6. 自定義插件。

install

npm i vconsole
<script src="path/to/vconsole.js"></script>

usage

// 非AMD/CMD
let vConsole = new VConsole()
// AMD/CMD
let VConsole = require('vconsole/path/vc.js')
let vConsole = new VConsole()
// 與vue結合使用時若嚴格使用eslint準備會報「只加載未使用的problem」 // 我也不會解決這個問題。

實例化後才能使用。
直接使用。與console.log無區別。
console.log('system', value) // 會把value輸出支system.

api

名稱	說明	參數	result
屬性
vConsole.version	獲得vConsole.的版本號	只讀，string
vConsole.option	獲得配置項	object	{defaultPlugins: ['systom', 'network', 'element', 'storage'], onReady: fn, onClearLog: fn, maxLogNumber: Number, disableLogScrolling: Boolean}
vConsole.activeTab	設置當前處於激活態的tab的plugin id	只讀，String
vConsole.tabList	獲得已安裝的tab的plugin id	中讀，string
vConsole.$dom	獲得html（dom對象）
vConsole.set
方法
vConsole.setOption(object/key:[,value])	設置配置項		-
vConsole.destroy()	在頁面中移除vConsole
vConsole.addPlugin(pluginId)	添加一個插件		vConsole.option獲得的對象中的defaultPlugins裏，vConsole把他們每一項叫作一個插件。如：須要添加systom插件，則vConsole.addPlugin('systom')
vConsole.removePlugin(pluginId)	卸載一個插件
vConsole.showTab(pluginId)	激活指定的plugin	String	執行此方法時觸發激活態tab的hide事件，再觸發指定plugin的show事件
vConsole.show()	顯示vConsole	-	觸發showConsole
vConsole.hide()	隱藏vConsole	-	觸發hideConsole
vConsole.showSwitch()	顯示vConsole的開關按鈕	-
vConsole.hideSwitch()	隱藏vConsole的開關按鈕	-
輔助函數
vConsole.tool.isString(value)
vConsole.tool.isArray(value)
vConsole.tool.isBoolean(value)
vConsole.tool.isElement(value)
vConsole.tool.isFunction(value)
vConsole.tool.isNull(value)
vConsole.tool.isNumber(value)
vConsole.tool.isObject(value)
vConsole.tool.isSymbol(value)
vConsole.tool.isUndefined(value)
vConsole.tool.htmlEncode(String)	把string裏的符號使用轉義符號
vConsole.tool.setStorage(key, value)	把數據存到localStorage裏。key會被添加上vConsole_前綴。
vConsole.tool.getStorage(key)	在localStorage中取出key對應的數據。（在keyk 不用添加vConsole_前綴）
vConsole.$.one(selectors, baseElement)	基於baseElement獲得第一個相應元素。	selectors:String, 多種選擇方式時使用空格作作分隔。baseElement默認爲document.可省略。	dom對象
vConsole.$.all(selectors, baseElement)	基於baseElement獲得全部的相應元素。	同上	dom對象
vConsole.log()
vConsole.$.addClass(elements, className)	給指定元素添加class
vConsole.$.removeClass(elements, className)	把指定元素的class屬性中移除指定的className
vConsole.$.hasClass(element, className)	判斷一個dom元素是否有className
vConsole.$.bind(elements, eventType, fn, useCapture)	爲一組dom對象添加指定事件類型對應的函數，是否冒泡（默認false）。
vConsole.$.delegate(element, eventType, selectors, fn)	爲一個指定的元素的符合selectors的子元素綁定eventType事件執行fn函數
vConsole.$.render(templateString, data, toString)	使用有templateString把data編譯成dom對象(toString: false)/html字符串（toString:true）

編寫插件

1. 實例化插件
2. 綁定插件事件
3. 將插件添加到vConsole

1. 實例化插件

let pluginName = new VConsole.VConsolePlugin(id, name)

2. 綁定插件事件

爲些插件綁定（vConsole已經預設的）事件類型對應的函數。
能夠綁定不少事件

pluginName.on(eventType, fn(){})

3. 將插件添加到vConsole

let vConsole = new VConsole()
let pluginName = new VConsole.VConsolePlugin(PluginId, nameOfShowAtTab)
// 爲插件綁定事件
vConsole.addPlugin(pluginName)

插件的事件類型

事件類型	說明	執行函數的參數	返回
init	插件被初始化時觸發
renderTab	渲染tab時觸發。若是不須要添加新tab請不要綁定此事件	fn(html)
addTopBar	當添加頭部按鈕時觸發	帶有按鈕配置信息（obj）的數組[{name:'', data: obj, className: '', onClick: fn(){}}]
addTool	添加tool按鈕時觸發	callback須要的參數是一個包含按鈕配置信息的數組[{name: 按鈕上的文字, global: Boolean是不是全局可見, onClick: fn點擊按鈕時觸發的函數}]
ready	成功安裝插件後觸發	-
remove	當前插件被卸載時觸發	-
show	當前tab被顯示時觸發	-
hide	當前tab被隱藏時觸發	-
showConsole	vConsole顯示時觸發	-
hideConsole	vConsole隱藏時觸發	-
updateOption	當執行setOption()時觸發	-

PluginName.on('eventType', callback)

事件順序圖

限制

這是一個使用vConsole的例子。

在實例化vConsole以前使用console.log('')輸出內容能夠找到輸出來源、行號。實例化後都是由vConsole輸出的。看不到輸出來源、行號。

開發時使用vConsole不容易定位輸出代碼。

思考

爲自定義的插件綁定事件時觸發函數的參數都是callback。這個函數中生成callback函數須要的參數，而後執行callback。可能vconsole的開發者在這個裏使用了高階函數。我在學習這塊內容時想了半天才獲得這個答案。
學習筆記來自git上的官方文檔。做者寫的很好。

將來用途

設置addTool觸發事件。這個事件的執行函數可由開發者任意寫。
些插件不只有顯示輸入的功能，還有操做dom的功能。

---

2018/12/08 by stone