16. jquery Source code Analysis of the sizzle design ideas. htm

in order to facilitate the subsequent narrative, some related terms and conventions need to be understood.
Side- by-side selector expression: the "Div,p,a" ====>div,p,a is tied.
block expression: a div and P in "div>p" are two blocks.
Types of block expressions: 8 total. Id,class,name,attr,tag,child,pos,pseudo (pseudo-class expressions)
the relationship between blocks: a total of 4. " > ": Parent-child relationship," + ": next to the Brotherhood," ~ ": all sibling relationships behind," ": All descendant relationships

Design idea: Take "div.guo>p" as an example.
1. Left-to-right: look for the collection of elements that match "Div.guo", and then find the element in the child element that is "P".
2. Right-to-left: Look for the collection of elements that match "P" first, and then examine the element where the parent element of each element is "Div.guo".
either way, there are a few steps to follow.
1. First, it is necessary to correctly parse out the div.guo,p,>; in the div.guo>p that resolves the expression block and the relationship between the blocks in the selector. This step is necessary.
2. Find the collection of elements for each expression block, that is, the collection of two modules for Div.guo and P. Div.guo is also divided into Div modules and. Guo two modules.
3. Finally, the relationship between each module is dealt with. That is, the relationship ">";
both left-to-right and right-to-left in this step are two different effects.
A. Left to right: finds a collection of child elements of the Div.guo matching element collection, and then filters out the collection of child elements that match "P".
B. Right-to-left: checks whether the parent element of each element that matches "P" matches "Div.guo", preserving only the matching elements.
according to the previous analytical ideas, the following conclusions are drawn:
1. From left to right, the general idea is to constantly narrow the context, that is, to narrow down the search scope.
2. The overall idea from right to left is to look for and then filter first.
3. In the left-to-right lookup process, each time the inter-block relationship is processed, an unknown number of child or descendant elements are handled, and in the right-to-left lookup process,
you only need to handle a single parent element or a limited number of ancestor elements when working with the inter-block relationship. Therefore, in most cases, a right-to-left look-up effect is higher than left-to-right.
after understanding the above analysis, looking at sizzle, he is a right-to-left selector engine.
The sizzle provides three core interfaces:
The 1.chunker is responsible for extracting block expressions from the selector expression to examine the inter-block relationship.
2.sizzle.find (Expr,context,isxml) is responsible for finding a collection of elements that match the block expression, and the method Sizzle.filter (Expr,set,inplace,not) is responsible for filtering the collection of elements with block expressions;
3. The inter-block relationship filtering function in object Sizzle.selector.relative filters the collection of elements based on the inter-block relationship.
the function Sizzle (selector,context,results,seed) organizes the above three core interfaces.