JavaScript之惰性函数

前不久看到javascript的性能优化的这里，有关惰性函数

假如同一个函数有许多判断来检测函数，而我们每一次调用，都会判断检测函数

例如：

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        element.addEventListener(type, fun, false);
    }    else if(element.attachEvent){
        element.attachEvent('on' + type, fun);
    }    else{
        element['on' + type] = fun;
    }
}

假如第一次调用 addEvent()判断后,以后调用还是需要重新执行一遍判断，造成浪费，那么惰性函数是怎么样的呢，就是只判断一遍。

有两种惰性载入方式

在调用的时候对函数本身重写

function addEvent (type, element, fun) {
    if (element.addEventListener) {
        addEvent = function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }    else if(element.attachEvent){
        addEvent = function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }    else{
        addEvent = function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
     return addEvent(type, element, fun);
}

在声明函数时就指定适当的函数

var addEvent = (function () {
    if (document.addEventListener) {
        return function (type, element, fun) {
            element.addEventListener(type, fun, false);
        }
    }
   else if (document.attachEvent) {
          return function (type, element, fun) {
            element.attachEvent('on' + type, fun);
        }
    }
      else {
         return function (type, element, fun) {
            element['on' + type] = fun;
        }
    }
})();

这个例子中使用的技巧是创建一个匿名的自执行函数，通过不同的分支以确定应该使用那个函数实现，实际的逻辑都一样，不一样的地方就是使用了函数表达式（使用了var定义函数）和新增了一个匿名函数，另外每个分支都返回一个正确的函数，并立即将其赋值给变量addEvent。

惰性载入函数的优点只执行一次if分支，避免了函数每次执行时候都要执行if分支和不必要的代码，因此提升了代码性能，至于那种方式更合适，就要看您的需求而定了。