jquery 선택기 엔진 sizzle_jquery에 대한 간략한 분석

죄송합니다! jquery를 1년 정도 사용해왔는데 $(selector)만 알고 있고 내부 선택기의 흐름이 전혀 명확하지 않습니다! 그래서 jquery의 소스코드를 살펴봤습니다. jquery에서 사용하는 선택기 엔진은 jquery 작성자의 또 다른 오픈소스 프로젝트인 sizzle입니다. github에서 사용 가능하며 가장 빠른 dom 선택기로 알려져 있습니다! 2000줄 미만의 코드.

위의 내용은 별로 흥미롭지 않습니다. 예를 들어 보겠습니다. $('.test')는 jquery에서 어떻게 처리되나요?
1. 먼저 다음과 같이 판단하세요

코드를 복사하세요 코드는 다음과 같습니다.

/ **
*querySelectorAll 함수 정보
*현재 문서의 특정 선택기와 일치하는 모든 요소를 ​​반환합니다.
*var nodelist = element.querySelectorAll("div.test")
*브라우저 ie8, Chrome 지원, Firefox(3.5)
* 확실하지 않으면 구글에 검색해 보세요
*/
if ( document.querySelectorAll ) {
(function(){
var oldSizzle = Sizzle,
div = document.createElement("div"),
id = "__sizzle__";
div.innerHTML = "

"
// / / 쿼크 모드에서
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
Sizzle = function( query, context , extra, seed ) {
//querySelectorAll을 사용하여 쿼리
}
}

브라우저가 ie8 또는 Google인 경우 내장된 querySelectorAll을 직접 사용하세요. (".test")는 ie6을 사용하는 경우 다음과 같은 일이 발생합니다
2. querySelectorAll이 지원되지 않으면 다음 프로세스가 시작됩니다

코드 복사 코드는 다음과 같습니다.

/**
.sizzle via
chunker = /((?:((?:([^()] )|[^()] ) )|[(?:[[^[]]*]|[ '"][^'"]*['"]|[^[]'"] ) ]|\.|[^ > ~,([\] ) |[> ~])(s*,s *)?((?:.|r|n)*)/g
이 일반 규칙은
과 일치합니다. '.test'에 전달한 매개변수 '.test'를 일치시켜 배열에 넣습니다.
. 브라우저가 getElementsByClassName을 지원하는지 확인하고, 이 함수를 통해 dom을 반환합니다. 이 기능을 지원하지 않으면 context.getElementsByTagName("*")을 사용하여 컨텍스트를 통해 선택합니다. className = 'test'의 요소가 배열에 들어가고 dom으로 반환됩니다.*/


좋아요, 위는 $('.test' ) 과정인데, 헷갈리시면 소스코드를 보고 디버깅하시면 됩니다.

sizzle 선택기에 대해서
개인적으로는 Sizzle이 좋다고 생각합니다. selector는 querySelectorAll이 'div.test.:eq(1)'을 지원하지 않기 때문에 querySelectorAll 함수의 향상된 버전입니다.
nth|eq|gt|lt|first|last| even|odd는 오른쪽에서 왼쪽으로 선택기에 표시되지 않습니다. 예를 들어 $('div img')는 먼저 모든 imgs를 선택하고 상위 항목이 div인지 여부에 따라 필터링합니다. 이것이 매우 효율적인 이유는 단 하나의 DOM 쿼리가 수행된다는 것입니다!
선택기에 'eq(1)'과 같은 문자가 나타나면 왼쪽에서 오른쪽으로 정상이 됩니다! 결과 집합을 필터링해야 하기 때문입니다.

생각
$('div img:eq(0)') 또는 $('div img').first() 중 어느 것이 더 효율적인가요? 개인적으로는 왼쪽에서 오른쪽으로 첫 번째가 비효율적이기 때문에 후자가 더 높다고 생각합니다! 테스트되지 않았습니다! 이론적 도출!
오늘은 그 과정을 간략하게 살펴봤지만, 구체적인 코드를 자세히 공부하진 않았어요! 여기의 좋은 아이디어는 배우고 흡수할 가치가 있습니다.
Paizhuuan에 오신 것을 환영합니다.