JavaScript 常用函数库详解


Posted in Javascript onOctober 21, 2009

为此,收集了自己平时常用到一些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 < 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; 
}

//数组 
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 ); 
}

// 返回表单可提交元素的提交字符串. 
// 例如 
// <form> 
// <input type="text" name="user" value="rock" /> 
// <input type="text" name="password" value="123" /> 
// </form> 
// 调用后就返回 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 < 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; 
}

/** 
* 移除数组指定元素. 
* 参数既可传递一个整形下标,也可传递一个数组数据. 
*/ 
Array.prototype.remove = (function(p) { 
//参数为下标 
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; 
} 
//参数为数组数据,最终要找到下标来操作 
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; 
});

/** 
* 万能而简单的表单验证函数,这个函数利用了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'},'<html><title>{name}</title></html>'); 
* 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; 
}); 
}
Javascript 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
jQuery的一些特性和用法整理小结
Jan 13 Javascript
javascript onmouseout 解决办法
Jul 17 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
下拉框select的绑定示例
Sep 04 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
js实现自定义路由
Feb 04 Javascript
BootStrap table删除指定行的注意事项(笔记整理)
Feb 05 Javascript
vue中如何使用ztree
Feb 06 Javascript
webpack实践之DLLPlugin 和 DLLReferencePlugin的使用教程
Jun 10 Javascript
再谈ie和firefox下的document.all属性
Oct 21 #Javascript
javascript void(0)的妙用
Oct 21 #Javascript
extjs 学习笔记 四 带分页的grid
Oct 20 #Javascript
Jquery Ajax.ashx 高效分页实现代码
Oct 20 #Javascript
fireworks菜单生成器mm_menu.js在 IE 7.0 显示问题的解决方法
Oct 20 #Javascript
Javascript remove 自定义数组删除方法
Oct 20 #Javascript
JavaScript 事件记录使用说明
Oct 20 #Javascript
You might like
极典R601SW收音机
2021/03/02 无线电
新版PHP极大的增强功能和性能
2006/10/09 PHP
转PHP手册及PHP编程标准
2006/12/17 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
PHP 计算两个特别大的整数实例代码
2018/05/07 PHP
PHP读取XML文件的方法实例总结【DOMDocument及simplexml方法】
2019/09/10 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
jQuery实现可以控制图片旋转角度效果(附demo源码下载)
2016/01/27 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
2017/04/27 Javascript
详解vue2父组件传递props异步数据到子组件的问题
2017/06/29 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
vue配置请求本地json数据的方法
2018/04/11 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
Node.js动手撸一个静态资源服务器的方法
2019/03/09 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
用Node写一条配置环境的指令
2019/11/14 Javascript
三剑客:offset、client和scroll还傻傻分不清?
2020/12/04 Javascript
python生成词云的实现方法(推荐)
2017/06/13 Python
Python简单计算文件MD5值的方法示例
2018/04/11 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
2020/04/21 Python
导致python中import错误的原因是什么
2020/07/01 Python
torchxrayvision包安装过程(附pytorch1.6cpu版安装)
2020/08/26 Python
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
工程概预算专业毕业生求职信
2013/10/04 职场文书
工作失职检讨书500字
2014/10/17 职场文书
2014年四风个人对照检查及整改措施
2014/10/28 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书