vconsole
为挪动端开辟的前端开辟工具。
function
- 检察console日记。
- 检察network要求。
- 检察文档元素。
- 检察cookie/localstorage.
- 实行手写的js敕令。
- 自定义插件。
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） |
编写插件
- 实例化插件
- 绑定插件事宜
- 将插件增加到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
