【Zepto源码】选择器引擎(qsa方法)

原创 老姚 随笔 zepto源码分析系列 890阅读 2016-12-21 09:38:27 举报

读过zepto的源码的同学都知道,
其css选择器引擎,用的是querySelectorAll方法。

如果要模拟zepto选择器,可以简单使用如下的方式:
html 代码

zepto内部实现时,把选择器这块专门提取出一个方法:qsa。可以简单模拟如下:
javascript 代码

zepto的qsa,虽以querySelectorAll为核心,但是还做了很多优化:
1.如果是id选择器,调用getElementById,模拟如下:
javascript 代码

比如使用$('#first')会走if的逻辑,而$('#container #first'),仍然会使用querySelectorAll。测试案例如下:
html 代码

2.如果是类选择器,使用getElementsByClassName,模拟如下:
javascript 代码

3.如果是单选择器的其余情形,
那么就认为是标签选择器,比如$('div'),
使用getElementsByTagName,这里不模拟了。

给出qsa的最终合成写法是:
javascript 代码

其实上面的代码,只是把zepto的qsa方法,拿过来改了下形式,其源码是:
javascript 代码

希望其源码中的条件表达式的嵌套没有使你头晕脑胀。

最后贴一下,本文完整测试案例如下:
html 代码

本文完。

评论 ( 1 )
最新评论
aaawhz 2017-05-04 13:59:07 1F

比起jquery选择器大大简化了