jQuery選取器源碼解讀（六）：Sizzle選取器匹配邏輯分析，jquerysizzle

jQuery選取器源碼解讀（六）：Sizzle選取器匹配邏輯分析，jquerysizzle

近期看了一些網上關於Sizzle的分析文章，就匹配次序往往就說使用了從右至左的逆向匹配法，但是具體如何並沒有詳細介紹，或者就像我之前的幾篇文章一樣，就代碼一行一行做詳細介紹，但缺乏整體概念，這裡就jQuery-1.10.2版本的Sizzle的匹配邏輯（先行編譯結果）做一整體說明，這裡就不談過多的細節了。

Sizzle的匹配過程採用的是以從右至左的逆向匹配法為基礎的改進版本，因為HTML的搜尋畢竟和文本匹配有差異，它有自己獨特的一面，所以，需要針對HTML的搜尋進行最佳化。在此先申明一點，下面所說的關係選取器是指W3C中的Combinator選取器，因本人覺得用關係選取器這個名字要比其它更加貼近實際意義，故用此命名。

1、簡單介紹一下Sizzle編譯執行的兩個主要函數：

a) matcherFromTokens——針對一個塊選取器產生執行函數，所謂塊選取器就是不包含逗號分隔的選取器字串。

b) matcherFromGroupMatchers——將不同的塊選取器產生的最終執行函數，該函數還負責將最終結果過濾掉重複對象。

2、matcherFromTokens函數針對不同類型的選取器產生不同的執行函數。若包含偽類，則返回setMatcher，否則返回的是elementMatcher，代碼通過鑒別matcher是否包含expando屬性來區別setMatcher和elementMatcher：

a) 針對非偽類且非關係選取器，直接從左至右依次產生執行函數，各函數作為同一個matchers數組的不同元素存在。

b) 針對關係選取器，將會把之前產生的matchers壓入一個新的matchers數組中。

c) 針對偽類別選取器，將通過setMatcher函數產生一個執行函數，調用setMatcher時，依次傳入6個參數，分別是preFilter, selector, matcher, postFilter, postFinder, postSelector。

      preFilter是在執行setMatcher函數之前已產生的matchers數組經elementMatcher函數加工過的最終函數，elementMatcher(matchers)將返回一個從後向前依次執行每一個matchers元素函數的新函數；。

      selector是matchers對應的選取器字串；

      matcher是偽類自身的匹配函數；

      postFilter是偽類之後，到第一個偽類或關係符之間的選取器字串對應的匹配函數，它是嵌套調用matcherFromTokens函數的返回結果；

      postFinder是postFilter對應選取器之後的所有選取器產生的匹配函數，同樣也是通過嵌套調用matcherFromTokens函數的返回結果；

      postSelector是postFinder對應的選取器字串。

d) 若選取器字串中沒有偽類，那麼，將返回elementMatcher(matchers)產生的最終匹配函數。

從上面的介紹可以看出，產生的執行函數之間存在著嵌套關係，簡單的講就是setMatcher包含matchers，關係選取器匹配函數包含非偽類且非關係選取器匹配函數。

3、執行過程的介紹：

a) 執行塊選取器的執行函數：

      針對elementMatcher，從外到裡從後到前依次執行，即從最外層數組到最裡層數組依次執行，同一個數組中，從最後一個元素到第一個元素依次執行。

      針對setMatcher，先依據preFilter和selector獲得匹配結果；然後執行matcher函數擷取匹配結果；之後，執行postFilter函數，最後，依據postFinder和postSelector擷取匹配結果。

c) 依次執行每個塊選取器的執行函數後，過濾掉重複資料，並返回結果。

看了上述大致過程，再去看各方法的詳細介紹應該比較容易理解了，當然在這裡沒有談到一些細節，例如初始結果集(seed)的產生及由此帶來的函數執行邏輯細節上的差異等。