javascript 最常用的10个自定义函数[推荐]


Posted in Javascript onDecember 26, 2009

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

function addEvent(elm, evType, fn, useCapture) { 
if (elm.addEventListener) { 
elm.addEventListener(evType, fn, useCapture);//DOM2.0 
return 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) { 
//为每一个事件处理函数分派一个唯一的ID 
if (!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); 
}); 
} 
}; 
} 
})();

(9)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(); 
} 
} 
}

(8) 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; 
} 
}

(7)cssQuery()
别名为getElementsBySeletor,由Dean Edwards最先实现,Prototype.js,JQuery等类库都有相应实现,其中JQuery把它整合到$()选择器中,名声盖过其前辈。不过IE8等新锐浏览器已经实现querySelector与querySelectorAll方法,待到IE6与IE7报废之日,它就无用了。无忧里有它的实现原理讲解。由于太长,就不粘出来了,具体可到原作者网站看看。
(6)toggle()
用来显示或隐藏一个DOM元素。
function toggle(obj) { 
var el = document.getElementById(obj); 
if ( el.style.display != 'none' ) { 
el.style.display = 'none'; 
} 
else { 
el.style.display = ''; 
} 
}

(5)insertAfter()
DOM只提供了insertBefore,我们很有必要自己实现insertAfter。不过我认为 insertAdjacentElement是更好的选择,现在除了火狐其他浏览器都实现这个方法。下面是Jeremy Keith的版本:
function insertAfter(parent, node, referenceNode) { 
parent.insertBefore(node, referenceNode.nextSibling); 
}

(4)inArray()
用于判断检查数组中是否存在某个值,下面方法取自Prototype类库。
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; 
};

(3) 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'; 
}

(2)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混杂在一起。
(1)$()
实至名归,最值钱的函数,可以节省多少流量啊。最先由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; 
}
Javascript 相关文章推荐
一段非常简单的让图片自动切换js代码
Nov 10 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
JS实现时间格式化的方式汇总
Oct 16 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
javascript操作字符串的原生方法
Dec 22 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
基于jQuery实现顶部导航栏功能
Dec 27 Javascript
JavaScript实现AOP详解(面向切面编程,装饰者模式)
Dec 19 Javascript
webpack4 CSS Tree Shaking的使用
Sep 03 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
默认让页面的第一个控件选中的javascript代码
Dec 26 #Javascript
js tab效果的实现代码
Dec 26 #Javascript
javascript 计算两个整数的百分比值
Dec 26 #Javascript
用Javascript同时提交多个Web表单的方法
Dec 26 #Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 #Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 #Javascript
Javascript 键盘keyCode键码值表
Dec 24 #Javascript
You might like
PHP验证码函数代码(简单实用)
2013/09/29 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
JQuery中getJSON的使用方法
2010/12/13 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
Jquery 跨域访问 Lightswitch OData Service的方法
2013/09/11 Javascript
基于jquery实现一张图片点击鼠标放大再点缩小
2013/09/29 Javascript
ExtJs中gridpanel分组后组名排序实例代码
2013/12/02 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
基于jquery实现下拉框美化特效
2016/02/02 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
2016/10/19 Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
2017/02/17 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python装饰器知识点补充
2018/05/28 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python使用pymongo库操作MongoDB数据库的方法实例
2019/02/22 Python
使用matlab或python将txt文件转为excel表格
2019/11/01 Python
Python csv文件记录流程代码解析
2020/07/16 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
美国领先的低折扣旅行网站:Hotwire
2019/01/19 全球购物
Sarenza德国:法国最大的时尚鞋和包包网上商店
2019/06/08 全球购物
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
法律专业学生的自我评价
2014/02/07 职场文书
安全责任书范文
2014/03/12 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
保护环境倡议书范文
2014/05/13 职场文书
2016年共产党员公开承诺书
2016/03/24 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
python可视化分析绘制带趋势线的散点图和边缘直方图
2022/06/25 Python