Home >Web Front-end >JS Tutorial >Detailed explanation of common JavaScript function libraries_javascript skills

Detailed explanation of common JavaScript function libraries_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:43:591051browse

To this end, I have collected some JavaScript functions that I commonly use in my daily life. They are also common in other JS libraries. Now I have compiled them and attached comments for easy reference. I hope it will be helpful to everyone.
Note: It is assumed that all the following functions are placed in a CC object for easy reference.

Copy code The code is as follows:

//This method is believed to be the most commonly used,
//Although it is not as powerful as the selector, there is also a small enhanced version that can check the sub-element with the ID under the specified node
function $(id, p) {
//Whether the id is a character String, or an HTML node
var iss = id instanceof String || typeof id == "string";
if (iss && !p)
return document.getElementById(id);
//If it is a node, return the node directly
if(!iss)
return id;
//If id and p are the same element, directly return
if(p. id == id)
return p;
//Search to the parent node
var child = p.firstChild;
while (child) {
if (child.id == id )
return child;
//Recursive search
var v = this.$(id, child);
if (v)
return v;
child = child.nextSibling ;
}
//If it cannot be found, return null
return null;
}

Copy code The code is as follows:

each: function(object, callback, args) {
if (!object) {
return object;
}
if (args) {
if (object.length === undefined) {
for (var name in object)
if (callback.apply(object[name], args) = == false) break;
} else for (var i = 0, length = object.length; i < length; i )
if (callback.apply(object[i], args) === false) break;
} else {
if (object.length == undefined) {
for (var name in object)
if (callback.call(object[name], name, object [name]) === false) break;
} else for (var i = 0, length = object.length, value = object[0];
i < length && callback.call(value, i, value) !== false;
value = object[ i]) {}
}
return object;
}

Copy code The code is as follows:

//Array
function isArray(obj) {
return (typeof obj == = "array" || obj instanceof Array);
},
//String
function isString(obj) {
return (typeof obj === "string" || obj instanceof String );
},
//Function
function isFunction(obj) {
return (typeof obj === "function" || obj instanceof Function);
},
//Number type
function isNumber(ob) {
return (typeof ob === "number" || ob instanceof Number );
}

Copy code The code is as follows:

// Returns the submission string of the submittable element of the form.
// For example
//

//
//
//

// After the call, user=rock&password=123 is returned
// These data have been processed by encodeURIComponent, and non-English characters Friendly.
// If there is no name in the form element, id will be used as the provided character name.
function formQuery(f){
// f, a Form form.
var formData = "" , elem = "", f = CC.$(f);
var elements = f.elements;
var length = elements.length;
for (var s = 0; s < length; s) {
elem = elements[s];
if (elem.tagName == 'INPUT') {
if ( (elem.type == 'radio' || elem.type == ' checkbox') && !elem.checked) {
continue;
}
}
if (formData != "") {
formData = "&";
}
formData = encodeURIComponent(elem.name||elem.id) "="
encodeURIComponent(elem.value);
}
return formData;
}

Copy code The code is as follows:

/**
* Remove the specified element from the array.
* The parameter can pass either an integer subscript or an array data.
*/
Array.prototype.remove = (function(p) {
//The parameter is a subscript
if (CC.isNumber(p)) {
if (p < 0 || p >= this.length) {
throw "Index Of Bounds:" this.length "," p;
}
this.splice( p, 1)[0];
return this.length;
}
//The parameter is array data, and ultimately you need to find the subscript to operate
if (this.length > 0 && this [this.length - 1] == p) {
this.pop();
} else {
var pos = this.indexOf(p);
if (pos != -1 ) {
this.splice(pos, 1)[0];
}
}
return this.length;
});

Copy code The code is as follows:

Array.prototype.indexOf = (function(obj) {
for ( var i = 0, length = this.length; i < length; i ) {
if (this[i] == obj) return i;
}
return - 1;
} ; 🎝>*/
validate: function() {
var args = CC.$A(arguments),
form = null;
//If form is not an empty element, it should be placed in the first element In one parameter. if (!CC.isArray(args[0])) { form = CC.$(args[0]); args.remove(0); } //If there is a setting item, it should be placed in the last parameter. //cfg.queryString = true|false;
//cfg.callback = function
//cfg.ignoreNull
//nofocus:true|false
var b = CC.isArray(b) ? {}: args.pop(),
d;
var queryStr = b.queryString,
ignoreNull = b.ignoreNull,
cb = b.callback;
var result = queryStr ? '': {};
CC.each(args,
function(i, v) {
//If the name element does not exist in fomr, use it as the id to obtain
var obj = v[0].tagName ? v[0] : form ? form[v[0]] : CC.$( v[0]);
//console.debug('checking field:',v, 'current value:' obj.value);
var value = obj.value,
msg = v[ 1],
d = CC.isFunction(v[2]) ? v[3] : v[2];
//Option
if (!d || typeof d != 'object' ) d = b;
//Whether to ignore null
if (!d.ignoreNull && (value == '' || value == null)) {
//If there is no callback function, then Call alert to display error information
if (!d.callback) CC.alert(msg, obj, form);
//If there is a callback, pay attention to the three parameters passed
//msg: message ,obj: the node, form: the corresponding form, if it exists
else d.callback(msg, obj, form);
//Whether to gather after an error
if (!d.nofocus) obj.focus();
result = false;
return false;
}
//Custom verification method
if (CC.isFunction(v[2])) {
var ret = v[2](value, obj, form);
var pass = (ret !== false);
if (CC.isString(ret)) {
msg = ret;
pass = false;
}
if (!pass) {
if (!d.callback) CC.alert(msg, obj, form);
//Same as above
else d.callback(msg, obj, form);
if (!d.nofocus) obj.focus();
result = false;
return false;
}
}
//If queryString is not set and verification is passed, and the form does not exist, an object will be returned.
//This object contains data in the form {elementName|elementId:value}.
if (queryStr && !form ) {
result = (result == '') ?
((typeof obj.name == 'undefined' || obj.name == '') ? obj.id: obj.name)
'=' value: '&' v[0] '=' value;
} else if (!form) {
result[v[0]] = value;
}
} );
//If queryString:true is set and the verification is passed, the form submission string will be returned.
if (result !== false && form && queryStr) result = CC.formQuery(form);
return result;
}






Copy code


The code is as follows:


/**
* A versatile and simple form validation function. This function takes advantage of the dynamic language features of JS. It looks very mysterious.
* It is actually very vivid. You will understand it by looking at an example.
*/
templ: function(obj, str, st) {
return str.replace(/{([w_$] )}/g, function(c, $1 ) {
var a = obj[$1];
if (a === undefined || a === null) { if (st === undefined) return ''; switch (st) { case 0: return ''; case 1: return $1;
default:
return c;
}
}
return a;
});
}

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn