JQuery source code analysis-04 selector-Sizzle-Working Principle Analysis

Author: nuysoft/high cloud QQ: 47214707 EMail: nuysoft@gmail.com
Disclaimer: This article is an original article. If you need to reprint it, please indicate the source and retain the original article link.
Before analyzing the Sizzle source code, sort out the working principle of the selector.

First, let's clarify the nouns used in selector, and there will be no ambiguity during later reading:

Selector expression: "div> p"
Block expression: "div" "p"
Parallel selector expression: "div, p"
Block splitter: The chunker Regular Expression in Sizzle, which splits the selector expressions from left to right into block expressions.
Finder: searches for block expressions. The DOM element array is called a candidate set.
Filter: Filter block expressions and candidate sets.
The relationship filter filters the relationship between block expressions. There are four types of relationships: "+" next to the sibling relationship; ">" parent-child relationship; "" ancestor relationship ;"~ "All subsequent brothers
Candidate Set: The result of the Finder to be filtered by the filter.
Ing set: copies of candidate sets. Filters and relationship filters filter ing sets.

Workflow:

1. Use the splitter to split the selector expression from left to right.
If you encounter a parallel selector expression separated by commas (,), only the selector expression 1 that separates the front of the first comma (,) will be recorded.

2. Search for the last block expression Sizzle. find. The result is put into the candidate set, and the matching string part of the block expression is deleted.
The Finder Sizzle. find obtains the corresponding regular expression from the regular expression set Expr. match and matches the block expression. If the matching succeeds, it obtains the corresponding search function execution from the search function set Expr. find.
The search order is defined in Expr. order, followed by the id class name tag. When searching, the CLASS requires the browser to support getElementsByClassName.
Expr. match sets the id class name attr tag child pos pseudo regular expression.

3. If the last block expression is not empty (string), the filter Sizzle. filter filters the set.
The filter Sizzle. filter only works for a single block expression and only applies to elements in the set of candidates. Check that the elements in the set of candidates meet the remaining block expression.
In the filter process of Sizzle. filter, if the filter does not meet the conditions, it is set to false. If the filter does not meet the conditions, it is not modified.
When filtering, obtain the corresponding regular expression from the regular expression set Expr. leftMatch and match the block expression. If the matching is successful, obtain the corresponding filter function from the Expr. filter and execute it.
Expr. leftMatch defines the same number of regular expressions as Expr. match: ID CLASS NAME ATTR TAG CHILD POS PSEUDO
The filter function set Expr. filter defines the filter function of the pseudo child id tag class attr pos.
Before filtering the Sizzle. filter, the pre-filter Expr. preFilter is called to correct the parameters required for filtering, but the CLASS is an exception.
Optimized during pre-filtering of CLASS, directly returning elements matching class as candidate sets, narrowing the filtering range and narrowing the range of candidate sets
Copy the above search and filter to the candidate set and put it into the checking set checkSet. The filter operation is performed on the checkSet.
Searching and filtering the last block expression ends here, and a candidate set and ing set checkSet are obtained.

4. filter the remaining block expressions in the checking set checkSet from the right to the left. Based on the relationship with the previous block expression, the filter set Expr. obtain the corresponding function execution relationship filter in relative.
During the filtering process of the relationship filter Expr. relative, if the condition does not meet the condition, it is set to false. If the condition is met, it is set to the parent element, ancestor element, and elder brother element.
There are four types of relationships between elements: "+" next to the sibling relationship; ">" parent-child relationship; "" ancestor relationship ;"~ "All subsequent brothers
In the filtering process of The Link filter Expr. relative, if the block expression is a TAG, it will directly compare whether the TAG type nodeName is equal.
If it is not a TAG, the Sizzle. filter is called for filtering. For the filtering process, see step 1.
Filter from right to left until all block expressions are filtered out.

5. Based on the filtered ing set checkSet, select the final result set from the candidate set, and in the checking set checkSet
If it is null or false, it will be filtered
If it is not Element (nodeType = 1), it will be filtered
If the context is not a Document but an Element, not a child Element of the Element, it will be filtered.

6. If a parallel expression exists, repeat 1 ~ 5. Combine, sort, and deduplicate the final results.
If there is only one selector expression and there is no parallel selector expression, no sorting is required.

The following process does not belong to Sizzle and is an extension of Sizzle by jQuery.

7. If multiple contexts exist, repeat 1 ~ for each context ~ 6
Multiple context examples: $ ('div '). find ('div> p'), $ ('div') may find multiple divs
In fact, step 1 is the entry of the jQuery selector. Step 1 calls 1 ~ 6. Input an empty jQuery object as the result set during the call.
The context is document by default: (context | rootjQuery). find (selector)

8. returns the result set from multiple contexts and deduplication.

Done!