zepto源码--matches--学习笔记

时间:2022-10-08 23:00:15

zepto的第一个函数,zepto.matches:

zepto源码--matches--学习笔记

作用:用来匹配dom元素是否匹配某css selector。

它为后面的一些高级方法的实现提供了基础支持,比如事件代理,parent, closest等。

zepto源码--matches--学习笔记

进行初始化的判断,如果不存在DOM元素或者css selector,或者非元素节点的话,直接返回,不再进行后续操作。

zepto源码--matches--学习笔记

获取统一接口,监听所有浏览器(IE6-8不支持),需要注意到的是顺序问题,element.matches就是封装之后的函数,可以忽略,

然后优先使用element.webkitMatchesSelector,webkit内核占有率最高,尤其是国内的浏览器的高速引擎都是webkit;

2013年2月Opera放弃Presto转向Webkit,因此把element.oMatchesSelector放在了倒数第二位以兼容老版本的Opera,而尚未完全标准化的matchesSelector则放在了最后

zepto源码--matches--学习笔记

调用该方法。

同时,也提供了向下兼容的方法:

zepto源码--matches--学习笔记

如果不支持原生matchesSelector,通过对当前元素给定一个假定的父元素,在父元素中查找是否有与选择器相符的子元素,最后删除存储在临时父节点中的内容,释放不必要的内存占用。

其中解释两点:

1、按位取反运算符 (~),查看表达式的二进制表示形式的值,并执行位非运算。

二进制数值中的任何一位为 1,则结果中的该位变为 0。表达式中的任何一位为 0,则结果中的该位变为 1。实际表现结果就是对当前十进制数据取负值再减去1,例如: ~12 == -13,  ~-3  == 2。

2、zepto.qsa就是zepto实现的选择器。

最后的return match 即返回匹配结果。