Heim  >  Artikel  >  Web-Frontend  >  JavaScript 常用函数库详解_javascript技巧

JavaScript 常用函数库详解_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:43:591031Durchsuche

为此,收集了自己平时常用到一些JavaScript函数,它们在其它的JS库也常见,现在整理并附上注释,方便查阅,希望对大家有所帮助。
注:假设以下所有函数都放在一个CC对象中,方便引用。

复制代码 代码如下:

//这个方法相信是最常用的了,
//它虽然没有选择器那么强大,但也有个小增强版,可查指定结点下ID所在的子元素
function $(id, p) {
//id是否是字符串,还是一个HTML结点
var iss = id instanceof String || typeof id == "string";
if (iss && !p)
return document.getElementById(id);
//如果是结点的话就直接返回该结点
if(!iss)
return id;
//如果id与p是同一个元素,直接返回
if(p.id == id)
return p;
//往父结点搜索
var child = p.firstChild;
while (child) {
if (child.id == id)
return child;
//递归搜索
var v = this.$(id, child);
if (v)
return v;
child = child.nextSibling;
}
//的确找不到就返回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 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 value = object[++i]) {}
}
return object;
}

复制代码 代码如下:

//数组
function isArray(obj) {
return (typeof obj === "array" || obj instanceof Array);
},
//字符串
function isString(obj) {
return (typeof obj === "string" || obj instanceof String);
},
//函数
function isFunction(obj) {
return (typeof obj === "function" || obj instanceof Function);
},
//数字类型
function isNumber(ob) {
return (typeof ob === "number" || ob instanceof Number );
}

复制代码 代码如下:

// 返回表单可提交元素的提交字符串.
// 例如
//

//
//
//

// 调用后就返回 user=rock&password=123
// 这些数据已经过encodeURIComponent处理,对非英文字符友好.
// form元素中如果没有name,则以id作为提供字符名.
function formQuery(f){
// f,一个Form表单.
var formData = "", elem = "", f = CC.$(f);
var elements = f.elements;
var length = elements.length;
for (var s = 0; 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;
}

复制代码 代码如下:

/**
* 移除数组指定元素.
* 参数既可传递一个整形下标,也可传递一个数组数据.
*/
Array.prototype.remove = (function(p) {
//参数为下标
if (CC.isNumber(p)) {
if (p = this.length) {
throw "Index Of Bounds:" + this.length + "," + p;
}
this.splice(p, 1)[0];
return this.length;
}
//参数为数组数据,最终要找到下标来操作
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 if (this[i] == obj) return i;
}
return - 1;
});

复制代码 代码如下:

/**
* 万能而简单的表单验证函数,这个函数利用了JS动态语言特性,看上去很神秘,
* 实际是很形象的,查看个例子就清楚了.
*/
validate: function() {
var args = CC.$A(arguments),
form = null;
//form如果不为空元素,应置于第一个参数中.
if (!CC.isArray(args[0])) {
form = CC.$(args[0]);
args.remove(0);
}
//如果存在设置项,应置于最后一个参数中.
//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) {
//如果在fomr中不存在该name元素,就当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];
//选项
if (!d || typeof d != 'object') d = b;
//是否忽略空
if (!d.ignoreNull && (value == '' || value == null)) {
//如果不存在回调函数,就调用alert来显示错误信息
if (!d.callback) CC.alert(msg, obj, form);
//如果存在回调,注意传递的三个参数
//msg:消息,obj:该结点,form:对应的表单,如果存在的话
else d.callback(msg, obj, form);
//出错后是否聚集
if (!d.nofocus) obj.focus();
result = false;
return false;
}
//自定义验证方法
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);
//同上
else d.callback(msg, obj, form);
if (!d.nofocus) obj.focus();
result = false;
return false;
}
}
//如果不设置queryString并通过验证,不存在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;
}
});
//如果设置的queryString:true并通过验证,就返回form的提交字符串.
if (result !== false && form && queryStr) result = CC.formQuery(form);
return result;
}

复制代码 代码如下:

/**
* 应用对象替换模板内容
* templ({name:'Rock'},'{name}');
* st:0,1:未找到属性是是否保留
*/
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;
});
}
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn