[Original] jquery source code analysis-04 selector-Sizzle-Design Concept

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 keep the original article link

Next I will explain how sizzle works.
Let's talk about the working principle more simply. Let's not talk about interfaces from the right to the left. Let's first analyze if we want to execute a selector expression, or design a simple selector engine, what kind of work should be done intuitively:
Take div> P as an example to simulate this process. Find the P element under the DIV element:

1.FirstIt is necessary to correctly split an independent block expression from the selector expression. Otherwise, the Div or P element cannot be found.

2.ThenTo correctly execute the block expression, whether it is left> right or right> left, you must first find the DIV element or P element.
The block expression may not only be a simple ID/name/Tag/class, but also a combination of them or even a combination of pseudo classes.
For example, Div. Red is used to find the DIV with the specified. Red. How can this process be implemented?
You can first find the DIV array, then filter. red on the DIV array; or you can also find the *. Red array, and then find the div on the *. Red array.
Either way, the above process can be divided into a simple finder and a filter that filters the search results.

3. A single block expression is completed,LastTo process the relationship between block expressions. There are four relationships between DOM elements: Parent and Child, ancestor, brother, brother
It means finding a father or a son, looking for an ancestor or a descendant, looking for a brother or sister, or looking for a brother or sister. The relationship is not complex, and both have native API support.

As long as 2 ~ 3. Repeated execution can be completed (I feel like my nerves are very rough), and the general idea of the selector engine is like this.

Understand the above process and sizzle:
1. splitter chunker regular
2. block search sizzle. Find (expr, context, isxml)
Sizzle. Filter (expr, set, inplace, not)
3. filter the inter-block relationship expr. Relative
These three interfaces are the core APIs implemented by sizzle.

Of course, the above analysis involves the suspicion of ZHUGE Liang afterwards. After all, I have read the sizzle source code, but when I try to use the above process to understand the working principle of sizzle, I am suddenly enlightened, hope to be inspired.