章节
问答
笔记
评论
占位
占位

Sizzle过滤器原理(上)

怎么有效的从种子合集seed里面找到选择器指定的元素?这里sizzle引入了过滤器,其原理如下:

function addCombinator(elems) {
   //代码右图所示
}

这里只做了2层过滤查找,但是这个原理其实就很明了从右到左取出对应的条件,然后通过浏览器给出的原生的API判断是否能取到对应的指判断从而筛选其结果。

过滤处理我们需要考虑的问题:

1 怎么有效的匹配这些选择器的最小判断单元,也就是通过词法分割出后的结果
2 如果处理层级选择器的判断问题

如上可见,过滤是通过一层一层往上回溯不断的循环去查找,这样虽然结果可以拿到,但是效率是非常低的。所以sizzle从1.8后采用了空间换时间的方式,通过把各种过滤器编译成闭包的函数,所以这个过程也可说是"编译函数"

在Sizzle中过滤器 Expr.filter主要分6大类型

ID”,“TAG”、“CLASS”、“ATTR”、“CHILD”、“PSEUDO”

ID的过滤器

Expr.filter["ID"] = function(id) {
    var attrId = id.replace(runescape, funescape);
    return function(elem) {
        return elem.getAttribute("id") === attrId;
    };
};

TAG类型的过滤器

"TAG": function(nodeNameSelector) {
    var nodeName = nodeNameSelector.replace(runescape, funescape).toLowerCase();
    return nodeNameSelector === "*" ?
        function() {
            return true;
    } :
        function(elem) {
            return elem.nodeName && elem.nodeName.toLowerCase() === nodeName;
    };
},

其实我们看过滤器的就是一个具体的判断方法,通过传递一个上下文元素,来判断是否存在,得到这一个布尔值,这样有效了缓存了重复的处理,来节约判断的过程,下章节就会提到的“函数编译”中具体集合使用。

任务

?不会了怎么办
||

提问题

写笔记

截图
提交
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

举报

0/150
提交
取消
全部 精华 我要发布
全部 我要发布
最新 点赞
只看我的

手记推荐

更多

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?