十六.jQuery源碼解析之Sizzle設計思路.htm

標籤：style   os   htm   div   設計   res   

為了便於後面的敘述,需要瞭解一些相關術語和約定.
並欄選取器運算式:"div,p,a"====>div,p,a是並列的.
塊運算式:"div>p"中的div和p就是兩個塊.
塊運算式的類型:共8種.id,class,name,attr,tag,child,pos,pseudo(偽類運算式)
塊間的關係符:共4種.">":父子關係,"+":緊挨著的兄弟關係,"~":後面的所有兄弟關係," ":所有後代關係

設計思路:以"div.guo>p"為例.
1.從左向右:先尋找"div.guo"匹配的元素集合,然後尋找子項目中是"p"的元素.
2.從右向左:先尋找"p"匹配的元素集合,然後檢查其中每個元素的父元素是"div.guo"的元素.
無論是從哪種思路,都必須經過以下幾個步驟.
1.首先要能正確的解析出div.guo>p中的div.guo,p,>;即解析出選取器中的運算式塊和塊間的關係符.這一步是必須的.,否則根本無法下手.
2.尋找出各個運算式塊的元素集合,即div.guo和p的兩個模組集合.div.guo同時又分為div模組和.guo兩個模組.
3.最後來處理各個模組的關係.即關係符">";
這一步中的從左至右和從右至左是截然不同的兩種效果.
a.從左至右:找到div.guo匹配的元素集合的子項目集合,然後從中過濾出匹配"p"的子項目集合.
b.從右至左:檢查每個匹配"p"的元素的父元素是否匹配"div.guo",只保留匹配的元素.
根據前面的分析思路,得出以下結論:
1.從左至右的總體思路是不斷縮小上下文,即不斷縮小尋找範圍.
2.從右至左的總體思路是先尋找後過濾.
3.在從左至右的尋找過程中,每次處理塊間關係符時都需要處理未知數量的子項目或後代元素,而在從右向左的尋找過程中,
處理塊間關係符時只需要處理單個父元素或有限數量的祖先元素.因此,在大多數情況下,採用從右至左的尋找方式效果要高於從左向右.
在瞭解了上面的分析後,在來看看Sizzle,他是一款從右向左尋找的選取器引擎.
Sizzle提供了三個核心的介面:
1.chunker正則負責從選取器運算式中提取塊運算式考核塊間關係符.
2.Sizzle.find(expr,context,isXML)負責尋找塊運算式匹配的元素集合,方法Sizzle.filter(expr,set,inplace,not)負責用塊運算式過濾元素集合;
3.對象Sizzle.selector.relative中的塊間關係過濾函數根據塊間關係符過濾元素集合.
函數Sizzle(selector,context,results,seed)將上面三個核心介面組織起來.