最近在拜读艾伦慕课网上写的JQuery课程,感觉在国内对JQuery代码分析透彻的人没几个能比得过艾伦。有没有吹牛?是不是我说大话了?

什么是Sizzle引擎?

我们经常使用JQuery的选择器查询元素,查询的选择器有简单也有复杂:
    简单点:“div”、“.navi”、“div.navi”。

复杂点:"div input[type='checkbox']"、"div.navi + .section p"。

Query实现查询时也是优先使用DOM标准查询函数,例如:

document.getElementById()

document.getElementsByTagName()

document.getElementsByClassName()

document.getElementsByName()

高级浏览器还实现了:

querySelector()

querySelectorAll()

由于浏览器版本差异导致的兼容问题,上面的函数并不是所有浏览器都支持。但JQuery得解决这些问题,所以就引入了Sizzle引擎。
JQuery在筛选元素时优先使用浏览器自带的高级查询函数,因为查询效率高。其次才选择使用Sizzle引擎筛选元素。

Sizzle引擎的目的是根据传入的selector选择器筛选出元素集合。执行过程经过词法分析、编译过程。通过词法分析把一个selector字符串分解成结构化的数据以便编译过程使用。编译过程充分利用了Javascript的闭包功能,生成一个函数链,在最终匹配时再去执行这个函数链。

举个例子,一个选择器selector的值为”Aaron input[name=ttt]”,通过词法分析,得到一个结构化数组:

[
{
matches: ["div"],
type: "TAG",
value: "Aaron"
},
{
type: " ",
value: " "
},
{
matches: ["name", "=", "ttt"],
type: "ATTR",
value: "[name=ttt]"
}
]

selector中的input作为一个种子集合seed。意思是Sizzle根据input查询出所有input元素,结果存放到seed集合,编译过程都是在seed集合中查询过滤。
    上面说的很粗糙,不便于理解,接下来我们就拿代码来介绍。

通过代码分析原理

申明:下面的代码来源于Aaron在慕课网上的Jquery教程

compile

/**
* 编译过程
*/
function compile(){
var seed = document.querySelectorAll("input"),
selector = "Aaron [name=ttt]",
elementMatchers = [],
match = [
{
matches: ["div"],
type: "TAG",
value: "Aaron"
},
{
type: " ",
value: " "
},
{
matches: ["name", "=", "ttt"],
type: "ATTR",
value: "[name=ttt]"
}
];
elementMatchers.push(matcherFromTokens(match));
//超级匹配器
var cached = matcherFromGroupMatchers(elementMatchers);
var results = cached(seed);
results[0].checked = 'checked';
}

JQuery的compile函数包含了所有的执行过程,由于本篇介绍的重点是编译过程,所以词法分析的过程未包含,这里直接写了match结果,实际JQuery会调用tokenize()函数获取词组。
    函数中调用了两个函数:matcherFromTokens()和matcherFromGroupMatchers()。
    matcherFromTokens():返回的是一个函数,函数结构如下:

返回函数格式为function(elem, context, xml),并且这个函数返回一个bool值表示elem是否匹配有效。

matcherFromGroupMatchers():函数代码很简单,遍历seed集合,每个元素都调用elementMatcher函数。最终返回一个匹配成功的元素集合。
    由于matcherFromGroupMatchers()函数比较简单,所以就先介绍它。

matcherFromGroupMatchers

function matcherFromGroupMatchers(elmentMatchers){
return function(seed){
var results = [];
var matcher, elem;
for(var i = 0; i < seed.length; i++){
var elem = seed[i];
matcher = elmentMatchers[0];
if(matcher(elem)){
results.push(elem);
}
} return results;
}
}

遍历seed元素,每一个元素都调用matcher函数,返回true则添加到results数组中。

  matcherFromTokens
function matcherFromTokens(tokens){
var len = tokens.length,
matcher,
matchers = [];
for(var i = 0; i < len; i++){
if(tokens[i].type === " "){
matchers = [addCombinator(elementMatcher(matchers))];
}else{
matcher = filter[tokens[i].type].apply(null, tokens[i].matches);
matchers.push(matcher);
}
} return elementMatcher(matchers);
}

