辅助函数

vConsole 提供一些辅助函数以便开发插件。

辅助函数会按照类型,挂载到 vConsole 的不同属性中:

  • vConsole.tool:辅助函数。
  • vConsole.$:DOM 操作相关函数。

vConsole.tool

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)

判断变量是否为指定的类型。

返回:
  • Boolean

vConsole.tool.htmlEncode(text)

将文本转为 HTML 安全的字符串。

参数:
  • (required) text: 字符串。
返回:
  • String

vConsole.tool.setStorage(key, value)

将数据写入 localStorage。前缀 vConsole_ 会自动加到 key 之前。

在一些设备中,localStorage 可能不存在,因此 value 将无法正常存储。所以不要使用此方法来保存持久性数据。

参数:
  • (required) key: 字符串,数据的键名。
  • (required) value: 字符串,数据的键值。
返回:
例子:
  1. vConsole.tool.setStorage('count', 1);

vConsole.tool.getStorage(key)

获取 localStorage 的数据。前缀 vConsole_ 会自动加到 key 之前。

参数:
  • (required) key: A string, the name of data.
返回:
  • String
例子:
  1. var num = vConsole.tool.setStorage('count'); // => 1

vConsole.$

vConsole.$.one(selectors, baseElement)

获取在 documentbaseElement 中匹配 selectors 的首个 element 元素。

参数:
  • (required) selectors: CSS 选择器字符串,多个选择器以空格隔开。
  • (optional) baseElement: Element 对象,默认为 document.
返回:
  • Element object
例子:
  1. var $page = vConsole.$.one('#my_page');
  2. var $item = vConsole.$.one('.item', $page);

vConsole.$.all(selectors, baseElement)

获取在 documentbaseElement 中匹配 selectors 的所有 element 元素。

参数:
  • (required) selectors: CSS 选择器字符串,多个选择器以空格隔开。
  • (optional) baseElement: Element 对象,默认为 document.
返回:
  • Element object
例子:
  1. var $page = vConsole.$.one('#my_page');
  2. var $items = vConsole.$.all('.item', $page);

vConsole.$.addClass(elements, className)

为一个或一组 element 添加 class 样式名。

参数:
  • (required) elements: 单个或一个数组的 element 对象。
  • (required) className: 字符串,多个样式名以空格隔开。
返回:
例子:
  1. var $items = vConsole.$.all('.item');
  2. vConsole.$.addClass($items, 'selected');

vConsole.$.removeClass(elements, className)

为一个或一组 element 删除 class 样式名。

参数:
  • (required) elements: 单个或一个数组的 element 对象。
  • (required) className: 字符串,多个样式名以空格隔开。
返回:
例子:
  1. var $items = vConsole.$.all('.item');
  2. vConsole.$.removeClass($items, 'selected');

vConsole.$.hasClass(element, className)

判断一个 element 对象是否有指定的样式名。

参数:
  • (required) element: Element 对象。
  • (required) className: 字符串。
返回:
  • Boolean
例子:
  1. var $page = vConsole.$.one('#my_page');
  2. if (vConsole.$.hasClass($page, 'actived')) {
  3. // do something
  4. }

vConsole.$.bind(elements, eventType, fn, useCapture)

绑定一个事件到一个或一组 element。

参数:
  • (required) elements: 单个或一个数组的 element 对象。
  • (required) eventType: 字符串,事件类型。
  • (required) fn: 事件回调函数。
  • (optional) useCapture: 布尔值,用于设定是使用 capturing 还是 bubbling。默认为 false.
返回:
例子:
  1. var $btn = vConsole.$.one('#submit');
  2. vConsole.$.bind($btn, 'click', function(event) {
  3. event.preventDefault();
  4. alert('submit!');
  5. });

vConsole.$.delegate(element, eventType, selectors, fn)

绑定一个事件到一个 element 中,只有匹配 selecors 的子元素才会触发事件。

参数:
  • (required) element: Element 对象。
  • (required) eventType: 字符串,事件类型。
  • (required) selectors: CSS 选择器字符串,多个选择器以空格隔开。
  • (required) fn: 事件回调函数。
返回:
例子:
  1. var $page = vConsole.$.one('#my_page');
  2. vConsole.$.delegate($page, 'click', '.item', function(event) {
  3. vConsole.$.addClass(this, 'selected'); // this => '.item'
  4. });

vConsole.$.render(tpl, data, toString)

Compile a template into an element object or a HTML string with given data.
使用指定数据将模板文本编译成 element 对象或者 HTML 字符串。

参数:
  • (required) tpl: 模板字符串。
  • (required) data: 一组 key-value 形式的数据源。
  • (optional) toString: 布尔值,用于设定返回值为 element 对象还是 HTML 字符串,默认为 false
返回:
  • Element 对象或者 HTML 字符串
模板语法:

If:

  1. {{if}}
  2. ...
  3. {{else}}
  4. ...
  5. {{/if}}

For:

  1. {{for (var i=0; i<10; i++)}}
  2. ...
  3. {{continue}}
  4. {{break}}
  5. {{/for}}

Switch:

  1. {{switch (flag)}}
  2. {{case 1}}
  3. ...
  4. {{break}}
  5. {{default}}
  6. ...
  7. {{/switch}}

Print:

  1. {{flag}}
例子:
  1. var tpl = '<ul>' +
  2. '{{for (var i = 0; i < list.length; i++)}}' +
  3. '<li>' + '{{list[i]}}' + '</li>' +
  4. '{{/for}}' +
  5. '</ul>';
  6. var data = {
  7. list: ['Red', 'Blue', 'Yellow']
  8. };
  9. var html = vConsole.$.render(tpl, data, true);
  10. document.body.innerHTML += html;

输出:

  1. <ul>
  2. <li>Red</li>
  3. <li>Blue</li>
  4. <li>Yellow</li>
  5. </ul>

返回索引