Tweet
Tweet

Slide 1

Slide 1 text

JQuery Selector Author: 骆仲军（ICBU – 前端）

Slide 2

Slide 2 text

Agenda ¡  为什么选这个主题 ¡  JQuery和Sizzle的关系 ¡  旧版Sizzle是如何工作的 ¡  新版Sizzle的改进 ¡  对Seajs模块加载的思考

Slide 3

Slide 3 text

为什么选这个主题 ¡  对各框架在各种设备上的选择性能探讨。 ¡  提到JQuery马上想到的是它的选择器。 ¡  了解选择器对我们有什么好处？ ¡  是否也能应用在Seajs模块加载？

Slide 4

Slide 4 text

JQuery和Sizzle的关系 Sizzle原先是JQuery的模块，后期独立出去作为单独的项目。 JQuery 1.3 版本总代码行数3000多行，Sizzle占有1300多行。 Jquery 1.9 版本总代码行数9000多行，Sizzle占有1600多行。

Slide 5

Slide 5 text

JQuery和Sizzle的关系 Jquery 1.3中： jQuery.find = Sizzle; jQuery.filter = Sizzle.filter; jQuery.expr = Sizzle.selectors; jQuery.expr[":"] = jQuery.expr.filters;

Slide 6

Slide 6 text

JQuery和Sizzle的关系 Jquery 1.9中： jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; jQuery.expr[":"] = jQuery.expr.pseudos; jQuery.unique = Sizzle.uniqueSort; jQuery.text = Sizzle.getText; jQuery.isXMLDoc = Sizzle.isXML; jQuery.contains = Sizzle.contains;

Slide 7

Slide 7 text

旧版Sizzle如何工作

Slide 8

Slide 8 text

Sizzle是什么 ¡  Sizzle是一个纯javascript CSS选择器引擎 ¡  基于css3标准 ¡  独立于JQuery的开源项目

Slide 9

Slide 9 text

各框架selector性能比较

Slide 10

Slide 10 text

JQuery 1.3和1.2.6不同点 为什么1.3比1.2.6快？如何有以下选择$(“div p”)： body div p p div p p div p p Span P div P p div p

Slide 11

Slide 11 text

$(Seletor)工作原理 ¡  new JQuery（Selector）和JQuery(Selector)有区别吗？ ¡  $(selector, context)和$(context).find(selector)

Slide 12

Slide 12 text

$(Seletor)工作原理 $(selector, context),有以下类 型: ¡  Null ¡  DOMElement ¡  String ¡  Function ¡  JQuery Object ¡  Array selector Array Null DOM String Function Jquery Object

Slide 13

Slide 13 text

$(Seletor)工作原理

Slide 14

Slide 14 text

JQuery和Sizzle连接 ¡  The work flow for $().find and $().filter: $().find: $().filter: For $(“selector”), it will use $().find $().find $.find Sizzle Sizzle.find Sizzle.filter $().filter $.multiFilter Sizzle.matches Sizzle Sizzle.filter

Slide 15

Slide 15 text

Sizzle工作原理 Include below methods: ¡  Sizzle.find: it will be invoke one time. ¡  Sizzle.filter: it may be invoke many times. PS: The sizzle engine is base on regular expression, so we will see various regexp in source code. Sizzle Sizzle.find Sizzle.filter

Slide 16

Slide 16 text

Sizzle工作原理 Excute regular expression chunker 1. It will transfer the selector to simple selectors which is array. 2. Divide the selector with char ‘,’ . For example: $(“div p, span p”) Sizzle Chunke r Span p div p

Slide 17

Slide 17 text

Sizzle工作原理 ¡  origPOS = /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*) \))?(?=[^-]|$)/ If selector match origPOS, for example $(“div:eq(1) p”) Sizzle.find Sizzle.filter Sizzle.find div:eq(1) p :eq (1)

Slide 18

Slide 18 text

Sizzle工作原理) For example $ (“div.class1[name=‘name1’]”): Sizzle.find Filter.class Filter.attr div.class1[name=‘name1’] div .class1[name=‘name1’] [name=‘name1’]

Slide 19

Slide 19 text

Sizzle工作原理) ¡  Sizzle.find(expr) ¡  Type: ID, Class, Name, Tag ¡  Regular expression: Function: Expr.find

Slide 20

Slide 20 text

Sizzle工作原理(Sizzle.find) 这里要selector内容分类的概念： 一般selector会按照relative中的符号分组，例如”div.cls p.top”, 会分成两组 “div.cls”和”p.top”

Slide 21

Slide 21 text

Sizzle工作原理(Sizzle.find) ID • Match ID && context.getElementById Class • Match class && context.getElementsByClassName Nam e • Match name && context.getElementsByName Tag • Match tag && context.getElementsByTagName * • Not match above || the results is null in above process How does $(“div.class1”) work in IE and Firefox?

Slide 22

Slide 22 text

Sizzle工作原理(Sizzle.filter) ¡  Sizzle.filter( expr, set ) ¡  Type: PSEUDO, CHILD, ID, TAG, CLASS, ATTR, POS ¡  Regular expression: Expr.match ¡  Pre function: Expr.preFilter ¡  Function: Expr.filter

Slide 23

Slide 23 text

浏览器自带选择器引擎 如果context是空或者是document，那么$(selector)或者$ (selector, document),如果浏览器支持方法querySelectorAll就 调用document.querySelectorAll。 请试下选择document.querySelectorAll("div p")和 document.querySelectorAll("div:eq(2)")

Slide 24

Slide 24 text

新版Sizzle的改进

Slide 25

Slide 25 text

新改进 取代Chunker正则表达式，用词法分析器来分析selector.

Slide 26

Slide 26 text

新改进 1.  词法分析器 l  解析逗号 l  Token ： >, +, 空格, ~ l  遍历正则数组 2.  Cache功能，selector作为key，解析后的group为value，注 意cache的是词法分析器的结果。

Slide 27

Slide 27 text

解析流程图

Slide 28

Slide 28 text

对Seajs模块加载的思考

Slide 29

Slide 29 text

Seajs解析流程 如图的加载过程： Load a1 -> judge a1 status a1 b1 b2 Load a1 Fetch a1 Excute callback Load b1 Load b2

Slide 30

Slide 30 text

分析相对复杂依赖 假设有如下依赖： a1 b1 c1 c2 d1 d2 c3 b2 b3

Slide 31

Slide 31 text

几种解析流程 1.  Seajs标准流程 2.  Atom优化流程 3.  尝试另一种思路, 先load叶子节点 Load a1 Load b1 Load b2 Load b3 Load c1 Load c2 Load c3 Load d1 Load d2 Load a1 Load b1, Load b2, Load b3, Load c1, Load c2, Load c3, Load d1, Load d2 Load a1 Load c1, Load d1, Load d2, Load c3 Load c2, Load b1, Load b2, Load b3

Slide 32

Slide 32 text

Thanks