jQuery 선택기 소스 코드 해석(6): Sizzle 선택기 일치 논리 분석_jquery

최근 인터넷에서 Sizzle에 대한 분석 기사를 읽은 적이 있는데, 매칭 순서에 대해서는 오른쪽에서 왼쪽으로 역 매칭 방식을 사용한다는 이야기가 종종 있는데, 구체적인 내용은 자세히 소개되지 않거나 그냥 그렇네요. 이전 글에서는 코드를 한 줄씩 자세히 소개했지만 전체적인 개념이 부족합니다. 여기에서는 Sizzle의 jQuery-1.10.2 버전의 매칭 로직(사전 컴파일된 결과)에 대한 전반적인 설명이 나와 있습니다. 여기에 많은 세부 사항이 있습니다.

Sizzle의 매칭 프로세스는 오른쪽에서 왼쪽으로의 역 매칭 방식을 기반으로 개선된 버전을 사용합니다. 결국 HTML 검색은 텍스트 매칭과 다르기 때문에 최적화가 필요합니다. 아래에 언급된 관계 선택자는 W3C의 Combinator 선택자를 의미한다는 점을 먼저 분명히 해두겠습니다. 다른 이름보다 관계 선택자라는 이름이 실제 의미에 더 가깝다고 느껴서 이렇게 이름을 붙였습니다.

1. Sizzle에서 컴파일하고 실행하는 두 가지 주요 기능을 간략하게 소개합니다.

a) matcherFromTokens - 블록 선택기에 대한 실행 함수를 생성합니다. 소위 블록 선택기는 쉼표 구분이 없는 선택기 문자열입니다.

b) matcherFromGroupMatchers - 다양한 블록 선택기를 생성하는 최종 실행 함수입니다. 이 함수는 최종 결과에서 중복 개체를 필터링하는 역할도 합니다.

2. matcherFromTokens 함수는 다양한 유형의 선택기에 대해 다양한 실행 함수를 생성합니다. 의사 클래스가 포함되어 있으면 setMatcher가 반환되고, 그렇지 않으면 elementMatcher가 반환됩니다. 코드는 일치자에 확장 속성이 포함되어 있는지 식별하여 setMatcher와 elementMatcher를 구별합니다.

a) 비 의사 클래스 및 비관계 선택자의 경우 실행 함수는 왼쪽에서 오른쪽으로 직접 생성되며 각 함수는 동일한 매처 배열의 다른 요소로 존재합니다.

b) 관계 선택기의 경우 이전에 생성된 일치자는 새 일치자 배열로 푸시됩니다.

c) 의사 클래스 선택기의 경우 setMatcher 함수를 통해 실행 함수가 생성됩니다. setMatcher를 호출하면 preFilter, selector, matcher, postFilter, postFinder 및 postSelector라는 6개의 매개변수가 전달됩니다.

PreFilter는 setMatcher 함수를 실행하기 전에 생성된 matchers 배열에서 elementMatcher 함수에 의해 처리되는 최종 함수입니다. elementMatcher(matchers)는 각 matchers 요소 함수를 뒤에서 앞으로 실행하는 새로운 함수를 반환합니다.

selector는 matcher에 해당하는 선택기 문자열입니다.

매처는 의사 클래스 자체의 매칭 기능입니다.

PostFilter는 의사 클래스와 첫 번째 의사 클래스 또는 관계 기호 사이의 선택기 문자열에 해당하는 일치 함수입니다. 이는 matcherFromTokens 함수를 중첩하여 호출한 결과입니다.

PostSelector는 postFinder에 해당하는 선택기 문자열입니다.

d) 선택자 문자열에 의사 클래스가 없으면 elementMatcher(matchers)에 의해 생성된 최종 일치 함수가 반환됩니다.

위 소개에서 볼 수 있듯이 생성된 실행 함수 사이에는 중첩 관계가 있습니다. 간단히 말해서 setMatcher에는 일치자가 포함되어 있고 관계형 선택자 일치 함수에는 비의사 클래스 및 비관계형 선택자 일치 함수가 포함되어 있습니다.

a) 실행 블록 선택기의 실행 기능:

elementMatcher의 경우 외부에서 내부, 뒤에서 앞으로, 즉 가장 바깥쪽 배열부터 가장 안쪽 배열로 순차적으로 실행됩니다. 동일한 배열에서는 마지막 요소부터 첫 번째 배열까지 순차적으로 실행됩니다. 요소.

setMatcher의 경우 먼저 preFilter 및 selector를 기반으로 일치 결과를 얻은 다음 matcher 함수를 실행하여 일치 결과를 얻은 다음 postFilter 함수를 실행하고 마지막으로 postFinder 및 postSelector를 기반으로 일치 결과를 얻습니다.

c) 각 블록 선택기의 실행 기능을 순차적으로 실행한 후 중복된 데이터를 필터링하고 결과를 반환합니다.