JS高级编程技巧2（惰性思想及应用）

获取元素的样式有哪些方法？
window.getComputedStyle(元素)：获取当前元素经过浏览器计算的样式「返回样式对象」

在IE6~8中，不兼容这种写法，需要使用 “元素.currentStyle” 来获取
“属性 in 对象” 检测当前对象是否有这个属性，有返回true，反之false

function getCss(element, attr) {
 //if (window.getComputedStyle)这样也可以，跟下面一样，没有值是undefined，为false
   if ('getComputedStyle' in window) {
   //获取这个对象 window.getComputedStyle(element)，然后获取这个对象的属性attr
       return window.getComputedStyle(element)[attr];
   }
   return element.currentStyle[attr];
}
var body = document.body;
console.log(getCss(body, 'height'));
console.log(getCss(body, 'margin'));
console.log(getCss(body, 'background')); 

优化思想：第一次执行getCss我们已经知晓是否兼容了，第二次及以后再次执行getCss，则不想在处理兼容的校验了，其实这种思想就是“惰性思想”「懒，干一次可以搞定的，绝对不去做第二次」

var flag = 'getComputedStyle' in window;
function getCss(element, attr) {
   if (flag) {
       return window.getComputedStyle(element)[attr];
   }
   return element.currentStyle[attr];
} 
var body = document.body;
console.log(getCss(body, 'height'));
console.log(getCss(body, 'margin'));
console.log(getCss(body, 'background')); 

代码进一步优化：惰性思想及应用–代码重构

function getCss(element, attr) {
   // 第一次执行，根据是否兼容，实现函数的重构
   if ('getComputedStyle' in window) {
       getCss = function getCss(element, attr) {//此处匿名函数具名化	
           return window.getComputedStyle(element)[attr];
       };
   } else {
       getCss = function getCss(element, attr) {
           return element.currentStyle[attr];
       };
   }
   // 为了保证第一次也可以获取信息，则需要把重构的函数执行一次
   return getCss(element, attr);
}
var body = document.body;
console.log(getCss(body, 'height'));
console.log(getCss(body, 'margin'));
console.log(getCss(body, 'background'));

函数重构：外层函数执行形成一个私有上下文，然后将其中一个函数堆赋值给外贸的变量函数，所以第一次执行的这个私有上下文不被释放，形成闭包。