思洋互动网站建设学前班

Sizzle引擎结构

jQuery的CSS选择器引擎Sizzle共有1000多行代码，占据了jQuery框架四分之一的份额。这些代码被直接调用的匿名函数封装在一个独立的空间中，外界是无法访问的。通过下面代码可以把引擎接口传递给jQuery空间下的四个公共函数。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. jQuery.find = Sizzle;  
2. jQuery.filter = Sizzle.filter;  
3. jQuery.expr = Sizzle.selectors;  
4. jQuery.expr[":"] = jQuery.expr.filters; 

Sizzle引擎在jQuery框架中的位置犹如咽喉，起到了核心作用，如图2.4所示。在下面的jQuery选择器逻辑流程图中，首先，对传入的选择符参数进行过滤，只有是表达式字符串时，才会进入jQuery.fn.find()入口，然后进入Sizzle接口(jQuery.find())，在Sizzle构造器中分别调用Sizzle.find()和Sizzle.filter()函数完成选择和过滤操作。

图2.4  Sizzle引擎在jQuery框架中的工作流程图

在选择(Sizzle.find())和过滤(Sizzle.filter())操作过程中，都会经过这样的处理流程：匹配简单的选择器类型(To match singleselector type)。

1. ID选择器  
2. Name  
3. Class选择器  
4. 类型选择器  
5. …… 

对于选择器(Sizzle.find())来说，它会调用Expr.find[ type ]，而对于过滤器(Sizzle.filter())来说，它会调用Expr.filter[ type ]，最后分别返回Sizzle.find()和Sizzle.filter()。

在 Sizzle.filter()过程中，它还需要检测关系选择符是否存在(To check any relative exists?)。如果存在，则调用Expr. relative[]，最后返回结果集。

下面对Sizzle引擎的主体结构进行简单的分析。

广州网站建设,网站建设,广州网页设计,广州网站设计

1. /*!  
2. * Sizzle CSS Selector Engine - v0.9.3  
3.  *  Copyright 2009, The Dojo Foundation  
4.  *  Released under the MIT, BSD, and GPL Licenses.  
5.  *  More information: http://sizzlejs.com/  
6.  */  
7. //把Sizzle引擎封装在一个独立的空间中  
8. (function(){  
9. //定义用于块识别器的正则表达式  
10. var chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^[\]]*\]| ['"][^'"]*['"]|[^[\]'"] +)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?/g,  
11.     done = 0,  
12.     toString = Object.prototype.toString;  
13. // Sizzle选择器引擎构造器函数  
14. //参数说明：  
15. // selector：选择器字符串  
16. // context：上下文  
17. // results：结果集  
18. // seed：种子  
19. var Sizzle = function(selector, context, results, seed) {  
20.     //省略的函数体  
21. };  
22. // Sizzle匹配函数  
23. //参数说明：  
24. // expr：匹配表达式  
25. // set：条件设置选项  
26. Sizzle.matches = function(expr, set){  
27.     return Sizzle(expr, null, null, set);  
28. };  
29. // Sizzle查询函数  
30. //参数说明：  
31. // expr：查询表达式  
32. // context：上下文  
33. // isXML：检测函数  
34. Sizzle.find = function(expr, context, isXML){  
35.     //省略的函数体  
36. };  
37. // Sizzle过滤函数  
38. //参数说明：  
39. // expr：过滤表达式  
40. // set：条件设置选项  
41. // inplace：包含项  
42. // not：排除项  
43. Sizzle.filter = function(expr, set, inplace, not){  
44.     //省略的函数体  
45. };  
46. // Sizzle表达式对象  
47. //列举所用的各种匹配表达式  
48. var Expr = Sizzle.selectors = {  
49.     //省略成员属性  
50. };  
51. //省略其他辅助性工具函数和逻辑代码暴露的接口  
52. jQuery.find = Sizzle;  
53. jQuery.filter = Sizzle.filter;  
54. jQuery.expr = Sizzle.selectors;  
55. jQuery.expr[":"] = jQuery.expr.filters;  
56. //定义的公共函数  
57. Sizzle.selectors.filters.hidden = function(elem){};  
58. Sizzle.selectors.filters.visible = function(elem){};  
59. Sizzle.selectors.filters.animated = function(elem){};  
60. jQuery.multiFilter = function( expr, elems, not ) {};  
61. jQuery.dir = function( elem, dir ){};  
62. jQuery.nth = function(cur, result, dir, elem){};  
63. jQuery.sibling = function(n, elem){};  
64. return;  
65. window.Sizzle = Sizzle;  
66. })(); 

通过上面的结构分析，可以看到Sizzle引擎主要包含一个构造器Sizzle()，三个核心功能函数matches()、find()和filter()，以及一个表达式对象selectors。下面分别对它们进行讲解。