javascript十个最常用的自定义函数(中文版)


Posted in Javascript onSeptember 07, 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 相关文章推荐
快速查找数组中的某个元素并返回下标示例
Sep 03 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
javascript实现状态栏中文字动态显示的方法
Oct 20 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
js中常用的Math方法总结
Jan 12 Javascript
jQuery实现选中行变色效果(实例讲解)
Jul 06 jQuery
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
详解js实时获取并显示当前时间的方法
May 10 Javascript
vue-socket.io接收不到数据问题的解决方法
May 13 Javascript
小程序自定义弹框效果
Nov 16 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
javascript 获取select下拉列表值的代码
Sep 07 #Javascript
Javascript中的var_dump函数实现代码
Sep 07 #Javascript
jquery tools系列 expose 学习
Sep 06 #Javascript
jquery tools 系列 scrollable(2)
Sep 06 #Javascript
jquery tools 系列 scrollable学习
Sep 06 #Javascript
javascript事件问题
Sep 05 #Javascript
js跨域和ajax 跨域问题的实现思路
Sep 05 #Javascript
You might like
CI框架Session.php源码分析
2014/11/03 PHP
Yii框架form表单用法实例
2014/12/04 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
php图片裁剪函数
2018/10/31 PHP
基于laravel where的高级使用方法
2019/10/10 PHP
PHPStorm2020.1永久激活及下载更新至2020(推荐)
2020/09/25 PHP
jquery ajax提交整个表单元素的快捷办法
2013/03/27 Javascript
Extjs4 关于Store的一些操作(加载/回调/添加)
2013/04/18 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
继续学习javascript闭包
2015/12/03 Javascript
JavaScript判断用户名和密码不能为空的实现代码
2016/05/16 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
jquery radio的取值_radio的选中_radio的重置方法
2016/09/20 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
Vue2单一事件管理组件通信
2017/05/09 Javascript
validationEngine 表单验证插件使用实例代码
2017/06/15 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
详解ES6 Promise对象then方法链式调用
2018/10/20 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python操作redis实例小结【String、Hash、List、Set等】
2019/05/16 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
关于win10在tensorflow的安装及在pycharm中运行步骤详解
2020/03/16 Python
python selenium操作cookie的实现
2020/03/18 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
小加工厂管理制度
2014/01/21 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
学生检讨书怎么写?
2014/10/10 职场文书
售后前台接待岗位职责
2015/04/03 职场文书
基于Go语言构建RESTful API服务
2021/07/25 Golang