整个编译的核心也就在matcherFromTokens函数中,遍历分词tokens数组,分词分两大类,关系型和非关系型。关系型包括:“ ”、“>”、“+”、“~”。 剩下的都是非关系型分词。

每一个非关系型分词都会对应一个matcher:

第一个分词类型为TAG,在filter中找到matcher。第二个分词为关系分词,调用addCombinator合并之前的matcher。第三个分词类型为ATTR,在filter中找到matcher。最终matchers的值为:

在return的时候又调用了elementMatcher()函数,返回的结果还是一个函数。上面介绍compile函数时看到过返回的函数结构。
    matcherFromTokens函数体中有用到addCombinator()和elementMatcher()函数以及filter对象。先看filter:

var filter = {
ATTR: function(name, operator,check){
return function(elem){
var attr = elem.getAttribute(name);
if(operator === "="){
if(attr === check){
return true;
}
}
return false;
}
},
TAG: function(nodeNameSelector){
return function(elem){
return elem.nodeName && elem.nodeName.toLowerCase() === nodeNameSelector;
}
}
}

一目了然,一看就知道filter中的ATTR和TAG对应了match分词组中的type类型,所以filter对应了非关系型分词的matcher函数。

addCombinator

function addCombinator(matcher){
return function(elem, context, xml){
while(elem = elem["parentNode"]){
if(elem.nodeType === 1)
//找到第一个亲密的节点,立马就用终极匹配器判断这个节点是否符合前面的规则
return matcher(elem);
}
}
}

addCombinator对应关系型分词matcher。本例只列举了祖先和子孙关系" "的合并,返回的结果是一个签名为function(elem, contenxt, xml)的函数,函数中elem[“parentNode”]找到文档元素类型的父节点,再调用matcher校验这个父节点是否匹配。
    所以关系型matcher函数执行的过程:先通过关系类型找到匹配元素,然后再调用matcher校验匹配结果。

elementMatcher

function elementMatcher(matchers){
return matchers.length > 1 ?
function(elem, context, xml){
var i = matchers.length;
while(i--){
if(!matchers[i](elem, context, xml)){
return false;
}
}
return true;
}:
matchers[0];
}

elementMatcher()函数就是干实事的家伙,它遍历matchers函数数组,执行每个matcher函数,一旦有matchers[i]返回false则整个匹配就失败了。这里需要注意的一点是i--,为什么是反序遍历?因为JQuery Sizzle匹配的原则是从右往左。由于前面的match数组是按照选择器从左往右保存的,所以这里先执行最后面的。

上面所有的代码只是简单模拟了JQuery Sizzle引擎的执行过程,真实的源代码很复杂,估计只有大神些才能领悟透彻。大神,艾伦得算一个。

说到闭包,如果能把JQuery Sizzle代码分析透彻,理解闭包易如反掌。本篇介绍的函数返回值都是函数,而每个返回函数需要的变量都是通过闭包存储起来,在真正执行函数的时候再读取这些变量。

如果本篇内容对大家有帮助,请点击页面右下角的关注。如果觉得不好,也欢迎拍砖。你们的评价就是博主的动力!下篇内容,敬请期待!

