jquery Source Analysis-04 Selector-sizzle-Working principle Analysis _jquery

Author: nuysoft/qq:47214707 email:nuysoft@gmail.com
Statement: This article for the original article, if you want to reprint, please specify the source and retain the original link.
Before analyzing the sizzle source code, first tidy up the selector working principle

First make certain of the nouns used in the selector, there is no ambiguity behind reading:

Selector expression: "div > P"
Block expression: "div" "p"
Side-by-side selector expression: "Div, P"
Block separator: chunker Regular in sizzle, a block expression separated from left to right by selector expression
Finder: Searching for block expressions, finding DOM element arrays called candidate sets
Filters: Filter block expressions and candidate sets
The relationship filter filters the relationship between block expressions, there are four kinds of relationships: "+" next to the Brotherhood; ">" Parent-child relationship; "Ancestral relationship;
Candidate sets: Results of finder, filter to filter
Mapping set: A copy of candidate sets, filters and relational filters filter the set of mappings

Work Flow:

1. Use the block separator to split the selector expression from left to right
If you encounter a side-by-side selector expression with a comma "," split, only the selector expression 1 precedes the first comma, and the remainder is recorded

2. The last block expression is searched sizzle.find, the result is placed in the candidate set, and the string part of the block expression is deleted
The Finder Sizzle.find obtains the corresponding regular expression from the regular set Expr.match, matches the block expression, and obtains the corresponding lookup function from the lookup functions set expr.find the matching success.
The lookup order is defined in Expr.order, followed by: ID class NAME TAG, which requires browser support when looking for the class Getelementsbyclassname
A regular matching expression with ID CLASS NAME ATTR TAG child POS Pseudo is set in Expr.match

3. If the last block expression is not empty (a string), filter sizzle.filter the Set
The filter Sizzle.filter only works on a single block expression, works only on the elements in the set of candidate sets, and checks that the elements in the set of candidate sets satisfy the remaining block expressions
In the filter sizzle.filter filter process, the condition is set to false, the condition does not make changes
When filtering, the corresponding regular expression is obtained from the regular set Expr.leftmatch, the block expression is matched, and the corresponding filter function is obtained from expr.filter to perform the matching success.
Expr.leftmatch defines the same number of regular expressions as Expr.match: ID CLASS NAME ATTR TAG child POS PSEUDO
Filter function set Expr.filter defines filter functions for pseudo child ID TAG CLASS ATTR Pos
Filter Sizzle.filter before filtering, will first call the filter expr.prefilter to filter the required parameters to amend, but class is an exception
The class is optimized to filter the elements of the matching class to return to the candidate set, narrow the scope of the filter and narrow the candidate set.
Find and filter the above to get the candidate set to replicate, put into the mapping set Checkset, the filter behind the operation on the Checkset
Find and filter the last block expression to end here, get a set of candidate sets and map set Checkset

4. In the mapping set Checkset the remaining block expressions are filtered from right to left, and the corresponding function execution relationship filtering is obtained from the relational filter set expr.relative according to the relationship with the previous block expression.
In the filtering process of the relational filter expr.relative, the condition is set to false and the qualifying is set to the parent element, ancestor element, sibling element
There are four kinds of relationships between elements: "+" next to the Brotherhood; ">" Parent-child relationship; "ancestor relationship; all Brotherhood after" ~ "
In the filtering process of the relational filter expr.relative, if you encounter a block expression that is tag tag, you can directly compare the label type nodename equality
If it is not the case of tag tag, it will call the filter sizzle.filter to filter, the filtering process see step 3rd
Filter from right to left until all block expressions are filtered out

5. According to the filtered mapping set Checkset, select the final result set from the set of candidate set, in the mapping 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 there are parallel expressions, repeat 1~5, and the resulting set of results are merged, sorted, and weighed
If there is only one selector expression, no side-by-side selector expression, no sorting required

The following process does not belong to sizzle, which is the extension of jquery to sizzle

7. Repeat 1~6 for each context if multiple contexts exist
Multiple context Examples: $ (' div '). Find (' div > P '), $ (' div ') may locate multiple div
In fact, step 7th is the entrance to the jquery selector, calling 1~6 from step 7th, and passing in an empty jquery object as a result set at call time
Default to document as context: (Contexts | | rootjquery). FIND (selector)

8. Merges, resets, and returns the result set found from multiple contexts

done!