jquery ready 함수 소스 코드 연구

일반적으로 body 탭 을 설정 한 onload 감청 window 의 load 이벤트 입 니 다.그러나 load 이 벤트 는 페이지 의 요 소 를 모두 불 러 와 야 작 동 합 니 다.페이지 에 그림 이 많 거나 그림 이 너무 크 면 초기 화 된 코드 가 실행 되 지 않 았 을 때 사용자 가 다른 작업 을 했 습 니 다.Jquery 라 이브 러 리 는 매우 편리 한 함수($(selector).ready()를 제공 합 니 다.페이지 의 dom 로 딩 이 끝 난 후에 해당 하 는 작업 을 할 수 있 습 니 다.(물론 사용자 브 라 우 저의 지원 도 봐 야 합 니 다)모든 요소 가 불 러 올 때 까지 기다 리 지 않 아 도 됩 니 다.예 를 들 어$(document).ready(function(){alert(use in page script tag)});$(document).ready(function (){ alert('use in import js file') }); 이제 이 함수 의 실현 을 연구 해 봅 시다.원리:jquery 스 크 립 트 를 불 러 올 때 isReady 표 시 를 설정 하고 DOMContentLoaded 이 벤트 를 감청 합 니 다.실행 할 함 수 를 하나의 배열 로 캐 시 합 니 다.페이지 를 불 러 온 후에 캐 시 함 수 를 일일이 실행 합 니 다.Jquery 의 상세 한 코드 분석:

 
ready: function(fn) { 
        //       
        bindReady(); 
        //    DOM      
        if ( jQuery.isReady ) 
            //         
            fn.call( document, jQuery ); 
        //        
        else 
            //            
            jQuery.readyList.push( function() { return fn.call(this, jQuery); } ); 
        return this; 
} 

jquery 가 서로 다른 브 라 우 저 dom 로 딩 이 완 료 된 알림 bidReady()편지 수:

 
var readyBound = false; 
function bindReady(){ 
    if ( readyBound ) return; 
    readyBound = true; 

// Mozilla,opera,webkitnightlies  DOMContentLoaded   
    if ( document.addEventListener && !jQuery.browser.opera) 
        //            
        document.addEventListener( "DOMContentLoaded", jQuery.ready, false ); 

    //    ie      frame  
    //                 
    if ( jQuery.browser.msie && window == top ) (function(){ 
        if (jQuery.isReady) return; 
        try { 
            //         ,     (1) 
            document.documentElement.doScroll("left"); 
        } catch( error ) { 
////         ,     (2) 
            setTimeout( arguments.callee, 0 ); 
            return; 
        } 
        // and execute any waiting functions 
        jQuery.ready(); 
    })(); 

    if ( jQuery.browser.opera ) 
        document.addEventListener( "DOMContentLoaded", function () { 
            if (jQuery.isReady) return; 
            for (var i = 0; i < document.styleSheets.length; i++) //   (3) 
                if (document.styleSheets[i].disabled) { 
                    setTimeout( arguments.callee, 0 ); 
                    return; 
                } 
            // and execute any waiting functions 
            jQuery.ready(); 
        }, false); 

    if ( jQuery.browser.safari ) { 
        var numStyles; 
        (function(){ 
            if (jQuery.isReady) return; 
            if ( document.readyState != "loaded" && document.readyState != "complete" ) { //   (4) 
                setTimeout( arguments.callee, 0 ); 
                return; 
            } 
            if ( numStyles === undefined ) 
                numStyles = jQuery("style, link[rel=stylesheet]").length; 
            if ( document.styleSheets.length != numStyles ) { //   (5) 
                setTimeout( arguments.callee, 0 ); 
                return; 
            } 
            // and execute any waiting functions 
            jQuery.ready(); 
        })(); 
    } 

    // A fallback to window.onload, that will always work 
    jQuery.event.add( window, "load", jQuery.ready ); //   (6) 
} 
} 

(1):이것 은 주로 ie 아래 의 dom ready 를 측정 하 는 것 입 니 다.원 리 는 여기에 있다.http://javascript.nwbox.com/IEContentLoaded/i 아래 에 있 습 니 다.dom 이 해석 을 완료 하지 않 았 을 때 document 의 document.document Element.do Scroll("left")을 호출 하면 dom 에 ready 가 있 는 지 없 는 지 알 수 있 습 니 다.(2)setTimeout(arguments.callee,0)은 0 초 지연 호출 을 의미 합 니 다.실제 적 으로 dom 이 바로 호출 되 지 않 습 니 다.가능 한 한 빨리 호출 할 것 입 니 다.브 라 우 저 에 게 현재 걸 려 있 는 모든 이벤트 의 핸들 을 실행 하고 문서 의 현재 상 태 를 업데이트 한 후에 호출 할 것 을 알려 줍 니 다.Arguments.callee 는 바로 외부 익명 함수 입 니 다.매개 변수의 호출 자(3):이 곳 은 이상 하 게 생각 할 수도 있 습 니 다.왜 mozilla 에서 함께 처리 하지 않 습 니까?그 이 유 는 opera 의 DOMContentLoaded 사건 이 발생 한 후 css 스타일 이 완전히 사용 되 지 않 았 기 때문에 특수 처리 해 야 합 니 다.모든 css 의 tag 가 enable 인지 아 닌 지 를 판단 하 는 것 입 니 다.(4),(5):safari 에서 document.ready State 의 상태 가 loaded 또는 complete 일 때 css 파일 도입 이 해석 되 었 는 지 확인 되 지 않 았 기 때문에 css 파일 의 수 를 판단 해 야 합 니 다(6).마지막 으로,위의 hack 가 지원 되 지 않 는 다 면...가장 안전 한 load 이벤트 로 초기 화 코드 를 실행 할 수 있 도록 합 니 다.