JQuery Sizzle引擎源代码分析的更多相关文章

  1. Sizzle.filter [ 源代码分析 ]

    最近的研究已Sizzle选择,对于原理中我们也不得不佩服! Sizzle中间filter办法.主要负责元素表达式过滤块的集合,在内部的方法调用Sizzle.selector.fitler滤波操作的操作 ...

  2. jquery ui widget 源代码分析

    jquery ui 的全部组件都是基于一个简单,可重用的widget. 这个widget是jquery ui的核心部分,有用它能实现一致的API.创建有状态的插件,而无需关心插件的内部转换. $.wi ...

  3. jQuery 2.0.3 源码分析Sizzle引擎 - 高效查询

    为什么Sizzle很高效? 首先,从处理流程上理解,它总是先使用最高效的原生方法来做处理 HTML文档一共有这么四个API: getElementById 上下文只能是HTML文档 浏览器支持情况:I ...

  4. jQuery中的Sizzle引擎分析

    我分析的jQuery版本是1.8.3.Sizzle代码从3669行开始到5358行,将近2000行的代码,这个引擎的版本还是比较旧,最新的版本已经到v2.2.2了,代码已经超过2000行了.并且还有个 ...

  5. jQuery 2.0.3 源码分析Sizzle引擎解析原理

    jQuery 2.0.3 源码分析Sizzle引擎 - 解析原理 声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 先来回答博友的提问: 如何解析 div > p + ...

  6. [转]JQuery - Sizzle选择器引擎原理分析

    原文: https://segmentfault.com/a/1190000003933990 ---------------------------------------------------- ...

  7. jQuery 2.0.3 源码分析Sizzle引擎 - 词法解析

    声明:本文为原创文章,如需转载,请注明来源并保留原文链接Aaron,谢谢! 浏览器从下载文档到显示页面的过程是个复杂的过程,这里包含了重绘和重排.各家浏览器引擎的工作原理略有差别,但也有一定规则. 简 ...

  8. jQuery1.11源码分析(8)-----jQuery调用Sizzle引擎的相关API

    之所以把这部分放在这里,是因为这里用到了一些基本API,前一篇介绍过后才能使用. //jQuery通过find方法调用Sizzle引擎 //jQuery通过find方法调用Sizzle引擎 jQuer ...

  9. jQuery选择器引擎和Sizzle介绍

    一.前言 Sizzle原来是jQuery里面的选择器引擎,后来逐渐独立出来,成为一个独立的模块,可以自由地引入到其他类库中.我曾经将其作为YUI3里面的一个module,用起来畅通无阻,没有任何障碍. ...

随机推荐

  1. 02.SQLServer性能优化之---牛逼的OSQL----大数据导入

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 上一篇:01.SQLServer性能优化之----强大的文件组----分盘存储 http ...

  2. 使用python抓取婚恋网用户数据并用决策树生成自己择偶观

    最近在看<机器学习实战>的时候萌生了一个想法,自己去网上爬一些数据按照书上的方法处理一下,不仅可以加深自己对书本的理解,顺便还可以在github拉拉人气.刚好在看决策树这一章,书里面的理论 ...

  3. 深入浅出JavaScript之闭包(Closure)

    闭包(closure)是掌握Javascript从人门到深入一个非常重要的门槛,它是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现.下面写下我的学习笔记~ 闭包-无处不 ...

  4. 微信小程序IDE(微信web开发者工具)安装、破解手册

    1.IDE下载 微信web开发者工具,本人是用的windows 10 x64系统,用到以下两个版本的IDE安装工具与一个破解工具包: wechat_web_devtools_0.7.0_x64.exe ...

  5. 代码的坏味道(22)——不完美的库类(Incomplete Library Class)

    坏味道--不完美的库类(Incomplete Library Class) 特征 当一个类库已经不能满足实际需要时,你就不得不改变这个库(如果这个库是只读的,那就没辙了). 问题原因 许多编程技术都建 ...

  6. Java获取本机的IP与MAC地址

    有些机器有许多虚拟的网卡,获取IP地址时会出现一些意外,所以需要一些验证: // 获取mac地址 public static String getMacAddress() { try { Enumer ...

  7. 服务治理要先于SOA

      讲在前面的话: 若企业缺乏对服务变更的控制和规则,那么一个服务在经过几个项目之后,就很有可能被随意更改成多个版本,将来变成什么样更是无法预测.久而久之,降低了服务重用的可能性,提高了服务利用的成本 ...

  8. 《MySQL必知必会》学习笔记

    数据库:数据库是一种以某种有组织的方式存储的数据集合.其本质就是一个容器,通常是一个或者一组文件. 表:表示一种结构化的文件,可用来存储某种特定类型的数据. 模式:描述数据库中特定的表以及整个数据库和 ...

  9. vue2.0构建淘票票webapp

    项目描述 之前一直用vue1.x写项目,最近为了过渡到vue2.0,特易用vue2.0栈仿写了淘票票页面,而且加入了express作为后台服务. 前端技术栈:vue2.0 + vue-router + ...

  10. 将css和js缓存到localStorage缓存,提高网页响应速度

    适用于小站点,这很极致,很快速~~ /** * Created by SevenNight on 2016/9/21 0021. * 插件功能:使用localStorage缓存js和css文件,减少h ...