jquery 源码分析七 - Sizzle
浏览数：31 /
时间：2015年06月09日
这篇主要是分析Sizzle引擎中最关键的一个函数Sizzle，这个函数接受四个参数selector,context,results,seed，这四个参数的意义分别是选择器，上下文环境，保存结果数组，还有一个未知。。
由于这个函数里面涉及了许多相关函数，所以先对主函数进行分析，并只是列出相关函数的作用。相关函数的分析会放在文章末尾。接下来先看主函数：
1 function Sizzle( selector, context, results, seed ) { 2 var match, elem, m, nodeType, 3 i, groups, old, nid, newContext, newSelector; 4 //各种常量定义 5 //设置合理的root节点，在网页中为document 6 if ( ( context ? context.ownerDocument || context : preferredDoc ) !== document ) { 7 setDocument( context ); 8 } 9 //确定上下文环境和结果数组 10 context = context || document; 11 results = results || []; 12 //如果无selector或者selector不为字符串，则直接返回results 13 if ( !selector || typeof selector !== "string" ) { 14 return results; 15 } 16 //如果上下文环境的节点不是element或者document的话，就直接返回 空数组 17 if ( (nodeType = context.nodeType) !== 1 && nodeType !== 9 ) { 18 return []; 19 } 20 21 //documentIsHTML 用于确定工作环境是否是html 22 if ( documentIsHTML && !seed ) { 23 24 // rquickExpr = /^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/ 25 // 用于快速的检测是否是单一的ID,CLASS或TAG选择符 26 if ( (match = rquickExpr.exec( selector )) ) { 27 // ID选择 28 if ( (m = match[1]) ) { 29 if ( nodeType === 9 ) { 30 elem = context.getElementById( m ); 31 // 检测是否有parentNode存在，有些浏览器会返回已经被删除了的节点 32 if ( elem && elem.parentNode ) { 33 // 处理在IE, Opera, 和Webkit 会返回name等于 m 的元素 34 if ( elem.id === m ) { 35 results.push( elem ); 36 return results; 37 } 38 } else { 39 return results; 40 } 41 } else { 42 // 如果context不是document的话，要检测context对elem的包含情况。 43 if ( context.ownerDocument && (elem = context.ownerDocument.getElementById( m )) && 44 contains( context, elem ) && elem.id === m ) { 45 results.push( elem ); 46 return results; 47 } 48 } 49 50 // TAG选择 51 } else if ( match[2] ) { 52 push.apply( results, context.getElementsByTagName( selector ) ); 53 return results; 54 55 // CLASS选择 56 } else if ( (m = match[3]) && support.getElementsByClassName && context.getElementsByClassName ) { 57 push.apply( results, context.getElementsByClassName( m ) ); 58 return results; 59 } 60 } 61 62 // querySelectorAll,处理复杂的选择 63 // rbuggyQSA用于检测querySelectAll的怪异特性 64 if ( support.qsa && (!rbuggyQSA || !rbuggyQSA.test( selector )) ) { 65 //expando是sizzle中唯一特征码 66 nid = old = expando; 67 newContext = context; 68 newSelector = nodeType === 9 && selector; 69 70 71 // querySelectorAll在element为根元素时行为很奇怪 72 // 我们可以给根元素一个特定的ID值 73 // 这样在selector最前面加上ID，就可以做到很好的筛选 74 // IE8中不支持在对象元素上用 75 if ( nodeType === 1 && context.nodeName.toLowerCase() !== "object" ) { 76 //tokenize的作用是将selector中的筛选符分割开来并放到相应数组中 77 //例：tokenize(‘div#a‘) 78 // --->[[ 79 // {matches:{0:div,index:0,input:‘div#a‘}, 80 // type:‘TAG‘, 81 // value:‘div‘}, 82 // {matches:{0:a,index:0,input:‘div#a‘}, 83 // type:‘ID‘, 84 // value:‘#a‘} 85 // ]] 86 groups = tokenize( selector ); 87 88 //如果context存在id，那么就是用原来的id，否则就用expando 89 if ( (old = context.getAttribute("id")) ) { 90 nid = old.replace( rescape, "\\$&" ); 91 } else { 92 context.setAttribute( "id", nid ); 93 } 94 nid = "[id=‘" + nid + "‘] "; 95 96 //将所有的选择符拼接 97 i = groups.length; 98 while ( i-- ) { 99 groups[i] = nid + toSelector( groups[i] ); 100 } 101 //探测是否有a+div或者[class~=‘abc‘]类似的情况，rsibling = /[+~]/ 102 newContext = rsibling.test( selector ) && testContext( context.parentNode ) || context; 103 newSelector = groups.join(","); 104 } 105 //newSelector存在的话 106 if ( newSelector ) { 107 try { 108 //直接在context下用querySelectorAll，并将结果压入数组 109 push.apply( results, 110 newContext.querySelectorAll( newSelector ) 111 ); 112 return results; 113 } catch(qsaError) { 114 } finally { 115 //最后删除添加的id 116 if ( !old ) { 117 context.removeAttribute("id"); 118 } 119 } 120 } 121 } 122 } 123 124 // 其它情况都用select，这个函数以后分析 125 return select( selector.replace( rtrim, "$1" ), context, results, seed ); 126 }
接下来就是对里面那些相关函数的分析，这里面的涉及到的函数或变量主要有：setDocument，documentIsHTML，contains，toSelector，testContext，rbuggyQSA，tokenize
rbuggyQSA，tokenize,setDocument因为太绕(我连开5,6个jquery一起读了，然后再用chrome来追踪才读出来的，泪奔。。。)，所以这次先不讲了。
首先是documentIsHTML，废话不多说，直接上代码：
1 documentIsHTML = !isXML( doc );
1 isXML = Sizzle.isXML = function( elem ) { 2 // 首先是确定根元素是否有documentElement 3 // 然后是确定documentElement节点名字是不是HTML 4 var documentElement = elem && (elem.ownerDocument || elem).documentElement; 5 return documentElement ? documentElement.nodeName !== "HTML" : false; 6 };
然后是contains，contains是在setDocument中定义的，因为contains是Sizzle中的全局变量，所以就可以到处用了。
1 // rnative = /^[^{]+\{\s*\[native \w/用于检测是否有原生函数 2 // docElem = 根元素.documentElement 3 // hasCompare = rnative.test( docElem.compareDocumentPosition ); 4 contains = hasCompare || rnative.test( docElem.contains ) ? 5 //首先是有compareDocumentPosition或者contains的情况 6 function( a, b ) { 7 var adown = a.nodeType === 9 ? a.documentElement : a, 8 bup = b && b.parentNode; 9 //先判断是否a直接包含b.parentNode 10 //否则，在确定bup后，先尝试用contains 11 //再用compareDocumentPosition 12 //compareDocumentPosition返回16表示a包含bup 13 //故要用&16将其转化为0或非0数字 14 return a === bup || !!( bup && bup.nodeType === 1 && ( 15 adown.contains ? 16 adown.contains( bup ) : 17 a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16 18 )); 19 } : 20 //b循环向上取parent，若与a相同，则返回true 21 function( a, b ) { 22 if ( b ) { 23 while ( (b = b.parentNode) ) { 24 if ( b === a ) { 25 return true; 26 } 27 } 28 } 29 //循环不到，就返回false 30 return false; 31 };
然后是toSelector：
1 //循环，将每个对象下的value值合并到selector 2 function toSelector( tokens ) { 3 var i = 0, 4 len = tokens.length, 5 selector = ""; 6 for ( ; i < len; i++ ) { 7 selector += tokens[i].value; 8 } 9 return selector; 10 }
对于selector有空格的情况，toknize函数解析的时候会将空格也独立解析成一项，所以在这边合并时空格仍旧会出现，不会被丢弃。
最后是testContext，检测context是否为空，并且context下是否有getElementsByTagName方法，代码如下：
1 function testContext( context ) { 2 return context && typeof context.getElementsByTagName !== strundefined && context; 3 }
呼，搞定~
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
