Zepto源码分析之ie模块
本文作者：IMWeb 谦龙 原文出处：IMWeb社区 未经同意，禁止转载
前言
Zepto中的ie模块主要是改写
getComputedStyle浏览器API，代码量很少，但也是其重要模块之一。在看源代码之前，我们先回顾一下如何使用
<!-- more -->
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
}
}
}
})()代码非常简单，浏览器在加载该模块的时候，如果调用getComputedStyle第一个参数不为元素节点时抛出错误，则被catch捕获，并重写该方法。重写的方法中是另一个try catch，如果后续再发生错误，将返回null，不阻碍后续js代码的执行。
结尾
以上便是Zepto ie模块的源码分析的全部，欢迎提出意见和建议。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-12-09 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录