jQuery selector_jquery의 작동 원리 및 최적화 분석

jQuery 객체가 선언될 때마다 jQuery.prototype.init 객체가 반환됩니다. 많은 사람들은 init가 분명히 jQuery.fn의 메소드라는 것을 이해하지 못합니다. 사실 이것은 메소드가 아니라 init의 생성자이기 때문입니다. js의 프로토타입 개체는 상속될 수 있습니다. 또한 js의 개체는 참조일 뿐 복사본이 아닙니다. new jQuery, new jQuery.fn 및 new jQuery.fn.init의 하위 개체는 동일합니다. 여기서는 그 이유를 설명하지 않겠습니다. 하지만 왜 그런지에 대해서는 다음 기사에서 설명하겠습니다.
$(selector,content) 선택기를 사용하면 init(selectot,content)가 실행됩니다. inti에서 어떻게 실행되는지 살펴보겠습니다.

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

if ( typeof selector == "string" ) {
//정규 매칭, HTML 코드인지 확인 또는 #id
var match = QuickExpr.exec( selector )
//찾을 수 있는 DOM 요소 세트, 문서 또는 jQuery 객체가 없습니다.
//selector는 #id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) ->
//HTML 코드, HTML 코드 완성을 위해 clean 호출
if ( match[1] ){
selector = jQuery.clean( [ match[1] ], context
}
/ / 예: $("#id")
else {
//id의 Dom이 로드되었는지 확인
var elem = document.getElementById( match[3] )
if ( elem ){
if ( elem.id != match[3] )
return jQuery().find( selector )
return jQuery( elem ); // 실행 완료 return
}
selector = [];
}
//비ID 형식. 컨텍스트 또는 전체 텍스트에서 검색
} else{
return jQuery( context ).find( selector ); 🎜> }
}

이것은 $('#id')로 작성된 선택자만이 가장 빠르다는 것을 의미합니다. 이는 getElementById를 한 번 실행한 것과 동일하며 후속 프로그램은 필요하지 않습니다. 다시 실행됩니다. 물론 우리에게 필요한 선택기는 그다지 간단하지 않은 경우가 많습니다. 예를 들어 $('#id.className') 및 $('#id')와 같은 작성 방법이 있는 id 아래에 있습니다. find('.className' ); 두 작성 방법의 실행 결과는 동일합니다. 예를 들어

는 확실히 을 반환하지만 실행 효율성은 완전히 다릅니다.
위 코드를 분석한 후 $('#id')와 같은 단순 선택자가 아닌 경우 find 함수가 실행됩니다. 그러면 find가 수행하는 작업을 살펴보겠습니다.

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

find: function( selector ) {
//현재 객체에서 찾기
var elems = jQuery.map(this, function(elem){
return jQuery.find( selector, elem );
})//다음 코드는 무시할 수 있습니다. 일부 처리만 수행하세요.
//여기서 js 일반 객체의 정적 메소드 테스트가 적용됩니다
//indexOf("..")에 포함된 상위 노드의 쓰기 메소드를 결정하는 xpath의 구문을 이해해야 합니다. 선택기
//원래 의도 배열의 반복되는 요소를 필터링하는 것입니다
return this.pushStack( /[^ >] [^ >]/.test( selector ) || selector.indexOf ("..") > -1 ?
jQuery.unique( elems ) :
elems )
}


$('#id .className ') 이와 같이 확장된 find('#id .className',document)는 현재 문서의 jQuery 배열이므로 확장된 찾기의 구현을 살펴보고 있으므로 많은 코드가 있습니다. 즉, 두 번째 매개변수에서 전달된 dom입니다. 하위 노드 검색을 시작하고, ID를 비교하기 위해 .를 만나고, < 그렇다면 최적화를 원한다면 두 번째 매개변수 컨텍스트의 범위를 최소화하여 순회가 거의 없도록 하는 방법을 찾아야 할까요?

$('#id').find('.className') 이렇게 쓰면 프로그램은 처음 초기화할 때 getElementById를 실행한 다음, 이렇게만 실행됩니다. 그런 다음 find('.className', divDocument)를 실행하면 divDocument는 처음 선택한 div 태그입니다. 문서 아래에 DOM 개체가 많으면 이번에는 divDocument만 탐색하는 시간이 훨씬 줄어들까요? , 처음으로 ID를 선택하는 속도도 순회보다 훨씬 빠릅니다.
이제 모두들 이해하셔야 합니다. 즉, 1단계 선택은 ID를 사용하는 것이 가장 좋지만, 범위를 정의하고 속도를 향상시키는 것이 목적입니다. 이번에는 선택 작성 방법의 최적화 및 기타 최적화에 대해 이야기하겠습니다. 다음 시간에 논의하겠습니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.