jquery 선택기 엔진 sizzle 분석
위에서 말한 것은 아주 흥미롭지 않은 오프닝입니다. 우리 for example: $('.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 = "
";
// Safari can't handle uppercase or unicode characters when
// in quirks mode.
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) {
return;
}
Sizzle = function( query, context, extra, seed ) {
// querySelectorAll
}
}
如果你的浏览器是ie8+ 或者 谷歌，直接通过内置的querySelectorAll(".test")返回dom结构。 如果你使用是ie6，那么下面事情发生了
2. 不支持querySelectorAll 就会启动内部 sizzle。下面是流程
/**
.sizzle
chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|
)*)/g
，
. '.test'， '.test'
. getElementsByClassName ， dom， context.getElementsByTagName( "*" ) , ， ， className = 'test' ， dom。
*/
ok, 이상은 $('.test ') 의 절차입니다. 만약 헷갈리면 원본 코드를 보고 디버깅을 할 수 있습니다.
sizzle 선택기 정보
개인적으로,sizzle 선택기는 증강판의querySelectorAll 함수라고 생각합니다.querySelectorAll은'div.test:eq(1)'같은selector와 css3 선택을 지원하지 않기 때문입니다!
selector에 nth|eq|gt|lt|first|last|even|odd 같은 문자가 나타나지 않을 때 오른쪽에서 왼쪽으로, 이른바 오른쪽에서 왼쪽으로, 예를 들어 $('div img')는 우선 모든img를 선택하고parent는div를 통해 필터를 합니다.이렇게 효율적인 이유는dom 조회를 한 번만 하는 것입니다!
selector에'eq(1)'라는 문자가 생겼을 때 정상이 됩니다. 왼쪽에서 오른쪽으로!결과 세트를 필터링해야 하기 때문입니다.
사색
$('div img:eq(0)')와 $('div img').first () 어느 효율이 높습니까?개인적으로는 뒤쪽이 좀 높다고 생각합니다. 왜냐하면 첫 번째는 왼쪽에서 오른쪽으로 효율이 낮기 때문입니다!테스트 안 해봤어!이론적 유도!
오늘은 대체적으로 절차를 보았지만, 구체적인 코드는 그다지 자세하게 연구하지 않았다!이 안의 좋은 사상은 배우고 흡수할 만하다
환영 벽돌
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
