2021-06-16 JS惰性载入函数

惰性载入函数

因为浏览之间行为的差异，多数JavaScript代码包含了大量的if语句，将执行引导到正确的代码中。如果if语句不必每次执行，那么代码可以运行地更快一些。解决方案就称之为惰性载入函数。
以在不同的浏览器中获取元素的样式为例：

// 每一次执行getCss方法，都需要验证当前浏览器是否兼容getComputedStyle
function getCss(element, attr) {
    if (typeof getComputedStyle !== 'undefined') {
        return getComputedStyle(element)[attr];
    }
    return element.currentStyle[attr];
} 

// 第一次执行会产生闭包
function getCss(element, attr) {
    // 第一次执行函数：我们根据兼容性，把函数进行重构；第二次及以后再执行，只需要执行重构后的小函数即可，小函数中把只需要第一次才做的校验去掉了...
    if (typeof getComputedStyle !== 'undefined') {
        getCss = function (element, attr) {
            return getComputedStyle(element)[attr];
        };
    } else {
        getCss = function (element, attr) {
            return element.currentStyle[attr];
        };
    }
    // 保证第一次执行也可以获取结果：把重构的函数执行一次
    return getCss(element, attr);
}
var body = document.body;
console.log(getCss(body, 'width'));
console.log(getCss(body, 'margin'));