diff --git a/doc/plugin_event_list.md b/doc/plugin_event_list.md index 700a0226..f9ab7eef 100644 --- a/doc/plugin_event_list.md +++ b/doc/plugin_event_list.md @@ -224,4 +224,21 @@ myPlugin.on('hideConsole', function() { ``` +## updateOption + +Trigger when `vConsole.setOption()` is called. + +##### Callback Arguments: + +- none + +##### Example: + +```javascript +myPlugin.on('updateOption', function() { + // do something +}); +``` + + [Back to Index](./a_doc_index.md) \ No newline at end of file diff --git a/doc/plugin_event_list_CN.md b/doc/plugin_event_list_CN.md index 2245b437..929ad77f 100644 --- a/doc/plugin_event_list_CN.md +++ b/doc/plugin_event_list_CN.md @@ -233,4 +233,21 @@ myPlugin.on('hideConsole', function() { ``` +## updateOption + +当 `vConsole.setOption()` 被调用时触发 + +##### Callback 参数： + +- none + +##### 例子: + +```javascript +myPlugin.on('updateOption', function() { + // do something +}); +``` + + [返回索引](./a_doc_index_CN.md) \ No newline at end of file diff --git a/doc/plugin_getting_started.md b/doc/plugin_getting_started.md index 236542db..9f99f220 100644 --- a/doc/plugin_getting_started.md +++ b/doc/plugin_getting_started.md @@ -14,8 +14,8 @@ You can customize the functions of the tab and buttons. Two lines to create a vConsole plugin: ```javascript -var myPlugin = new vConsole.VConsolePlugin('my_plugin', 'My Plugin'); -vConsole.addPlugin(myPlugin); +var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin'); +vc.addPlugin(myPlugin); ``` The above plugin has no function. See [Building a Plugin](./plugin_building_a_plugin.md) for more details. diff --git a/doc/plugin_getting_started_CN.md b/doc/plugin_getting_started_CN.md index 5957ddca..78b89dd2 100644 --- a/doc/plugin_getting_started_CN.md +++ b/doc/plugin_getting_started_CN.md @@ -14,8 +14,8 @@ 两行创建一个 vConsole 插件： ```javascript -var myPlugin = new vConsole.VConsolePlugin('my_plugin', 'My Plugin'); -vConsole.addPlugin(myPlugin); +var myPlugin = new VConsole.VConsolePlugin('my_plugin', 'My Plugin'); +vc.addPlugin(myPlugin); ``` 当然，上面的插件并无任何功能。请继续阅读[编写插件](./plugin_building_a_plugin_CN.md)来了解细节。 diff --git a/doc/public_properties_methods.md b/doc/public_properties_methods.md index f2036ef6..4d539102 100644 --- a/doc/public_properties_methods.md +++ b/doc/public_properties_methods.md @@ -16,10 +16,35 @@ The current version of vConsole. Example: ```javascript -vConsole.version // => "2.1.0" +vConsole.version // => "3.0.0" ``` +### vConsole.option + +A configuration object. + +- Writable +- Type: object + +Key | Type | Optional | Default value | Description +-------------- | ------- | -------- | ------------------------------------------- | ------------------- +defaultPlugins | Array | true | ['system', 'network', 'element', 'storage'] | Listed built-in plugins will be inited and loaded into vConsole. +maxLogNumber | Number | true | 1000 | Overflow logs will be removed from log tabs. + +Example: + +```javascript +// get +vConsole.option // => {...} +// set +vConsole.setOption('maxLogNumber', 5000); +// or: +vConsole.setOption({maxLogNumber: 5000}); +``` + + + ### vConsole.activedTab The actived tab's plugin id. @@ -60,6 +85,26 @@ vConsole's HTML element. ## Methods +### vConsole.setOption(keyOrObj[, value]) + +Update `vConsole.option`. + +##### Parameters: +- (required) keyOrObj: The key of option, or a key-value object. +- (optional) value: The value of an option. + +##### Return: +- None + +##### Example: + +```javascript +vConsole.setOption('maxLogNumber', 5000); +// or: +vConsole.setOption({maxLogNumber: 5000}); +``` + + ### vConsole.addPlugin(plugin) Add a new plugin to vConsole. Duplicate plugin will be ignored. diff --git a/doc/public_properties_methods_CN.md b/doc/public_properties_methods_CN.md index b51b3b08..583c88c6 100644 --- a/doc/public_properties_methods_CN.md +++ b/doc/public_properties_methods_CN.md @@ -16,7 +16,31 @@ vConsole 提供一些公共属性字段、函数方法，以便开发插件。 例子： ```javascript -vConsole.version // => "2.1.0" +vConsole.version // => "3.0.0" +``` + + +### vConsole.option + +配置项。 + +- 可写 +- 类型：object + +键名 | 类型 | 可选 | 默认值 | 描述 +-------------- | ------- | -------- | ------------------------------------------- | ------------------- +defaultPlugins | Array | true | ['system', 'network', 'element', 'storage'] | 需要自动初始化并加载的内置插件。 +maxLogNumber | Number | true | 1000 | 超出上限的日志会被自动清除。 + +例子： + +```javascript +// get +vConsole.option // => {...} +// set +vConsole.setOption('maxLogNumber', 5000); +// 或者： +vConsole.setOption({maxLogNumber: 5000}); ``` @@ -60,6 +84,26 @@ vConsole 的 HTML element。 ## 方法 +### vConsole.setOption(keyOrObj[, value]) + +更新 `vConsole.option` 配置项。 + +##### 参数： +- (required) keyOrObj: 配置项的 key 值，或直接传入 key-value 格式的 object 对象。 +- (optional) value: 配置项的 value 值。 + +##### 返回： +- 无 + +##### 例子： + +```javascript +vConsole.setOption('maxLogNumber', 5000); +// 或者： +vConsole.setOption({maxLogNumber: 5000}); +``` + + ### vConsole.addPlugin(plugin) 添加一个新插件。重名的插件会被忽略。 diff --git a/doc/tutorial.md b/doc/tutorial.md index 5fb8f2e2..2402326e 100644 --- a/doc/tutorial.md +++ b/doc/tutorial.md @@ -23,19 +23,46 @@ Then save `dist/vconsole.min.js` to your project. ```html - + + ``` (2) Under AMD/CMD rule, use `require()` to import vConsole. ```javascript -var vConsole = require('path/to/vconsole.min.js'); +var VConsole = require('path/to/vconsole.min.js'); +var vc = new VConsole(); ``` +Notice that `VConsole` is the prototype of vConsole. So vConsole panel will not be inserted into your page until you `new` it manually. + ## Usage +### Initialization & Configuaration + +After imported, vConsole should be inited manually: + +```javascript +var vc = new VConsole(option); +``` + +`option` is an optional object. + +See [Public Properties & Methods](./public_properties_methods.md) for definition. + +Use `setOption()` to update `option`: + +```javascript +vc.setOption('maxLogNumber', 5000); +// or: +vc.setOption({maxLogNumber: 5000}); +``` + + ### Print logs Use the methods of `console` to print logs, just like what you do at desktop browsers: @@ -89,24 +116,15 @@ console.log('UserID:', uid); // UserID: 233 ### Special format -Use `[default|system|...]` string to print logs to specific tab: +Use `[system]` as the first parameter to print logs to System tab: ```javascript -// [xxx] must be at the beginning of a log -console.log('[system]', 'foo'); -console.log('[system] bar'); -// foo & bar will be printed to system tab -``` - -Supported tabs: - -``` -[default] Log tab (default) -[system] System tab +console.log('[system]', 'foo'); // 'foo' will be printed to System tab +console.log('[system] bar'); // this log will show in Log tab instead of System tab ``` -## Others +## Built-in Plugins ### Network diff --git a/doc/tutorial_CN.md b/doc/tutorial_CN.md index 97ec9147..e0530048 100644 --- a/doc/tutorial_CN.md +++ b/doc/tutorial_CN.md @@ -23,19 +23,42 @@ npm install vconsole ```html - + + ``` (2) 如果使用了 AMD/CMD 规范，可在 module 内使用 `require()` 引入模块： ```javascript -var vConsole = require('path/to/vconsole.min.js'); +var VConsole = require('path/to/vconsole.min.js'); +var vc = new VConsole(); ``` +请注意，`VConsole` 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 `new` 实例化之前，vConsole 不会被插入到网页中。 + ## 使用方法 +### 初始化 & 配置 + +引入后, 需要手动初始化 vConsole： + +```javascript +var vc = new VConsole(option); +``` + +`option` 是一个选填的 object 对象，具体配置定义请参阅 [公共属性及方法](./public_properties_methods_CN.md)。 + +使用 `setOption()` 来更新 `option`： + +```javascript +vc.setOption('maxLogNumber', 5000); +// 或者： +vc.setOption({maxLogNumber: 5000}); + ### 打印日志 @@ -88,24 +111,15 @@ console.log('UserID:', uid); // 打印出 UserID: 233 ### 特殊格式 -支持使用 `[default|system|...]` 的格式将 log 输出到指定 tab 面板： +支持使用 `[system]` 作为第一个参数，来将 log 输出到 System 面板： ```javascript -// [xxx] 须写在 log 的最开始 -console.log('[system]', 'foo'); -console.log('[system] bar'); -// System 面板将打印出两行，分别为 foo 和 bar -``` - -目前支持的 tab 面板有： - -``` -[default] Log 日志（默认） -[system] System 系统 +console.log('[system]', 'foo'); // 'foo' 会输出到 System 面板 +console.log('[system] bar'); // 这行日志会输出到 Log 面板而非 System 面板 ``` -## 其他 +## 内置插件 ### Network 网络