資訊專欄INFORMATION COLUMN
摘要：實(shí)例化后才能使用。在不用添加前綴基于得到第一個相應(yīng)元素。對象基于得到所有的相應(yīng)元素。未來用途設(shè)置觸發(fā)事件。這個事件的執(zhí)行函數(shù)可由開發(fā)者任意寫。
vconsole
為移動端開發(fā)的前端開發(fā)工具。
function查看console日志。
查看network請求。
查看文檔元素。
查看cookie/localstorage.
執(zhí)行手寫的js命令。
自定義插件。
installnpm i vconsoleusage
// 非AMD/CMD
let vConsole = new VConsole()
// AMD/CMD
let VConsole = require("vconsole/path/vc.js")
let vConsole = new VConsole()
// 與vue結(jié)合使用時若嚴(yán)格使用eslint準(zhǔn)備會報(bào)“只加載未使用的problem” // 我也不會解決這個問題。
實(shí)例化后才能使用。
直接使用。與console.log無區(qū)別。
console.log("system", value) // 會把value輸出支system.
| 名稱 | 說明 | 參數(shù) | result |
|---|---|---|---|
| 屬性 | |||
| vConsole.version | 得到vConsole.的版本號 | 只讀，string | |
| vConsole.option | 得到配置項(xiàng) | object | {defaultPlugins: ["systom", "network", "element", "storage"], onReady: fn, onClearLog: fn, maxLogNumber: Number, disableLogScrolling: Boolean} |
| vConsole.activeTab | 設(shè)置當(dāng)前處于激活態(tài)的tab的plugin id | 只讀，String | |
| vConsole.tabList | 得到已安裝的tab的plugin id | 中讀，string | |
| vConsole.$dom | 得到html（dom對象） | ||
| vConsole.set | |||
| 方法 | |||
| vConsole.setOption(object/key:[,value]) | 設(shè)置配置項(xiàng) | - | |
| vConsole.destroy() | 在頁面中移除vConsole | ||
| vConsole.addPlugin(pluginId) | 添加一個插件 | vConsole.option得到的對象中的defaultPlugins里，vConsole把他們每一項(xiàng)叫做一個插件。如：需要添加systom插件，則vConsole.addPlugin("systom") | |
| vConsole.removePlugin(pluginId) | 卸載一個插件 | ||
| vConsole.showTab(pluginId) | 激活指定的plugin | String | 執(zhí)行此方法時觸發(fā)激活態(tài)tab的hide事件，再觸發(fā)指定plugin的show事件 |
| vConsole.show() | 顯示vConsole | - | 觸發(fā)showConsole |
| vConsole.hide() | 隱藏vConsole | - | 觸發(fā)hideConsole |
| vConsole.showSwitch() | 顯示vConsole的開關(guān)按鈕 | - | |
| vConsole.hideSwitch() | 隱藏vConsole的開關(guān)按鈕 | - | |
| 輔助函數(shù) | |||
| 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里的符號使用轉(zhuǎn)義符號 | ||
| vConsole.tool.setStorage(key, value) | 把數(shù)據(jù)存到localStorage里。key會被添加上vConsole_前綴。 | ||
| vConsole.tool.getStorage(key) | 在localStorage中取出key對應(yīng)的數(shù)據(jù)。（在keyk 不用添加vConsole_前綴） | ||
| vConsole.$.one(selectors, baseElement) | 基于baseElement得到第一個相應(yīng)元素。 | selectors:String, 多種選擇方式時使用空格做做分隔。baseElement默認(rèn)為document.可省略。 | dom對象 |
| vConsole.$.all(selectors, baseElement) | 基于baseElement得到所有的相應(yīng)元素。 | 同上 | 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對象添加指定事件類型對應(yīng)的函數(shù)，是否冒泡（默認(rèn)false）。 | ||
| vConsole.$.delegate(element, eventType, selectors, fn) | 為一個指定的元素的符合selectors的子元素綁定eventType事件執(zhí)行fn函數(shù) | ||
| vConsole.$.render(templateString, data, toString) | 使用有templateString把data編譯成dom對象(toString: false)/html字符串（toString:true） |
實(shí)例化插件
綁定插件事件
將插件添加到vConsole
1. 實(shí)例化插件let pluginName = new VConsole.VConsolePlugin(id, name)2. 綁定插件事件
為些插件綁定（vConsole已經(jīng)預(yù)設(shè)的）事件類型對應(yīng)的函數(shù)。
可以綁定很多事件
pluginName.on(eventType, fn(){})
3. 將插件添加到vConsole
let vConsole = new VConsole() let pluginName = new VConsole.VConsolePlugin(PluginId, nameOfShowAtTab) // 為插件綁定事件 vConsole.addPlugin(pluginName)插件的事件類型
| 事件類型 | 說明 | 執(zhí)行函數(shù)的參數(shù) | 返回 |
|---|---|---|---|
| init | 插件被初始化時觸發(fā) | ||
| renderTab | 渲染tab時觸發(fā)。如果不需要添加新tab請不要綁定此事件 | fn(html) | |
| addTopBar | 當(dāng)添加頭部按鈕時觸發(fā) | 帶有按鈕配置信息（obj）的數(shù)組[{name:"", data: obj, className: "", onClick: fn(){}}] | |
| addTool | 添加tool按鈕時觸發(fā) | callback需要的參數(shù)是一個包含按鈕配置信息的數(shù)組[{name: 按鈕上的文字, global: Boolean是否是全局可見, onClick: fn點(diǎn)擊按鈕時觸發(fā)的函數(shù)}] | |
| ready | 成功安裝插件后觸發(fā) | - | |
| remove | 當(dāng)前插件被卸載時觸發(fā) | - | |
| show | 當(dāng)前tab被顯示時觸發(fā) | - | |
| hide | 當(dāng)前tab被隱藏時觸發(fā) | - | |
| showConsole | vConsole顯示時觸發(fā) | - | |
| hideConsole | vConsole隱藏時觸發(fā) | - | |
| updateOption | 當(dāng)執(zhí)行setOption()時觸發(fā) | - |
PluginName.on("eventType", callback)
事件順序圖
這是一個使用vConsole的例子。
在實(shí)例化vConsole之前使用console.log("")輸出內(nèi)容可以找到輸出來源、行號。實(shí)例化后都是由vConsole輸出的。看不到輸出來源、行號。
開發(fā)時使用vConsole不容易定位輸出代碼。
思考為自定義的插件綁定事件時觸發(fā)函數(shù)的參數(shù)都是callback。這個函數(shù)中生成callback函數(shù)需要的參數(shù)，然后執(zhí)行callback。可能vconsole的開發(fā)者在這個里使用了高階函數(shù)。我在學(xué)習(xí)這塊內(nèi)容時想了半天才得到這個答案。
學(xué)習(xí)筆記來自git上的官方文檔。作者寫的很好。
設(shè)置addTool觸發(fā)事件。這個事件的執(zhí)行函數(shù)可由開發(fā)者任意寫。
些插件不僅有顯示輸入的功能，還有操作dom的功能。
2018/12/08 by stone
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/99873.html
摘要：可使用進(jìn)行安裝地址在項(xiàng)目的根文件的標(biāo)簽中引入也可使用免安裝地址同樣需要放在項(xiàng)目根文件的標(biāo)簽中 可使用npm進(jìn)行安裝 GitHub地址：https://github.com/Tencent/vC... npm install vconsole 在項(xiàng)目的根html文件的標(biāo)簽中引入dist/vconsole.min.js // init vConsole var vCon...
摘要：上有趣又實(shí)用的前端項(xiàng)目持續(xù)更新，歡迎補(bǔ)充幻燈片展示框架一個專門用來做幻燈片的框架，支持和語法。又一個幻燈片展示框架一個受的啟發(fā)，使用了現(xiàn)代瀏覽器里支持的和的特效幻燈片。我的個人網(wǎng)站首頁也是用開發(fā)的。好在有可以幫助我們解決這個問題。 github 上有趣又實(shí)用的前端項(xiàng)目（持續(xù)更新，歡迎補(bǔ)充） 1. reveal.js: 幻燈片展示框架 一個專門用來做 HTML 幻燈片的框架，支持 HTM...
摘要：上有趣又實(shí)用的前端項(xiàng)目持續(xù)更新，歡迎補(bǔ)充幻燈片展示框架一個專門用來做幻燈片的框架，支持和語法。又一個幻燈片展示框架一個受的啟發(fā)，使用了現(xiàn)代瀏覽器里支持的和的特效幻燈片。我的個人網(wǎng)站首頁也是用開發(fā)的。好在有可以幫助我們解決這個問題。 github 上有趣又實(shí)用的前端項(xiàng)目（持續(xù)更新，歡迎補(bǔ)充） 1. reveal.js: 幻燈片展示框架 一個專門用來做 HTML 幻燈片的框架，支持 HTM...
閱讀 2092·2023-04-25 20:52
閱讀 2473·2021-09-22 15:22
閱讀 2121·2021-08-09 13:44
閱讀 1765·2019-08-30 13:55
閱讀 2803·2019-08-23 15:42
閱讀 2278·2019-08-23 14:14
閱讀 2871·2019-08-23 13:58
閱讀 3001·2019-08-23 11:49
