jQuery選擇器源碼解讀（六）：Sizzle選擇器匹配邏輯分析_jquery

近期看了一些網路上關於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)的生成及由此帶來的函數執行邏輯細節上的差異等。