DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery源碼分析-04 選擇器-Sizzle-工作原理分析
jQuery源碼分析-04 選擇器-Sizzle-工作原理分析
編輯:JQuery特效代碼     
作者:nuysoft/高雲 QQ:47214707 EMail:nuysoft@gmail.com
聲明:本文為原創文章,如需轉載,請注明來源並保留原文鏈接。
在分析Sizzle源碼之前,先整理一下選擇器的工作原理

先明確一些選擇器中用到的名詞,後邊閱讀時不會有歧義:

選擇器表達式: "div > p"
塊表達式: "div" "p"
並列選擇器表達式: "div, p"
塊分割器: Sizzle中的chunker正則,對選擇器表達式從左向右分割出一個個塊表達式
查找器: 對塊表達式進行查找,找到的DOM元素數組叫候選集
過濾器: 對塊表達式和候選集進行過濾
關系過濾器 對塊表達式之間的關系進行過濾,共有四種關系:"+" 緊挨著的兄弟關系;">" 父子關系;"" 祖先關系;"~" 之後的所有兄弟關系
候選集: 查找器的結果,待過濾器進行過濾
映射集: 候選集的副本,過濾器和關系過濾器對映射集進行過濾

工作流程:

1. 使用塊分割器對選擇器表達式進行分割,從左向右
如果遇到用逗號","分割的並列選擇器表達式,只分割至第一個逗號前邊的選擇器表達式1,將剩余部分記錄下來

2. 對最後一個塊表達式進行查找Sizzle.find,結果放入候選集set,並將塊表達式中匹配的字符串部分刪除
查找器Sizzle.find從正則集Expr.match獲取對應的正則表達式,對塊表達式進行匹配,匹配成功則從查找函數集Expr.find獲取對應的查找函數執行
查找順序定義在Expr.order中,依次是:ID CLASS NAME TAG,查找時CLASS需要浏覽器支持getElementsByClassName
Expr.match中設定了ID CLASS NAME ATTR TAG CHILD POS PSEUDO的正則匹配表達式

3. 如果最後一個塊表達式不為空(字符串),過濾器Sizzle.filter對set進行過濾
過濾器Sizzle.filter僅對單個塊表達式起作用,僅對候選集set中的元素起作用,檢查候選集set中的元素滿足剩余的塊表達式
在過濾器Sizzle.filter的過濾過程中,不符合條件的被設置為false,符合條件的不做修改
過濾時從正則集Expr.leftMatch獲取對應的正則表達式,對塊表達式進行匹配,匹配成功則從Expr.filter獲取對應的過濾函數執行
Expr.leftMatch定義了與Expr.match同樣數量的正則表達式:ID CLASS NAME ATTR TAG CHILD POS PSEUDO
過濾函數集Expr.filter定義了PSEUDO CHILD ID TAG CLASS ATTR POS的過濾函數
過濾器Sizzle.filter進行過濾之前,會先調用預過濾器Expr.preFilter對過濾所需的參數進行修正,但是CLASS是個例外
在CLASS進行預過濾時做了優化,直接將匹配class的元素作為候選集返回,縮小過濾范圍,縮小候選集范圍
將以上查找和過濾得到候選集set復制,放入映射集checkSet,後邊的過濾操作在checkSet上進行
對最後一個塊表達式的查找和過濾到這裡結束,得到一個候選集set和映射集checkSet

4. 在映射集checkSet上將剩余的塊表達式從右向左進行過濾,根據與前一個塊表達式的關系,從關系過濾器集Expr.relative中獲取對應的函數執行關系過濾
在關系過濾器Expr.relative的過濾過程中,不符合條件的被設置為false,符合條件的則被設置為父元素、祖先元素、兄長元素
元素之間的關系共有四種:"+" 緊挨著的兄弟關系;">" 父子關系;"" 祖先關系;"~" 之後的所有兄弟關系
在關系過濾器Expr.relative的過濾過程中,如果遇到塊表達式是標簽TAG的情況,則直接比較標簽類型nodeName是否相等
如果不是標簽TAG的情況,則會調用過濾器Sizzle.filter進行過濾,過濾過程見第3步
從右向左過濾,直到所有塊表達式全部過濾完

5. 根據過濾後的映射集checkSet,從候選集set中挑選最終的結果集,在映射集checkSet中
如果是null、false,將被過濾
如果不是Element(nodeType===1),將被過濾
如果上下文不是Document而是某個Element,不是Element的子元素的,將被過濾

6. 如果存在並列表達式,重復1~5,並將得到的最終結果集合並、排序、去重
如果僅有一個選擇器表達式,沒有並列選擇器表達式,不需要排序

以下過程不屬於Sizzle,屬於jQuery對Sizzle的擴展

7. 如果存在多個上下文,對每個上下文重復1~6
多個上下文例子:$('div').find('div > p'),$('div')可能找到多個div
其實第7步是jQuery選擇器的入口,從第7步去調用1~6,調用時傳入一個空的jQuery對象作為結果集
默認以document為上下文:(context || rootjQuery).find( selector )

8. 將從多個上下文找到的結果集合並、去重,返回結果集

done!
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved