惰性载入函数

惰性载入函数(跨浏览器兼容模式初次加载优化)

由于浏览器之间的行为差异，大多数js代码包含了大量if语句，比如下面跨浏览器事件对象绑定事件的代码片段：

var EventUtil = {
    addHandler: function(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
         }
         },
     .....
}

• 每次执行绑定事件调用EventUtil.addHandler()，都会经过多次的判断。
• 要知道，哪怕只有一个if语句，都比没有好呀！！！

第一种惰性加载解决方案：函数覆盖

function addHandler(element,type,handler){   //绑定事件
  if(element.addEventlistener){
        addHandler = function(){  
            element.addEventlistener(type, handler, false);
        }
    }else if(element.attachEvent){
        addHandler = function(){   
             element.attachEvent("on" + type, handler);
         }
    }else{
        addHandler = function(){ 
              element["on" + type] =  handler;
         }
     }
      return  addHandler(element,type,handler);
   }

• 首先，在惰性载入中，if语句的每一个分支都会为addHandler变量赋值，有效的覆盖了原有函数。
• 最后就是执行新赋的函数了，

第二种惰性加载解决方案：匿名自执行

var addHandler = (function(){  
  if(element.addEventlistener){
        return function(type, handler, false){  
            element.addEventlistener(type, handler, false);
         }
    }else if(element.attachEvent){
        return function(type, handler, false){   
             element.attachEvent("on" + type, handler);
         }
    }else{
         return function(type, handler, false){ 
              element["on" + type] =  handler;
         }
     }
   })()

• 创建匿名自执行的函数，确定使用哪一个函数实现浏览器绑定需求。
• 惰性载入函数的优点是指在执行分支代码时牺牲一点性能，避免执行不必要的代码。