jQuery 소스코드 분석-04 선택기-Sizzle-작동원리분석_jquery

작성자: nuysoft/Gao Yun QQ: 47214707 이메일: nuysoft@gmail.com
진술: 이 기사는 원본 기사입니다. 재인쇄해야 하는 경우 출처를 표시하고 원본 링크를 유지하세요.
Sizzle 소스 코드를 분석하기 전에 선택기의 작동 원리를 정리하겠습니다.

나중에 읽을 때 모호함이 없도록 먼저 선택기에 사용되는 일부 명사를 명확히 합니다.

Selector 표현식: "div > p"
블록 표현식: "div" "p"
열 선택기 표현식: "div, p"
블록 분할기: Sizzle의 Chunker Regular, 선택용 표현식이 분할됩니다. 왼쪽에서 오른쪽으로 블록 표현식으로
Finder: 블록 표현식을 검색하고 발견된 DOM 요소의 배열을 후보 집합이라고 합니다.
필터: 블록 표현식과 후보 집합을 필터링합니다.
관계 필터는 두 블록 사이의 관계를 필터링합니다. 블록 표현식에는 총 4개의 관계가 있습니다. "" 직계 형제 관계 ">" 상위-자식 관계 및 "~" 뒤의 모든 형제 관계
후보 세트: finder, 필터로 필터링
맵 세트: 후보 세트의 복사본, 필터 및 맵 세트를 필터링하기 위한 관계형 필터

워크플로:

1. 선택기 표현식을 왼쪽에서 오른쪽으로 분할하려면
쉼표 ","로 분할된 병렬 선택기 표현식을 만나면 첫 번째 쉼표 변환기 표현식 앞의 선택으로만 분할하고 나머지 부분을 기록하세요

2. Sizzle.find에서 마지막 블록 표현식을 검색하고 그 결과를 후보 세트에 넣은 다음 블록 표현식에서 일치하는 문자열 부분을 삭제합니다.
파인더 Sizzle.find는 정규 세트 Expr에서 해당 정규 표현식을 얻습니다. 일치하고 일치하는 경우 검색 기능 세트 Expr.find에서 해당 검색 기능을 가져와 실행합니다.
검색 순서는 Expr.order에 정의되어 있으며 순서는 다음과 같습니다. ID CLASS NAME TAG를 검색할 때 브라우저는 getElementsByClassName을 지원해야 합니다.
Expr.match는 ID의 정규 일치 표현식을 설정합니다. CLASS NAME ATTR TAG CHILD POS PSEUDO

3. 마지막 블록 표현식이 비어 있지 않은 경우 (문자열), 필터 Sizzle.filter는 집합을 필터링합니다
필터 Sizzle.filter는 단일 블록 표현식과 후보 집합 집합의 요소에만 작동합니다. 후보 집합의 요소가 나머지를 만족하는지 확인하여 작동합니다. 블록 표현식
필터 Sizzle.filter의 필터링 과정 중 조건에 맞지 않는 것은 false로 설정되고, 조건에 맞는 것은 수정되지 않습니다
필터링 시 해당 정규식을 정규식에서 가져옵니다. Expr.leftMatch를 설정하고 블록 표현식을 일치시킵니다. 일치에 성공하면 Expr.filter에서 해당 필터 함수를 가져와 실행합니다.
Expr.leftMatch는 Expr.match와 동일한 수의 정규식을 정의합니다. 공식: ID CLASS NAME ATTR TAG CHILD POS PSEUDO
필터 함수 세트 Expr.filter는 PSEUDO CHILD ID TAG CLASS ATTR POS의 필터 기능을 정의합니다.
필터 Sizzle.filter는 필터링 전에 사전 필터 Expr을 호출합니다. .preFilter는 필터링에 필요한 매개변수를 수정합니다. , 그러나 CLASS는 예외
CLASS가 사전 필터링되면 클래스와 일치하는 요소를 후보 집합으로 직접 반환하도록 최적화되어 필터링 범위와 후보 집합 범위가 좁아집니다
위에서 얻은 후보 집합 집합을 복사합니다. 검색 및 필터링하여 매핑 세트 checkSet에 넣습니다. 후속 필터링 작업은 checkSet
에서 수행되며 마지막 블록 표현식의 검색 및 필터링이 여기서 끝나고 후보 세트 세트와 checkSet
4. 매핑 세트 checkSet에서 오른쪽에서 왼쪽으로 나머지 블록 표현식을 필터링하고, 이전 블록 표현식과의 관계를 기반으로 관계 필터 세트 Expr.relative에서 해당 함수를 가져옵니다 관계형 필터 Expr.relative의 필터링 과정에서 조건에 맞지 않는 것은 false로 설정되고, 조건에 맞는 것은 부모 요소, 조상 요소, 형제 요소 간의 관계로 설정됩니다.
네 가지 유형이 있습니다: " " 직계 형제 관계 ">" 아버지-아들 관계; "~" 이후의 모든 형제 관계
관계 필터 Expr.relative의 필터링 과정에서 다음과 같은 경우가 발생합니다. 표현식은 태그 TAG이고 태그 유형 nodeName을 직접 비교하여 동일한지 확인합니다.
태그 TAG가 아닌 경우 필터 Sizzle.filter가 호출되어 필터링 프로세스에 대해 3단계를 참조하세요.
오른쪽부터 모든 블록 표현식이 필터링될 때까지 왼쪽으로 필터링

5. 필터링된 매핑 집합 checkSet에 따라 매핑 집합 checkSet
에서 null인 경우 최종 결과 집합을 선택합니다. , false는 필터링됩니다
Element(nodeType===1)가 아니면 필터링됩니다
컨텍스트가 Document가 아니고 Element이고 Element의 하위 요소가 아닌 경우에는 필터링됩니다. 필터링됨

6. 병렬 표현식이 있는 경우 1~5를 반복하고 최종 결과 집합을 병합, 정렬, 중복 제거
선택기 표현식이 하나만 있고 병렬 선택기 표현식이 없으면 정렬이 없습니다. 필수

다음 프로세스는 Sizzle에 속하지 않고 jQuery의 Sizzle 확장에 속합니다

7. context가 여러 개인 경우 각 context에 대해 1~6을 반복합니다.
Multiple context 예: $(' div').find('div > p'), $('div')는 여러 div를 찾을 수 있습니다.
사실 7단계는 7단계부터 호출 1까지의 jQuery 선택기로의 입구입니다. ~6, 결과 세트로 빈 jQuery 객체에서 Pass를 호출하는 경우
기본적으로 문서는 컨텍스트입니다. (context || rootjQuery).find( selector )

8 결과를 병합하고 제거합니다. 여러 컨텍스트에서 찾은 세트 반복하여 결과 세트 반환

완료!