JQuery 선택 기 $() 의 작업 원리 에 대한 분석

jQuery 대상 을 설명 할 때마다 jQuery. prototype. init 대상 으로 돌아 가면 많은 사람들 이 모 릅 니 다. init 는 jQuery. fn 의 방법 인 데 사실은 방법 이 아니 라 init 의 구조 함수 입 니 다. js 의 prototype 대상 이 계승 할 수 있 기 때 문 입 니 다. 게다가 js 의 대상 은 복사 가 아 닙 니 다. new jQuery.new jQuery. fn 과 new jQuery. fn. init 의 하위 대상 은 같 습 니 다. 다만 init 가 실행 되 었 는 지 의 차이 가 있 습 니 다.선택 기 를 사용 할 때 $(selector, content) 는 init (selectot, content) 를 실행 합 니 다. inti 에서 어떻게 실행 되 는 지 보 겠 습 니 다.

if ( typeof selector == "string" )
{
    //    ，    HTML     #id
    var match = quickExpr.exec( selector );
    //         DOM    、    jQuery   。
    //selector #id   
    if ( match && (match[1] || !context) )
    {
        // HANDLE: $(html) -> $(array)
        //HTML  ,  clean  HTML  
        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   . context        
    }
    else{
        return jQuery( context ).find( selector );
    }
}

선택 기 만 $('\ # id') 로 쓸 때 가장 빠르다 는 뜻 입 니 다. getElement ById 를 한 번 실행 한 셈 입 니 다. 뒤의 프로그램 은 더 이상 실행 하지 않 아 도 됩 니 다.물론 우리 가 필요 로 하 는 선택 기 는 이렇게 간단 하지 않 습 니 다. 예 를 들 어 우리 가 필요 로 하 는 CSS 는 className 입 니 다. 이러한 쓰기 $('\ # id. className') 와 $('\ # id'), find ('className') 가 있 습 니 다.이 두 가지 서법 의 실행 결 과 는 모두 같 습 니 다. 예 를 들 어 < div id = "id" > < span class = "className" > / span > < / div >, 되 돌아 오 는 것 은 모두 < span class = "className" > < / span > 이지 만 실행 효율 은 완전히 다 릅 니 다.위의 코드 를 분석 해 보 세 요. $('\ # id') 와 같은 간단 한 선택 기 가 아니라면 find 함 수 를 실행 합 니 다. find 가 도대체 사용 하 는 지 다시 한번 봅 시다.

find: function( selector ) {
    //         
    var elems = jQuery.map(this, function(elem){
        return jQuery.find( selector, elem );
    });
    //         ，       
    //     js          test
    //indexOf("..")      xpath   ,    selector         
    //             
    return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
        jQuery.unique( elems ) :
        elems );
}

이렇게 $('\ # id. className') 를 쓰 면 확 장 된 find ('\ # id. className', document) 로 실 행 됩 니 다. 현재 this 는 document 의 jQuery 배열 이기 때 문 입 니 다. 확 장 된 find 의 실현 을 보고 있 습 니 다. 코드 가 많 으 면 열거 하지 않 습 니 다. 한 마디 로 두 번 째 매개 변수 전달 이 진행 되 는 dom 첫 번 째 키 노드 부터 찾 습 니 다. \ # 비교 id 를 만 나 고 만 납 니 다. ClassName 보다.그리고 < + - 등 처리.그러면 우 리 는 최적화 해 야 합 니 다. 두 번 째 매개 변수 context 의 범 위 를 최소 화 하 는 방법 을 생각해 야 합 니 다. 그러면 옮 겨 다 니 는 것 이 매우 적 지 않 습 니까?만약 우리 가 이렇게 $('\ # id'). find ('className') 를 쓴다 면, 그 프로그램 은 이렇게 만 실 행 됩 니 다. 첫 번 째 init 에서 getElement ById 를 한 단계 실행 하면 return 입 니 다. 이 어 find ('className', divDocument) 를 실행 합 니 다. divDocument 는 우리 가 처음으로 선택 한 div 태그 입 니 다. document 아래 dom 대상 이 많 을 때, 이번 에는 divDocument 만 옮 겨 다 니 는 것 이 많이 줄 어 들 지 않 았 습 니까?그리고 처음 id 를 선택 하 는 속도 도 옮 겨 다 니 는 것 보다 훨씬 빠르다.이제 다 들 알 겠 지?즉, 1 층 선택 은 ID 가 가장 좋 고 간단 한 선택 기 는 범 위 를 정의 하고 속 도 를 높이 는 것 이 목적 이다.