update 3.0.0 docs

louis100 · Sep 21, 2017 · bfa75bc · bfa75bc
1 parent 7da71f5
commit bfa75bc
Show file tree

Hide file tree

Showing 8 changed files with 191 additions and 36 deletions.
diff --git 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)
diff --git 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)
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -23,19 +23,46 @@ Then save `dist/vconsole.min.js` to your project.
 
 ```html
 <head>
-	<script src="path/to/vconsole.min.js"></script>
+  <script src="path/to/vconsole.min.js"></script>
+  <script>
+    var vc = new VConsole();
+  </script>
 </head>
 ```
 
 (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
@@ -23,19 +23,42 @@ npm install vconsole
 
 ```html
 <head>
-	<script src="path/to/vconsole.min.js"></script>
+  <script src="path/to/vconsole.min.js"></script>
+  <script>
+    var vc = new VConsole();
+  </script>
 </head>
 ```
 
 (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 网络