Zepto源码分析之ie模块
前言
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
}
}
}
})()
代码非常简单,浏览器在加载该模块的时候,如果调用getComputedStyle第一个参数不为元素节点时抛出错误,则被catch捕获,并重写该方法。重写的方法中是另一个try catch,如果后续再发生错误,将返回null,不阻碍后续js代码的执行。
结尾
以上便是Zepto ie模块的源码分析的全部,欢迎提出意见和建议。
文章记录
ie模块
- Zepto源码分析之ie模块(2017-11-03)
data模块
- Zepto中数据缓存原理与实现(2017-10-03)
form模块
- zepto源码分析之form模块(2017-10-01)
zepto模块
- 这些Zepto中实用的方法集(2017-08-26)
- Zepto核心模块之工具方法拾遗 (2017-08-30)
- 看zepto如何实现增删改查DOM (2017-10-2)
event模块
- mouseenter与mouseover为何这般纠缠不清?(2017-06-05)
- 向zepto.js学习如何手动触发DOM事件(2017-06-07)
- 谁说你只是"会用"jQuery?(2017-06-08)
ajax模块
- 原来你是这样的jsonp(原理与具体实现细节)(2017-06-11)
谦龙的学习笔记
just go
3.6k 声望
6.1k 粉丝
推荐阅读
面试官:Vue3响应式系统都不会写,还敢说精通?
也许你我素未谋面,但很可能相见恨晚,我是前端胖头鱼前言都说今年是最惨工作年,大厂裁员,小厂跟风,简历投了几百封回信的寥寥无几,金三银四怕是成了铜三铁四,冷冷清清,凄凄惨惨。但是今天的主角,小帅同学...
前端胖头鱼赞 5阅读 3.5k评论 2
从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...
乌柏木赞 61阅读 6k评论 16
再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...
libinfs赞 39阅读 6.2k评论 12
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...
乌柏木赞 41阅读 7.2k评论 6
CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^<...
XboxYan赞 42阅读 2.8k评论 14
还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库
XboxYan赞 34阅读 2.3k评论 2
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...
乌柏木赞 32阅读 6.1k评论 9
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。