資訊專欄INFORMATION COLUMN
摘要：實例化后才能使用。在不用添加前綴基于得到第一個相應元素。對象基于得到所有的相應元素。未來用途設置觸發事件。這個事件的執行函數可由開發者任意寫。
vconsole
為移動端開發的前端開發工具。
function查看console日志。
查看network請求。
查看文檔元素。
查看cookie/localstorage.
執行手寫的js命令。
自定義插件。
installnpm i vconsoleusage
// 非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.
| 名稱 | 說明 | 參數 | 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） |
實例化插件
綁定插件事件
將插件添加到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
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99873.html
摘要：可使用進行安裝地址在項目的根文件的標簽中引入也可使用免安裝地址同樣需要放在項目根文件的標簽中 可使用npm進行安裝 GitHub地址：https://github.com/Tencent/vC... npm install vconsole 在項目的根html文件的標簽中引入dist/vconsole.min.js // init vConsole var vCon...
摘要：上有趣又實用的前端項目持續更新，歡迎補充幻燈片展示框架一個專門用來做幻燈片的框架，支持和語法。又一個幻燈片展示框架一個受的啟發，使用了現代瀏覽器里支持的和的特效幻燈片。我的個人網站首頁也是用開發的。好在有可以幫助我們解決這個問題。 github 上有趣又實用的前端項目（持續更新，歡迎補充） 1. reveal.js: 幻燈片展示框架 一個專門用來做 HTML 幻燈片的框架，支持 HTM...
摘要：上有趣又實用的前端項目持續更新，歡迎補充幻燈片展示框架一個專門用來做幻燈片的框架，支持和語法。又一個幻燈片展示框架一個受的啟發，使用了現代瀏覽器里支持的和的特效幻燈片。我的個人網站首頁也是用開發的。好在有可以幫助我們解決這個問題。 github 上有趣又實用的前端項目（持續更新，歡迎補充） 1. reveal.js: 幻燈片展示框架 一個專門用來做 HTML 幻燈片的框架，支持 HTM...
閱讀 2104·2023-04-25 20:52
閱讀 2497·2021-09-22 15:22
閱讀 2128·2021-08-09 13:44
閱讀 1772·2019-08-30 13:55
閱讀 2813·2019-08-23 15:42
閱讀 2287·2019-08-23 14:14
閱讀 2880·2019-08-23 13:58
閱讀 3009·2019-08-23 11:49
