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.
//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;
}
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;
}
//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 );
}
// 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;
}
/**
* 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;
});
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];
default:
return c;
}
}
return a;
});
}