惰性载入函数

因为浏览器之间行为的差异，多数JavaScript代码包含了大量的 if 语句，将执行引导到正确的代码中。看看下面获取浏览器样式 getCss() 函数。

惰性载入表示函数执行的分支仅会发生一次。有两种实现惰性载入的方式，第一种就是在函数被调用时再处理函数。在第一次调用的过程中，该函数会被覆盖为另外一个按合适方式执行的函数，这样任何对原函数的调用都不用再经过执行的分支了。

function getCss(ele, attr) {

    if ('getComputedStyle' in window) {

        getCss = function () {

            return window.getComputedStyle(ele, null)[attr]

        }

    } else {

        getCss = function () {

            return ele.currentStyle(attr)

        }

    }

    return getCss()

}

在这个惰性载入的 getCss() 中， if 语句的每一个分支都会为 getCss 变量赋值，有效覆盖了原有的函数。最后一步便是调用新赋的函数。下一次调用 getCss() 的时候，就会直接调用被分配的函数，这样就不用再次执行 if 语句了。

第二种实现惰性载入的方式是在声明函数时就指定适当的函数。这样，第一次调用函数时就不会损失性能了，而在代码首次加载时会损失一点性能。以下就是按照这一思路重写前面例子的结果。

var getCss = (function() {

    if ('getComputedStyle' in window) {

        return function (ele, attr) {

            return window.getComputedStyle(ele, null)[attr]

        }

    } else {

        return function (ele, attr) {

            return ele.currentStyle(attr)

        }

    }

})()

这个例子中使用的技巧是创建一个匿名、自执行的函数，用以确定应该使用哪一个函数实现。实际的逻辑都一样。不一样的地方就是第一行代码（使用 var 定义函数）、新增了自执行的匿名函数，另外每个分支都返回正确的函数定义，以便立即将其赋值给 getCss() 。

惰性载入函数的优点是只在执行分支代码时牺牲一点儿性能。至于哪种方式更合适，就要看你的具体需求而定了。不过这两种方式都能避免执行不必要的代码。