javascript常用的自定义函数总结

今天总结一下javascript常用的自定义函数总结，部分函数来源于网络，没有应用于项目，有不对的地方大家留言交流！

一、javascript版本的in_array函数

下面方法运用到了项目之中，的确好用！

function in_array(stringToSearch, arrayToSearch) {
for (s = 0; s < arrayToSearch.length; s++) {
thisEntry = arrayToSearch[s].toString();
if (thisEntry == stringToSearch) {
return true;
}
}
return false;
}

另外的2中方式来源于网络，大家可以参考：

Array.prototype.inArray = function (value) {for (var i=0,l = this.length ; i <l ; i++) {if (this[i] === value) {return true;}}return false;
};

另一个版本：

var inArray = function (arr,value) {for (var i=0,l = arr.length ; i <l ; i++) {if (arr[i] === value) {return true;}}return false;
};

二、$() 方法

实至名归，最值钱的函数，可以节省多少流量啊。最先由Prototype.js实现的，那是洪荒时代遗留下来的珍兽，现在有许多变种。

function $() {var elements = [];for (var i = 0; i < arguments.length; i++) {var element = arguments[i];if (typeof element == 'string')element = document.getElementById(element);if (arguments.length == 1)return element;elements.push(element);}return elements;
}

三、addEvent

网上最流行的版本是Scott Andrew的，据说javascript界曾举行一场比赛（此事件我们可以在Pro Javascript Techniques第100页看到）或浏览PPK的网站，征求添加事件与移除事件的函数，他就是其获奖者。下面就是他的实现：

function addEvent(elm, evType, fn, useCapture) {if (elm.addEventListener) {elm.addEventListener(evType, fn, useCapture);//DOM2.0return true;}else if (elm.attachEvent) {var r = elm.attachEvent('on' + evType, fn);//IE5+return r;}else {elm['on' + evType] = fn;//DOM 0}
}

下面是Dean Edwards 的版本

// addEvent/removeEvent written by Dean Edwards, 2005
// with input from Tino Zijdel
// http://dean.edwards.name/weblog/2005/10/add-event/
function addEvent(element, type, handler) {//为每一个事件处理函数分派一个唯一的IDif (!handler.$$guid) handler.$$guid = addEvent.guid++;//为元素的事件类型创建一个哈希表if (!element.events) element.events = {};//为每一个"元素/事件"对创建一个事件处理程序的哈希表var handlers = element.events[type];if (!handlers) {handlers = element.events[type] = {};//存储存在的事件处理函数(如果有)if (element["on" + type]) {handlers[0] = element["on" + type];}}//将事件处理函数存入哈希表handlers[handler.$$guid] = handler;//指派一个全局的事件处理函数来做所有的工作element["on" + type] = handleEvent;
};
//用来创建唯一的ID的计数器
addEvent.guid = 1;
function removeEvent(element, type, handler) {//从哈希表中删除事件处理函数if (element.events && element.events[type]) {delete element.events[type][handler.$$guid];}
};
function handleEvent(event) {var returnValue = true;//抓获事件对象(IE使用全局事件对象)event = event || fixEvent(window.event);//取得事件处理函数的哈希表的引用var handlers = this.events[event.type];//执行每一个处理函数for (var i in handlers) {this.$$handleEvent = handlers[i];if (this.$$handleEvent(event) === false) {returnValue = false;}}return returnValue;
};
//为IE的事件对象添加一些“缺失的”函数
function fixEvent(event) {//添加标准的W3C方法event.preventDefault = fixEvent.preventDefault;event.stopPropagation = fixEvent.stopPropagation;return event;
};
fixEvent.preventDefault = function() {this.returnValue = false;
};
fixEvent.stopPropagation = function() {this.cancelBubble = true;
};

功能非常强悍，解决IE的this指向问题，event总是作为第一个参数传入，跨浏览器就更不在话下。

另，我还珍藏了一个HTML5工作组的版本：

var addEvent=(function(){if(document.addEventListener){return function(el,type,fn){if(el.length){for(var i=0;i<el.length;i++){addEvent(el[i],type,fn);}}else{el.addEventListener(type,fn,false);}};}else{return function(el,type,fn){if(el.length){for(var i=0;i<el.length;i++){addEvent(el[i],type,fn);}}else{el.attachEvent('on'+type,function(){return fn.call(el,window.event);});}};}
})();

四、addLoadEvent()

我以前讨论过这函数，不细说，就是慢了一点，各大类库基本无视它，自行实现domReady版本。下面是Simon Willison 的实现：

var addLoadEvent = function(fn) {var oldonload = window.onload;if (typeof window.onload != 'function') {window.onload = fn;}else {window.onload = function() {oldonload();fn();}}
}

五、 getElementsByClass()

我有收集癖，手头上拥有许多版本，最后集思广益自己实现了一个。下面是我的实现：

var getElementsByClassName = function (searchClass, node,tag) {if(document.getElementsByClassName){return  document.getElementsByClassName(searchClass)}else{node = node || document;tag = tag || "*";var classes = searchClass.split(" "),elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),patterns = [],returnElements = [],current,match;var i = classes.length;while(--i >= 0){patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));}var j = elements.length;while(--j >= 0){current = elements[j];match = false;for(var k=0, kl=patterns.length; k<kl; k++){match = patterns[k].test(current.className);if (!match)  break;}if (match)  returnElements.push(current);}return returnElements;}
}

