JavaScript 性能优化之惰性加载函数

在实际开发中，我们编写的大多数JavaScript代码包含大量的 if…else语句或者 try… catch 语句来做功能检测。
举一个简单的例子：事件的绑定，我们会首先想到下列的代码

var 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;
              }
          }

分析以上代码，为了兼容不同浏览器，每次执行 addHandler 时我们会去做功能检测，逐一去走 addHandler 中的if，获取到可以兼容的代码块。无可厚非，我们通过这两三个判断保证了每次都能使用到兼容浏览器的代码，注意到，我用了“每次”这个词。是的，以上代码每次调用 addHandler 都要做功能检测，而我们知道，当我们用某个浏览器打开网页时，其实就已经确定了哪个if/try可用了，完全没必要每次调用都检测。因此，我们引入了惰性加载函数的概念。

惰性加载表示函数执行的分支仅会发生一次。有两种实现惰性加载的方式：在函数被调用时再处理函数；在声明函数时就指定适当函数。

我们来优化一下addHandler 函数：

1、在函数被调用时再处理函数

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

              } else {
                  addHandler = function(element, type, handler) {
                      element["on" + type] = handler;
                  }

              }
              return addHandler(element, type, handler);
          },

if语句中的每一个分支都会给addHandler 变量赋值，有效覆盖了原有的函数，最后一步就是调用新赋的函数。下一次就会直接调用新赋的函数。

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

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

我们发现第二种方法在此例中并不适用，因为它是一个立即执行函数，带参显然并不合适（各种undefined），那么我们可以用 JavaScript高级程序设计中的一个例子：

let createXHR = ( () => {
    if (typeof XMLHttpRequest != 'undefined'){
        return () => {
            ...
        }
    } else if (typeof ActiveXobject != 'undefined') {
        return () => {
            ...
        }
    } else {
        return () => {
            ...
        }
    }
})();