In WEB development, javascript provides many functions for developers. These functions are sufficient before Ajax is popular, but it may be difficult to build an interactive application. To this end, I have collected some JavaScript Functions that I usually use. They are also common in other JS libraries. Now I want to sort them out and add comments for your convenience. I hope they will help you.
Note: assume that all of the following functions are stored in a CC object for reference.
The Code is as follows:
// This method is believed to be the most commonly used,
// Although it is not as powerful as the selector, it also has a small enhanced version, which can be used to query the child element of the ID under the specified Node
Function $ (id, p ){
// Whether the id is a 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, the node is directly returned.
If (! Iss)
Return id;
// If id and p are the same element, return directly
If (p. id = id)
Return p;
// Search for 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 no result is found, null is returned.
Return null;
}
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;
}
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 );
},
// Numeric type
Function isNumber (ob ){
Return (typeof ob = "number" | ob instanceof Number );
}
The Code is as follows:
// Return the submission string of the elements that can be submitted in the form.
// Example
//
// The user = rock & password = 123 is returned after the call.
// The data has been processed by encodeURIComponent and is friendly to non-English characters.
// If no name exists in the form element, id is used as the provided character name.
Function formQuery (f ){
// F, a 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;
}
The Code is as follows:
/**
* Removes the specified element from the array.
* The parameter can either pass 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 an array of data, and the subscript must be found for operation.
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;
});
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;
});
The Code is as follows:
/**
* The omnipotent and simple form verification function, which utilizes the dynamic JavaScript language features and looks mysterious,
* The actual image is very good. You can see the example clearly.
*/
Validate: function (){
Var args = CC. $ A (arguments ),
Form = null;
// If the form element is not empty, it should be placed in the first parameter.
If (! CC. isArray (args [0]) {
Form = CC. $ (args [0]);
Args. remove (0 );
}
// If any configuration item exists, 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 this name element does not exist in fomr, it is obtained by id.
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 the callback function does not exist, call alert to display the error message.
If (! D. callback) CC. alert (msg, obj, form );
// If callback exists, pay attention to the three parameters passed
// Msg: Message, obj: node, form: corresponding form, if any
Else d. callback (msg, obj, form );
// Whether or not to aggregate after an error occurs
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 verified, an object is returned if no form exists,
// This object contains data in the shape of {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 verification is passed, the submission string of form is returned.
If (result! = False & form & queryStr) result = CC. formQuery (form );
Return result;
}
The Code is as follows:
/**
* Application Object replacement template content
* Templ ({name: 'Rock '},'{Name}');
* St: whether the property is retained
*/
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;
});
}