学步园

在WEB开发中，javascript提供了许多函数供开发人员使用，这些函数在Ajax流行前足够了，但要构建一个交互性强些的应用恐怕就麻烦
了，为此，收集了自己平时常用到一些JavaScript函数，它们在其它的JS库也常见，现在整理并附上注释，方便查阅，希望对大家有所帮助。

注:假设以下所有函数都放在一个CC对象中，方便引用。

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

each: function(object, callback, args) {</p> <p> if (!object) {<br /> return object;<br /> }</p> <p> if (args) {<br /> if (object.length === undefined) {<br /> for (var name in object)<br /> if (callback.apply(object[name], args) === false) break;<br /> } else for (var i = 0, length = object.length; i < length; i++)<br /> if (callback.apply(object[i], args) === false) break;<br /> } else {<br /> if (object.length == undefined) {<br /> for (var name in object)<br /> if (callback.call(object[name], name, object[name]) === false) break;<br /> } else for (var i = 0, length = object.length, value = object[0];<br /> i < length && callback.call(value, i, value) !== false;<br /> value = object[++i]) {}<br /> }</p> <p> return object;<br /> }

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

// 返回表单可提交元素的提交字符串.<br /> // 例如<br /> // <form><br /> // <input type="text" name="user" value="rock" /><br /> // <input type="text" name="password" value="123" /><br /> // </form><br /> // 调用后就返回 user=rock&password=123<br /> // 这些数据已经过encodeURIComponent处理,对非英文字符友好.<br /> // form元素中如果没有name,则以id作为提供字符名.<br /> function formQuery(f){<br /> // f,一个Form表单.<br /> var formData = "", elem = "", f = CC.$(f);<br /> var elements = f.elements;<br /> var length = elements.length;<br /> for (var s = 0; s < length; ++s) {<br /> elem = elements[s];<br /> if (elem.tagName == 'INPUT') {<br /> if ( (elem.type == 'radio' || elem.type == 'checkbox') && !elem.checked) {<br /> continue;<br /> }<br /> }<br /> if (formData != "") {<br /> formData += "&";<br /> }<br /> formData += encodeURIComponent(elem.name||elem.id) + "="<br /> + encodeURIComponent(elem.value);<br /> }<br /> return formData;<br /> }

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

Array.prototype.indexOf = (function(obj) {<br /> for (var i = 0, length = this.length; i < length; i++) {<br /> if (this[i] == obj) return i;<br /> }<br /> return - 1;<br /> });

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

/**<br /> * 应用对象替换模板内容<br /> * templ({name:'Rock'},'<html><title>{name}</title></html>');<br /> * st:0,1:未找到属性是是否保留<br /> */<br /> templ: function(obj, str, st) {<br /> return str.replace(/\{([\w_$]+)\}/g, function(c, $1) {<br /> var a = obj[$1];<br /> if (a === undefined || a === null) {<br /> if (st === undefined) return '';<br /> switch (st) {<br /> case 0:<br /> return '';<br /> case 1:<br /> return $1;<br /> default:<br /> return c;<br /> }<br /> }<br /> return a;<br /> });<br /> }