Sizzle 源码分析 (一) 2.1 稳定 版本 Sizzle 选择器引擎博大精深,下面开始阅读它的源代码,并从中做出标记 .先从入口开始,之后慢慢切入 . 入口函数 Sizzle () 源码 194-301 行 function Sizzle(selector, context, results, seed) { var match, elem, m, nodeType, i, groups, old, nid, newContext, newSelector; //37 行, prefer…

分析sizzle源码并不是为了去钻牛角尖,而是去了解它的思想,学习下期中一些技术的运用. 1,sizzle中的正则表达式jquery源码中充斥着各种正则表达式,能否看懂其源码的关键之一就是对正则表达式的理解.RegExp对象的exec方法:返回一个数组,第一个是匹配项,后边依次是分组匹配项,如果分组匹配不成功,则为undefined.而且还返回属性index(匹配项起始index),input(要验证的字符串)比如: var r=/^(\d{1})\s((\w?)|(\d{1}))$/.exec…

一.前言 DOM选择器(Sizzle)是jQuery框架中非常重要的一部分,在H5还没有流行起来的时候,jQuery为我们提供了一个简洁,方便,高效的DOM操作模式,成为那个时代的经典.虽然现在Vue,React等MVVM框架的热度如日中天,但是了解下jQuery的DOM选择器设计思路,可以学习到Sizzle设计的精妙之处,为自己模块设计和框架设计提供很好的参考意义,也为了解MVVM框架虚拟DOM打下更好的基础. 二.Sizzle的特别之处 首先介绍下jQuery选择器模块,就是Sizzle选择…

好了有了之前的词法分析过程,现在我们来到select函数来,这个函数的整体流程,前面也大概说过: 1. 先做词法分析获得token列表 2. 如果有种子集合直接到编译过程 3. 如果没有种子集合并且是单组选择符(没有逗号) (1)尝试缩小上下文:如果第一个token是ID选择符,则会执行Expr.find["ID"]的方法来找到这个上下文,以后所有的查询都是在这个上下文进行,然后把第一个ID选择符剔除. (2)尝试寻找种子集合:从右开始往左分析token,如果遇到关系选择符(>…

在Sizzle函数中,如果能快速处理或者通过querySelector处理,那么就使用它处理.否则使用select函数处理 . select函数 select = Sizzle.select = function (selector, context, results, seed) { var i, tokens, token, type, find, // 判定是否是 pre-compiled 的选择器 compiled = typeof selector === "function"…

上一篇我们了解了Sizzle的整体流程,下面我开始一点点分析各个流程,我们进行查询的第一步就是词法分析tokenize,同样先了解下思路,如果是#div_test > span input[checked=true]会发生什么: 一个字符串的每个节点都被分析为以下数据结构:{type:'对应的Token类型',value:'匹配到的字符串',  matches:'正则匹配到的一个结构'} type包括有TAG, ID, CLASS, ATTR, CHILD, PSEUDO, NAME,表示每个字…

如果快速匹配不成功,则会进入sizzle自己的解析顺序,主要流程如下: 总结流程如下: (1)函数sizzle是sizzle的入口,如果能querySelectAll快速匹配,则返回结果 (2)函数Select是sizzle自己的选择流程入口 (3)对于不包含伪类选择器的,从右向左匹配,先选择右边的分词的结果,再验证关系是否成立 (4)对于包含伪类选择器的,则直接进入匹配函数生成流程,最后通过setMatcher这个终极匹配器递归sizzle获得结果 (5)借助condense函数筛选结果 从技…

不是所有的选择器都需要去分词,生成相应的匹配函数,这样流程比较复杂,当浏览器具备原生的方法去匹配元素是,没有理由不优先匹配,下面看看进入Sizzle后,它是怎么优先匹配这些元素的: function Sizzle( selector, context, results, seed ) { /* 执行$("ul.list>li span:eq(1)")时,递归第二次时, selector "ul.list>li span" */ var match, el…

sizzle是jquery的核心,它用来选择匹配的元素,其代码包含在一个匿名函数中,并以window作为其上下文环境: (function( window, undefined ) { //此处为sizzle代码 })( window ); 匿名函数体内,首先申明了很多变量,比如下边这些正则表达式: classCache = createCache(), /*classCache: function cache( key, value ) { // Use (key + " ") to…

为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:IE 6+, Firefox 3+, Safari 3+, Chrome 4+, and Opera 10+: getElementsByName,上下文只能是HTML文档 浏览器支持情况:IE 6+, Firefox 3+, Safari 3+,Chrome 4+, and Opera 10+: g…