jQuery selector source code interpretation (vi) : Sizzle selector matching logic analysis

Recently saw 1 some analysis about Sizzle online, he said matching order tends to use the reverse matching method, from right to left but exactly how is not in detail, or as my previous articles 1 sample, code 1 line 1 as described in detail, but the lack of overall concept, here is jQuery - 1.10.2 versions of Sizzle matching logic (precompiled results) do 1 overall illustration, here is not to talk too much detail.

The matching process of Sizzle adopts an improved version based on the reverse matching method from right to left. After all, the search of HTML is different from text matching, and it has its own unique one side. Therefore, it is necessary to optimize the search of HTML. Just to make a point, the relation selector below refers to the Combinator selector in W3C. I think it is more realistic to use this name than others.

1. A brief introduction to the following two main functions of Sizzle compilation and execution:

a) matcherFromTokens - generates an execution function for a block selector, which is a selector string that does not contain commas.

b) matcherFromGroupMatchers -- the final execution function generated by the different block selectors, which is also responsible for filtering out duplicate objects.

2. The matcherFromTokens function generates different execution functions for different types of selectors. If the pseudo-class is included, setMatcher is returned; otherwise, elementMatcher is returned. The code distinguishes setMatcher from elementMatcher by identifying whether matcher contains the expando attribute:

a) for non-pseudo-classes and non-relational selectors, generate the execution functions directly from left to right, which exist as different elements of the same matchers array.

b) for the relationship selector, the previously generated matchers will be pressed into a new matchers array.

c) for the pseudo-class selector, an execution function will be generated through the setMatcher function. When setMatcher is called, six parameters will be successively passed in, namely preFilter, selector, matcher, postFilter, postFinder, postSelector.

preFilter is the final function processed by elementMatcher after the matchers array was generated before the setMatcher function was executed. elementMatcher(matchers) will return a new function that executes each matchers element function from back to front. .

selector is the selector string corresponding to matchers;

matcher is a matching function of the pseudo-class itself;

postFilter is the matching function corresponding to the selector string between the first pseudo-class or relational character after the pseudo-class, which is the result of the nested call to matcherFromTokens function.

postFinder is the matching function generated by postFilter for all selectors after the selector, which is also the return result of the nested call to matcherFromTokens function.

postSelector is the selector string corresponding to postFinder.

d) if there is no pseudo-class in the selector string, the final matching function generated by elementMatcher(matchers) is returned.

From the above introduction, it can be seen that there is a nested relationship between the generated execution functions. Simply speaking, setMatcher contains matchers, and the relational selector matching function contains non-pseudo-classes and the non-relational selector matching function.

3. Introduction to the execution process:

a) execute the block selector's execution function:

For elementMatcher, from the outside to the inside, from the back to the front, that is, from the outermost array to the innermost array, from the last element to the first element in the same array.

For setMatcher, the matching results were first obtained according to preFilter and selector. Then the matcher function is executed to get the match result. After that, the postFilter function is executed, and finally, the matching results are obtained according to postFinder and postSelector.

c) executes the execution function of each block selector in sequence, filters out duplicate data, and returns the result.

After looking at the above general process, it should be easy to understand the detailed introduction of each method. Of course, some details are not covered here, such as the generation of the initial result set (seed) and the resulting differences in the logical details of function execution.