以添加事件函数为例,有时需要通过 if 判断浏览器,进而决定如何调用添加事件函数。实际上对于同一个浏览器,在使用过程中,一直调用的是同一种方法。这样造成每次调用时都要进行一次判断。
function addEvent( element, type, handler ){
if( element.addEventListener ){
element.addEventListener( type, handler, false );
}else if ( element.attachEvent ){
element.attachEvent( 'on'+type, handler );
}else{
element[ 'on' + type ] = handler;
}
}
采用惰性载入函数,就是只判断一次,通过这次判断确定函数内容,之后每次直接调用,不需要再重复判断。
-
方法一:在if判断中覆盖原函数
function addEvent( element, type, handler ){
if( element.addEventListener ){
addEvent = function( element, type, handler ) { element.addEventListener( type, handler, false ) };
}else if ( element.attachEvent ){
addEvent = function( element, type, handler ){ element.attachEvent( 'on'+type, handler ) };
}else{
addEvent = function( element, type, handler ){ element[ 'on' + type ] = handler };
}
return addEvent (element, type, handler); //调用了新赋值的函数
}
只在第一次调用函数的时候损失性能
-
方法二:在声明函数的时候根据if判断指定正确的函数
var addEvent =( function (){
if( element.addEventListener ){
return function( element, type, handler ) { element.addEventListener( type, handler,false ) };
}else if ( element.attachEvent ){
return function( element, type, handler ){ element.attachEvent( 'on' + type, handler ) };
}else{
return function( element, type, handler ){ element[ 'on' + type ] = handler };
}
addEvent ( element, type, handler );
})()
只在代码加载的时候损失性能