Zepto源码分析之ie模块 #18

qianlongo · 2018-04-29T07:35:46Z

前言

Zepto中的ie模块主要是改写getComputedStyle浏览器API，代码量很少，但也是其重要模块之一。在看源代码之前，我们先回顾一下如何使用

getComputedStyle

Window.getComputedStyle() 方法给出应用活动样式表后的元素的所有CSS属性的值，并解析这些值可能包含的任何基本计算。MDN

let style = window.getComputedStyle(element, [pseudoElt]);

element

element参数即是我们要获取样式的元素

pseudoElt

要匹配的伪元素字符串，对于普通元素来说需省略（null）

结果

特别重要的是该方法执行后返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。

<style>
 #elem{
   position: absolute;
   left: 100px;
   top: 200px;
   height: 100px;
 }
</style>

<div id="elem">dummy</div>

let $elem = document.querySelector('#elem')
let cssProps = getComputedStyle($elem, null)

let { width, height } = cssProps
console.log(width, height)

特别注意

第一个参数必须是Element对象(传递一个非节点元素，如一个#text 节点，将会抛出一个错误)MDN,这也可能是Zepto要重写它的原因吧

源码分析

;(function(){
  // getComputedStyle shouldn't freak out when called
  // without a valid element as argument
  // 重写getComputedStyle
  // 第一个参数如果不是元素节点则会抛出错误，被catch捕获，并被重写。
  // 重写后的方法，如果传入的第一个参数不是元素节点，被catch捕获，返回null，则不影响后续代码的运行
  try {
    getComputedStyle(undefined)
  } catch(e) {
    var nativeGetComputedStyle = getComputedStyle
    window.getComputedStyle = function(element, pseudoElement){
      try {
        return nativeGetComputedStyle(element, pseudoElement)
      } catch(e) {
        return null
      }
    }
  }
})()