Skip to content

Latest commit

 

History

History
304 lines (205 loc) · 6.07 KB

helper_functions.md

File metadata and controls

304 lines (205 loc) · 6.07 KB
Raw

Helper Functions

vConsole provides some useful helper functions for efficient plugin development.

Helper functions are mounted in different vConsole properties according to their usage:

  • vConsole.tool: Helper functions.
  • vConsole.$: DOM-related functions.

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)

Check whether a value is a certain type.

Return:
  • Boolean

vConsole.tool.htmlEncode(text)

Encode a text into a HTML non-sensitive string.

Parameters:
  • (required) text: A string to be encoded.
Return:
  • String

vConsole.tool.setStorage(key, value)

Set data to localStorage. A prefix vConsole_ will be added to key automatically.

Note that some devices may not have localStorage and then value would not be saved under this situation, so DO NOT use this method to save permanent data.

Parameters:
  • (required) key: A string, the name of data.
  • (required) value: A string, the value of data.
Return:
  • None
Example:
vConsole.tool.setStorage('count', 1);

vConsole.tool.getStorage(key)

Get data from localStorage. A prefix vConsole_ will be added to key automatically.

Parameters:
  • (required) key: A string, the name of data.
Return:
  • String, the value of data.
Example:
var num = vConsole.tool.setStorage('count'); // => 1

vConsole.$

vConsole.$.one(selectors, baseElement)

Returns the first element within the document or baseElement that matches the specified group of selectors.

Parameters:
  • (required) selectors: A string containing one or more CSS selectors separated by commas.
  • (optional) baseElement: An element object, default to be document.
Return:
  • Element object
Example:
var $page = vConsole.$.one('#my_page');
var $item = vConsole.$.one('.item', $page);

vConsole.$.all(selectors, baseElement)

Returns a list of elements within the document or baseElement that matches the specified group of selectors.

Parameters:
  • (required) selectors: A string containing one or more CSS selectors separated by commas.
  • (optional) baseElement: An element object, default to be document.
Return:
  • Element object
Example:
var $page = vConsole.$.one('#my_page');
var $items = vConsole.$.all('.item', $page);

vConsole.$.addClass(elements, className)

Add the specified class(es) to element(s).

Parameters:
  • (required) elements: A single or a list of element object(s).
  • (required) className: A string of one or more space-separated classes.
Return:
  • None
Example:
var $items = vConsole.$.all('.item');
vConsole.$.addClass($items, 'selected');

vConsole.$.removeClass(elements, className)

Remove the specified class(es) of element(s).

Parameters:
  • (required) elements: A single or a list of element object(s).
  • (required) className: A string of one or more space-separated classes.
Return:
  • None
Example:
var $items = vConsole.$.all('.item');
vConsole.$.removeClass($items, 'selected');

vConsole.$.hasClass(element, className)

Check whether an element is assigned the given class.

Parameters:
  • (required) element: An element object.
  • (required) className: A string.
Return:
  • Boolean
Example:
var $page = vConsole.$.one('#my_page');
if (vConsole.$.hasClass($page, 'actived')) {
	// do something
}

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

Bind an event to element(s).

Parameters:
  • (required) elements: A single or a list of element object(s).
  • (required) eventType: A string of event's type.
  • (required) fn: A function to execute when the event is triggered.
  • (optional) useCapture: A boolean that indicates the event uses capturing or bubbling, default to be false.
Return:
  • None
Example:
var $btn = vConsole.$.one('#submit');
vConsole.$.bind($btn, 'click', function(event) {
	event.preventDefault();
	alert('submit!');
});

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

Bind an event to an element, and only this element's descendants which match the selectors can trigger the event.

Parameters:
  • (required) element: An element object.
  • (required) eventType: A string of event's type.
  • (required) selectors: A string containing one or more CSS selectors separated by commas.
  • (required) fn: A function to execute when the event is triggered.
Return:
  • None
Example:
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.

Parameters:
  • (required) tpl: A template string.
  • (required) data: A key-value data which is used to render the template.
  • (optional) toString: A boolean that indicates whether returns an element object or a HTML string, default to be false.
Return:
  • Element object or HTML string
Syntax:

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}}
Example:
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;

Output:

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

Back to Index