辅助函数

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: 字符串，数据的键值。

返回：

• 无

例子：

vConsole.tool.setStorage('count', 1);

vConsole.tool.getStorage(key)

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

参数：

• (required) key: A string, the name of data.

返回：

• String

例子：

var num = vConsole.tool.setStorage('count'); // => 1

vConsole.$

vConsole.$.one(selectors, baseElement)

获取在 document 或 baseElement 中匹配 selectors 的首个 element 元素。

参数：

• (required) selectors: CSS 选择器字符串，多个选择器以空格隔开。
• (optional) baseElement: Element 对象，默认为 document.

返回：

• Element object

例子：

var $page = vConsole.$.one('#my_page');
var $item = vConsole.$.one('.item', $page);

vConsole.$.all(selectors, baseElement)

获取在 document 或 baseElement 中匹配 selectors 的所有 element 元素。

参数：

• (required) selectors: CSS 选择器字符串，多个选择器以空格隔开。
• (optional) baseElement: Element 对象，默认为 document.

返回：

• Element object

例子：

var $page = vConsole.$.one('#my_page');
var $items = vConsole.$.all('.item', $page);

vConsole.$.addClass(elements, className)

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

参数：

• (required) elements: 单个或一个数组的 element 对象。
• (required) className: 字符串，多个样式名以空格隔开。

返回：

• 无

例子：

var $items = vConsole.$.all('.item');
vConsole.$.addClass($items, 'selected');

vConsole.$.removeClass(elements, className)

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

参数：

• (required) elements: 单个或一个数组的 element 对象。
• (required) className: 字符串，多个样式名以空格隔开。

返回：

• 无

例子：

var $items = vConsole.$.all('.item');
vConsole.$.removeClass($items, 'selected');

vConsole.$.hasClass(element, className)

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

参数：

• (required) element: Element 对象。
• (required) className: 字符串。

返回：

• Boolean

例子：

var $page = vConsole.$.one('#my_page');
if (vConsole.$.hasClass($page, 'actived')) {
    // do something
}

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

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

参数：

• (required) elements: 单个或一个数组的 element 对象。
• (required) eventType: 字符串，事件类型。
• (required) fn: 事件回调函数。
• (optional) useCapture: 布尔值，用于设定是使用 capturing 还是 bubbling。默认为 false.

返回：

• 无

例子：

var $btn = vConsole.$.one('#submit');
vConsole.$.bind($btn, 'click', function(event) {
    event.preventDefault();
    alert('submit!');
});

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

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

参数：

• (required) element: Element 对象。
• (required) eventType: 字符串，事件类型。
• (required) selectors: CSS 选择器字符串，多个选择器以空格隔开。
• (required) fn: 事件回调函数。

返回：

• 无

例子：

var $page = vConsole.$.one('#my_page');
vConsole.$.delegate($page, 'click', '.item', function(event) {
    vConsole.$.addClass(this, 'selected'); // this => '.item'
});

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:

{{if}}
    ...
{{else}}
    ...
{{/if}}

For:

{{for (var i=0; i<10; i++)}}
    ...
    {{continue}}
    {{break}}
{{/for}}

Switch:

{{switch (flag)}}
    {{case 1}}
        ...
        {{break}}
    {{default}}
        ...
{{/switch}}

Print:

{{flag}}

例子：

var tpl = '<ul>' +
    '{{for (var i = 0; i < list.length; i++)}}' +
        '<li>' + '{{list[i]}}' + '</li>' +
    '{{/for}}' +
'</ul>';
var data = {
    list: ['Red', 'Blue', 'Yellow']    
};
var html = vConsole.$.render(tpl, data, true);
document.body.innerHTML += html;

输出：

<ul>
<li>Red</li>
<li>Blue</li>
<li>Yellow</li>
</ul>

返回索引