JavaScript 常用函数库详解

2014-11-12  来源:本站原创  分类:javascript技巧  人气:3 

在WEB开发中,javascript提供了许多函数供开发人员使用,这些函数在Ajax流行前足够了,但要构建一个交互性强些的应用恐怕就麻烦了。

为此,收集了自己平时常用到一些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 常用函数库详解 2014-11-12

    在WEB开发中,javascript提供了许多函数供开发人员使用,这些函数在Ajax流行前足够了,但要构建一个交互性强些的应用恐怕就麻烦了. 为此,收集了自己平时常用到一些JavaScript函数,它们在其它的JS库也常见,现在整理并附上注释,方便查阅,希望对大家有所帮助. 注:假设以下所有函数都放在一个CC对象中,方便引用. //这个方法相信是最常用的了, //它虽然没有选择器那么强大,但也有个小增强版,可查指定结点下ID所在的子元素 function $(id, p) { //id是否是字符

  • 基于prototype扩展的JavaScript常用函数库 2013-12-16

    基于prototype扩展的JavaScript常用函数库实现代码,学习js的朋友可以参考下. /** 2 * 检索数组元素(原型扩展或重载) 3 * @param {o} 被检索的元素值 4 * @type int 5 * @returns 元素索引 6 */ 7 Array.prototype.contains = function(o) { 8 var index = -1; 9 for(var i=0;i<this.length;i++){if(this[i]==o){index = i

  • PHP PDO函数库详解 2014-06-19

    PDO是一个"数据库访问抽象层",作用是统一各种数据库的访问接口,与mysql和mysqli的函数库相比,PDO让跨数据库的使用更具有亲和力:与ADODB和MDB2相比,PDO更高效. 目前而言,实现"数据库抽象层"任重而道远,使用PDO这样的"数据库访问抽象层"是一个不错的选择. PDO中包含三个预定义的类 PDO中包含三个预定义的类,它们分别是 PDO.PDOStatement 和 PDOException. 一.PDO PDO->be

  • javascript some()函数用法详解 2014-09-07

    文章主要详细介绍了some函数的用法,非常的实用,有需要的小伙伴们可以参考下. 参数说明 callback: 要对每个数组元素执行的回调函数. thisObject : 在执行回调函数时定义的this对象. 功能说明 对数组中的每个元素都执行一次指定的函数(callback),直到此函数返回 true,如果发现这个元素,some 将返回 true,如果回调函数对每个元素执行后都返回 false ,some 将返回 false.它只对数组中的非空元素执行指定的函数,没有赋值或者已经删除的元素将被忽

  • JavaScript中的函数模式详解 2014-02-24

    这篇文章主要介绍了JavaScript中的函数模式详解,本文讲解了创建函数的语法.函数表达式.命名函数表达式.函数的声明.函数声明与表达式.函数的提升.即时函数模式等内容,需要的朋友可以参考下 JavaScript设计模式的作用是提高代码的重用性,可读性,使代码更容易的维护和扩展 在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函数:此外,函数还可以提供作用域. 创建函数的语法 命名函数表达式 //命名函数表达式 var add = function add(a,b){

  • nodejs中的fiber(纤程)库详解 2014-07-07

    这篇文章主要介绍了nodejs中的fiber(纤程)库详解,本文讲解了node-fibers的安装.API介绍.方法使用示例等内容,需要的朋友可以参考下 fiber/纤程 在操作系统中,除了进程和线程外,还有一种较少应用的纤程(fiber,也叫协程).纤程常常拿来跟线程做对比,对于操作系统而言,它们都是较轻量级的运行态.通常认为纤程比线程更为轻量,开销更小.不同之处在于,纤程是由线程或纤程创建的,纤程调度完全由用户代码控制,对系统内核而言,是一种非抢占性的调度方式,纤程实现了合作式的多任务:而线

  • JavaScript数组和循环详解 2015-04-10

    这篇文章主要介绍了JavaScript数组和循环详解,本文讲解了循环遍历数组.按顺序存储和访问值.以相反的顺序存储和访问值.在数组中搜索等内容,需要的朋友可以参考下 数组是元素的一个有序组合.在JavaScript中,数组可以使用正式的对象表示法来创建,或者可以使用直接量表示法来初始化. var arrObject = new Array("val1", "val2"); // 作为对象的数组 var arrLiteral = ["val1",

  • javascript中Function类型详解 2014-02-08

    这篇文章主要介绍了javascript中Function类型详解的相关资料,需要的朋友可以参考下 Function 类型 function类型,毋庸置疑是js中相当重要的一个玩意. 1.这玩意首先是一个对象,也就是说它是一个引用类型.陈述:一听说是对象,是不是很有一种它的基类是object对象错觉感,No, 它和object是独立的2个东西.当你typeof function 时,返回的是 funciton 并非 object 2.每个函数都是 Function 对象的一个实例,它与其他引用对象

  • javascript中Object使用详解 2014-04-18

    这篇文章主要介绍了javascript中Object使用详解,非常全面详尽,有需要的小伙伴参考下 function forEach(o){ var html =""; for(var i in o){ html += i+"="+o[i]+" "; } console.log(html); console.log(o); } //1 //Object.create(proto) //Object.create(proto,descriptors)

  • 通用javascript脚本函数库 方便开发 2014-07-04

    javascript 在 WEB 编程中能起到很大的作用,将一些常用的功能写成javascript类库. 将下面代码保存为Common.js 类库功能: 1.Trim(str)--去除字符串两边的空格 2.XMLEncode(str)--对字符串进行XML编码 3.ShowLabel(str,str)--鼠标提示功能(显示字符,提示字符) 可以设置显示的提示的文字的字体.颜色.大小以及提示的背景颜色.边框等 4.IsEmpty(obj)--验证输入框是否为空 5.IsInt(objStr,sig

  • Lua中的常用函数库汇总 2015-02-01

    这篇文章主要介绍了Lua中的常用函数库汇总,本文罗列了lua库函数.数学函数.字符串库.表函数.Bit Functions,需要的朋友可以参考下 lua库函数 这些函数都是Lua编程语言的一部分, 点击这里了解更多. assert(value) - 检查一个值是否为非nil, 若不是则(如果在wow.exe打开调试命令)显示对话框以及输出错误调试信息 collectgarbage() - 垃圾收集器. (新增于1.10.1) date(format, time) - 返回当前用户机器上的时间.

  • ioctl 函数 参数 详解 2013-05-09

    ioctl 函数 参数 详解 2009-04-24 11:55 ioctl函数 本函数影响由fd参数引用的一个打开的文件. #include int ioctl( int fd, int request, .../* void *arg */ ); 返回0:成功 -1:出错 第三个参数总是一个指针,但指针的类型依赖于request参数. 我们可以把和网络相关的请求划分为6类: 套接口操作 文件操作 接口操作 ARP高速缓存操作 路由表操作 流系统 下表列出了网络相关ioctl请求的request

  • Python内置函数dir详解 2013-10-23

    这篇文章主要介绍了Python内置函数dir详解,本文讲解了命令介绍.使用实例.使用dir查找module下的所有类.如何找到当前模块下的类等内容,需要的朋友可以参考下 1.命令介绍 最近学习并使用了一个python的内置函数dir,首先help一下: >>> help(dir) Help on built-in function dir in module __builtin__: dir() dir([object]) -> list of strings Return an

  • PHP函数篇详解十进制.二进制.八进制和十六进制转换函数说明 2013-10-25

    中文字符编码研究系列第一期,PHP函数篇详解十进制.二进制.八进制和十六进制互相转换函数说明,主要掌握各进制转换的方法,以应用于实际开发 一,十进制(decimal system)转换函数说明 1,十进制转二进制 decbin() 函数,如下实例 echo decbin(12); //输出 1100 echo decbin(26); //输出 11010 decbin (PHP 3, PHP 4, PHP 5) decbin -- 十进制转换为二进制 说明 string decbin ( int

  • PHP Directory 函数的详解 2014-01-07

    PHP Directory 函数的详解 ,需要的朋友可以参考一下 预定义常量: DIRECTORY_SEPARATOR (string) :目录分隔符 PATH_SEPARATOR (string) :路径分隔符 bool chdir ( string $directory )- 改变目录 echo getcwd() . "\n"; chdir('public_html'); echo getcwd() . "\n"; bool chroot ( string $d

  • Lua中的一些常用函数库实例讲解 2014-03-10

    这篇文章主要介绍了Lua中的一些常用函数库实例讲解,本文讲解了数学库.table库.字符串库.I/O库等常用函数库,需要的朋友可以参考下 前言 这篇文章将会来一些比较轻松的内容,就是简单的介绍一下Lua中几个常用的库.简单的说就是几个API的介绍.所以说,看起来比较容易,也没有多大的分量.就是纯粹的总结.使用库就是为了方便我们的开发,提高开发效率,同时也能保证代码的质量.希望大家以后也不要重复造轮子了. 数学库 数学库(math)由一组标准的数学函数构成.这里主要介绍几个常用的函数,其它的大家可

  • javascript中HTMLDOM操作详解 2014-08-26

    这篇文章主要介绍了javascript中HTMLDOM操作详解,需要的朋友可以参考下 一.定义:htmlDOM是一种面向对象的树的模型,它包含html中的所有元素:通过html可以找到所有包含在dom中的元素. 二.作用: 1.查找html元素 1)通过id查找元素(document.getElementById();) <div id="d" ></div> var x=document.getElementById("d"); 2)通过标

  • javascript常用函数归纳整理 2015-01-02

    这篇文章主要介绍了javascript常用函数,归纳整理了一些常用的函数便于大家查询参考,需要的朋友可以参考下 本文整理归纳了一些js常用函数,其中包括对数据操作,字符替换操作,日期及加解密操作函数,还有一些简单的验证函数.便于大家查阅参考.相信对大家会有所帮助. 1.typeof.constructor.instanceof对数组的判断 var arr = [1,5,6,9,8,5,4]; //var arr = new Array(1,5,6,9,8,5,4); console.log(ty

  • JavaScript函数模式详解 2014-07-13

    文章对javascript的四种函数模式进行了详细的解释,并附上示例,方便小伙伴们理解并应用,希望对大家能有所帮助. 在javascript中,函数是一类对象,这表示他可以作为参数传递给其他函数:此外,函数还可以提供作用域. js函数基础部分:javascript学习笔记(四)function函数部分 创建函数的语法 命名函数表达式 //命名函数表达式 var add = function add(a,b){ return a+b; }; 函数表达式 复制代码 代码如下: //又名匿名函数 va

  • JavaScript代码复用模式详解 2014-07-11

    文章介绍了代码复用的概念及其原则,已经代码复用的集中类型,非常的详尽,语言简单易懂,有需要的朋友可以参考下 代码复用及其原则 代码复用,顾名思义就是对曾经编写过的代码的一部分甚至全部重新加以利用,从而构建新的程序.在谈及代码复用的时候,我们首先可以想到的是继承性.代码复用的原则是: 优先使用对象组合,而不是类继承 在js中,由于没有类的概念,因此实例的概念也就没多大意义,js中的对象是简单的键-值对,可以动态的创建和修改它们. 但在js中,我们可以使用构造函数和new操作符来实例化一个对象,这与