六、cssQuery()

别名为getElementsBySeletor，由Dean Edwards最先实现，Prototype.js，JQuery等类库都有相应实现，其中JQuery把它整合到$()选择器中，名声盖过其前辈。不过IE8等新锐浏览器已经实现querySelector与querySelectorAll方法，待到IE6与IE7报废之日，它就无用了。无忧里有它的实现原理讲解。由于太长，就不粘出来了。

七、toggle()

用来显示或隐藏一个DOM元素。

function toggle(obj) {var el = document.getElementById(obj);if ( el.style.display != 'none' ) {el.style.display = 'none';}else {el.style.display = '';}
}

八、insertAfter()

DOM只提供了insertBefore，我们很有必要自己实现insertAfter。不过我认为 insertAdjacentElement是更好的选择，现在除了火狐其他浏览器都实现这个方法。下面是Jeremy Keith的版本：

function insertAfter(parent, node, referenceNode) {parent.insertBefore(node, referenceNode.nextSibling);
}

九、 getCookie(), setCookie(), deleteCookie()

做BBS与商业网站的应该经常用到，无理由每次都要让用户输入密码登录吧。我们需要借助cookie实现自动登录功能。

function getCookie( name ) {var start = document.cookie.indexOf( name + "=" );var len = start + name.length + 1;if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {return null;}if ( start == -1 ) return null;var end = document.cookie.indexOf( ';', len );if ( end == -1 ) end = document.cookie.length;return unescape( document.cookie.substring( len, end ) );
}
function setCookie( name, value, expires, path, domain, secure ) {var today = new Date();today.setTime( today.getTime() );if ( expires ) {expires = expires * 1000 * 60 * 60 * 24;}var expires_date = new Date( today.getTime() + (expires) );document.cookie = name+'='+escape( value ) +( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()( ( path ) ? ';path=' + path : '' ) +( ( domain ) ? ';domain=' + domain : '' ) +( ( secure ) ? ';secure' : '' );
}
function deleteCookie( name, path, domain ) {if ( getCookie( name ) ) document.cookie = name + '=' +( ( path ) ? ';path=' + path : '') +( ( domain ) ? ';domain=' + domain : '' ) +';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

十、getStyle()与setStyle()

所有UI控件都应该存在的函数，动态设置样式与获取样式。这个可以写得很短，也可以写得很长，但要精确取得样式，一个字：难！但我发现许多问题都是发端于IE，微软的开发人员好像从来不打算给出getComputedStyle这样的函数，与之相近的currentStyle会返回auto，inhert， ' '等让你哭笑不得的值，这还没有算上IE怪癖模式带来的难度呢！各类库的实现是非常长与难分离出来的，下面是我实现的版本：

function setStyle(el,prop,value){if(prop == "opacity" && !+"\v1"){//IE7 bug:filter 滤镜要求 hasLayout=true 方可执行（否则没有效果）if (!el.currentStyle || !el.currentStyle.hasLayout) el.style.zoom = 1;prop = "filter";if(!!window.XDomainRequest){value ="progid:DXImageTransform.Microsoft.Alpha(style=0,opacity="+value*100+")";}else{value ="alpha(opacity="+value*100+")"}}el.style.cssText += ';' + (prop+":"+value);}function getStyle(el, style){if(!+"\v1"){style = style.replace(/\-(\w)/g, function(all, letter){return letter.toUpperCase();});return el.currentStyle[style];}else{return document.defaultView.getComputedStyle(el, null).getPropertyValue(style)}}

有关setStyle还可以看我另一篇博文，毕竟现在设置的样式都是内联样式，与html混杂在一起。

十一、js实现base64解码

function base64_decode(data){var b64 = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";var o1, o2, o3, h1, h2, h3, h4, bits, i = 0,ac = 0,dec = "",tmp_arr = [];if (!data) { return data; }data += '';do {h1 = b64.indexOf(data.charAt(i++));h2 = b64.indexOf(data.charAt(i++));h3 = b64.indexOf(data.charAt(i++));h4 = b64.indexOf(data.charAt(i++));bits = h1 << 18 | h2 << 12 | h3 << 6 | h4;o1 = bits >> 16 & 0xff;o2 = bits >> 8 & 0xff;o3 = bits & 0xff;if (h3 == 64) {tmp_arr[ac++] = String.fromCharCode(o1);} else if (h4 == 64) {tmp_arr[ac++] = String.fromCharCode(o1, o2);} else {tmp_arr[ac++] = String.fromCharCode(o1, o2, o3);}} while (i < data.length);dec = tmp_arr.join('');dec = utf8_decode(dec);return dec;
}

十二、js实现utf8解码

function utf8_decode(str_data){var tmp_arr = [],i = 0,ac = 0,c1 = 0,c2 = 0,c3 = 0;str_data += '';while (i < str_data.length) {c1 = str_data.charCodeAt(i);if (c1 < 128) {tmp_arr[ac++] = String.fromCharCode(c1);i++;} else if (c1 > 191 && c1 < 224) {c2 = str_data.charCodeAt(i + 1);tmp_arr[ac++] = String.fromCharCode(((c1 & 31) << 6) | (c2 & 63));i += 2;} else {c2 = str_data.charCodeAt(i + 1);c3 = str_data.charCodeAt(i + 2);tmp_arr[ac++] = String.fromCharCode(((c1 & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63));i += 3;}}return tmp_arr.join('');

十三、半角转换为全角函数

function ToDBC(str){var result = '';for(var i=0; i < str.length; i++){code = str.charCodeAt(i);if(code >= 33 && code <= 126){result += String.fromCharCode(str.charCodeAt(i) + 65248);}else if (code == 32){result += String.fromCharCode(str.charCodeAt(i) + 12288 - 32);}else{result += str.charAt(i);}}return result;
}

十四、全角转换为半角函数

function ToCDB(str){var result = '';for(var i=0; i < str.length; i++){code = str.charCodeAt(i);if(code >= 65281 && code <= 65374){result += String.fromCharCode(str.charCodeAt(i) - 65248);}else if (code == 12288){result += String.fromCharCode(str.charCodeAt(i) - 12288 + 32);}else{result += str.charAt(i);}}return result;
}

十五、用正则表达式清除html代码中的脚本

function clear_script(html){return html.replace(/<script.*?>[\s\S]*?<\/script>|\s+on[a-zA-Z]{3,16}\s?=\s?"[\s\S]*?"|\s+on[a-zA-Z]{3,16}\s?=\s?'[\s\S]*?'|\s+on[a-zA-Z]{3,16}\s?=[^ >]+/ig,"");
}

十六、获取当前元素样式

function getStyle(oElm, strCssRule){var strValue = "";if(document.defaultView && document.defaultView.getComputedStyle){strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);}else if(oElm.currentStyle){strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){return p1.toUpperCase();});strValue = oElm.currentStyle[strCssRule];}return strValue;
}

十七、格式化css代码

function formatCss(s){//格式化代码s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");s = s.replace(/;\s*;/g, ";"); //清除连续分号s = s.replace(/\,[\s\.\#\d]*{/g, "{");s = s.replace(/([^\s])\{([^\s])/g, "$1 {\n\t$2");s = s.replace(/([^\s])\}([^\n]*)/g, "$1\n}\n$2");s = s.replace(/([^\s]);([^\s\}])/g, "$1;\n\t$2");return s;
}

十八、压缩css代码

function compressCss (s) {//压缩代码s = s.replace(/\/\*(.|\n)*?\*\//g, ""); //删除注释s = s.replace(/\s*([\{\}\:\;\,])\s*/g, "$1");s = s.replace(/\,[\s\.\#\d]*\{/g, "{"); //容错处理s = s.replace(/;\s*;/g, ";"); //清除连续分号s = s.match(/^\s*(\S+(\s+\S+)*)\s*$/); //去掉首尾空白return (s == null) ? "" : s[1];
}