惰性函数

1、我们获得元素的样式，像下面这样写就每次调用的时候，都会走两次获取样式的逻辑， 这样性能上是不好的

function getCss(element, attr) {
    // 处理兼容
    if (window.getComputedStyle) {
        return window.getComputedStyle(element)[attr];
    }
    return element.currentStyle[attr];
} 


let body = document.body;
console.log(getCss(body, 'width'));
console.log(getCss(body, 'height'));

2、比上面的形式优化一点点

let utils = (function () {
let compatible = window.getComputedStyle ? true : false;

const getCss = function getCss() {
    if (compatible) {
        return window.getComputedStyle(element)[attr];
    }
    return element.currentStyle[attr];
};

return {
    getCss
 };
})(); 

//compatible这个不需要我们每次去调用查出来，直接已经是一个值了
let body = document.body;
console.log(getCss(body, 'width'));
console.log(getCss(body, 'height'));

3、惰性函数

// 需求：一个超级复杂的业务函数，而且会被执行N次，后续执行，
// 依然想使用第一次执行处理好的逻辑，这样我们不期望每一次执行，
// 逻辑都重新判断一下，此时基于惰性思想「函数重构」可以实现性能的优化

  function getCss(element, attr) {
  if (window.getComputedStyle) {
      getCss = function (element, attr) {
          return window.getComputedStyle(element)[attr];
      };
  } else {
      getCss = function (element, attr) {
          return element.currentStyle[attr];
      };
  }
  // 第一次把重写后的函数执行，获取对应样式
  return getCss(element, attr);
}

let body = document.body;
console.log(getCss(body, 'width'));
console.log(getCss(body, 'height'));

//这样的话，我们第一次调用这个函数 改变了getCss的指向，我们下次再调用这个函数的时候，用的就是重新被定义的函数了 ；而且这个函数的上级上下文是我们之前没有被释放的那个函数