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模块的源码分析的全部,欢迎提出意见和建议。

文章记录

ie模块

  1. Zepto源码分析之ie模块 (2017-11-03)

data模块

  1. Zepto中数据缓存原理与实现(2017-10-03)

form模块

  1. zepto源码分析之form模块(2017-10-01)

zepto模块

  1. 这些Zepto中实用的方法集(2017-08-26)
  2. Zepto核心模块之工具方法拾遗 (2017-08-30)
  3. 看zepto如何实现增删改查DOM (2017-10-2)

event模块

  1. mouseenter与mouseover为何这般纠缠不清?(2017-06-05)
  2. 向zepto.js学习如何手动触发DOM事件(2017-06-07)
  3. 谁说你只是"会用"jQuery?(2017-06-08)

ajax模块

  1. 原来你是这样的jsonp(原理与具体实现细节)(2017-06-11)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

JS对象与JSON格式数据相互转换

最近遇到这个问题,JS对象和JSON格式数据的相互转换。其实,也就是两个问题:JS对象转换成为JSON格式数据、JSON格式数据转换成为JS对象 目前的项目数据...

4275
来自专栏十月梦想

Promise对象、传参以及错误处理

在大部分情况下我们的程序都是在进行异步操作,需要嵌套多次callback,使得程序变得复杂!ES6中提供了Promise对象,将非阻塞I/O变为阻塞I/O,把异...

6381
来自专栏IT可乐

Redis详解(三)------ redis的五大数据类型详细用法

  我们说 Redis 相对于 Memcache 等其他的缓存产品,有一个比较明显的优势就是 Redis 不仅仅支持简单的key-value类型的数据,同时还提...

1230
来自专栏北京马哥教育

15分钟学会shell脚本,最简明的教程在这里

本文由马哥教育M23期学员推荐,转载自互联网,作者为Hnongy,感谢作者的辛苦付出和贡献。 Shell脚本,就是利用Shell的命令解释的功能,对一个纯文本的...

3167
来自专栏前端杂货铺

Angular源码分析之$compile

@(Angular) $compile,在Angular中即“编译”服务,它涉及到Angular应用的“编译”和“链接”两个阶段,根据从DOM树遍历Angula...

3545
来自专栏运维小白

linux基础(day26)

9.1正则介绍_grep(上) 正则介绍 正则就是一串有规律的字符串 掌握好正则对编写shell脚本帮助交大 各种编程语言中都有正则,原理是一样的 grep/e...

25310
来自专栏coding...

swift3.0 基础练习-实现99乘法表

753
来自专栏http://www.cnblogs.com

shelve模块

shelve是一个简单的数据存储方案,类似key-value数据库,可以很方便的保存python对象,其内部是通过pickle协议来实现数据序列化。shelve...

37317
来自专栏青玉伏案

设计模式(五): 简单而又不失其重要性的单例模式(Singleton Pattern)

上篇博客我们系统的介绍了三种工厂模式,今天我们就来介绍一下单例模式。单例模式虽然简单,但是还是比较重要的,是常用设计模式之一。在之前的博客《Objective-...

2055
来自专栏Linux驱动

编译make的出错提示解决方案

编译出错笔记: start.s:20: Error: no such instruction: `ldr r0,=WTCON' 错误:没有这样的指令 解决...

18710

扫码关注云+社区

领取腾讯云代金券