js 메모 (6) - jQuery의ready () 이벤트에 왜 그렇게 많은 코드가 필요합니까?

선언:
ready () 이벤트의 응용은 모두가 더 이상 익숙할 수 없는 것입니다. jQuery를 배우는 첫 번째 단계, 가장 흔히 볼 수 있는 코드:

jQuery(document).ready(function () { });
jQuery(function () { });
$(document).ready(function () { });
$(function () { });

상기 네 줄 코드의 목적과 효과는 모두 같다. DOM이 불러온 후에 전송된function 함수를 실행한다.
jquery에 조금 더 익숙해진 분들은 여기'DOM 불러오기 완료 대기'가 window가 아니라는 것을 아실 거예요.onload 이벤트, window.onload는 DOM 로드 완료 + DOM 관련 파일 다운로드 완료를 의미합니다.여기에는 DOM 로드 완료(DOM 관련 파일 로드 완료)가 포함되지 않습니다.관련 이벤트는 다음과 같습니다.
4

DOMContentLoaded 이벤트(IE9+ 및 기타 브라우저) 4

4

onreadystatechange 이벤트(IE9 이하 브라우저) 4

문제는 바로 여기에 있다.만약 이 두 사건을 알았다면, 전송된function 함수를 이 두 사건에 연관시키면 되고, jquery에서ready와 관련된 코드를 수백 줄에 달하는 코드를 쏟아부어 썼을 것이다.무엇 때문인가?
이유는 다음과 같습니다.
 
2. 스토리지 패브릭 - 비동기식 대기열 기반 설계:
먼저 다음 코드를 살펴보십시오.

        //  ready  
        $(function () {
            alert(10);
        });
        $(function () {
            alert(20);
        });
        $(function () {
            alert(30);
        });

상기 코드는ready 방법을 세 번 연속으로 응용했는데 사실 jquery는 자체의 jquery를 사용했다.콜백스로 처리했습니다.기본 코드는 다음과 같습니다.

readyList = jQuery.Callbacks( "once memory" );
readyList.add( fn );
readyList.fireWith( document, [ jQuery ] );

"once":dd를 대표하여 들어오는 함수는 한 번만 호출됩니다.
"memory":readylist가 한 번 실행되면 다음에 추가된 함수는 실행될 때의 환경과 매개 변수에 따라 실행됩니다.
 
3. 교묘한 사건 귀속:
IE9+ 및 기타 브라우저에서 지원하는 DOMContentLoaded의 경우먼저 코드 보기:

        // Mozilla, Opera and webkit nightlies currently support this event
        if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

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

　　 
    DOMContentLoaded = function() {
        document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
        jQuery.ready();
    };

상기 코드에 의하면 최종적으로 DOMContented 이벤트가 실행된 것은 사실 jQUery이다.ready () 이 도구 함수입니다.(참고, jquery.ready()와 jquery(document).raedy ()는 다르다!!,전자는 도구 함수이고, 후자는 실례 함수이다.)
이것은 jquery를 실행하기 위해 DOMContentLoaded 함수를 정의합니다.ready () 함수의, 이렇게 하는 목적은 문서의 DOMContentLoaded 이벤트를 인용하기 위해서입니다.

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );

단독으로 이 두 줄을 떼어내면 알 수 있다.dd가 끝난 후에remove가 떨어졌고 이 가운데서 jquery를 교묘하게 집행했다.ready (), 이런 용법은 배울 만하다!
반대로 다음 코드와 같이 실행되면 문서의 DOMContentLoaded 이벤트 인용은 제때에 삭제할 수 없습니다.

//  
document.removeEventListener( "DOMContentLoaded", jQuery.ready, false );

 
 
또한 브라우저를 통해doMContentLoaded/onreadystatechange 방법을 제외하고는 jquery를 호출할 수 있습니다.ready () 함수 외에 jquery를 교묘하게 호출하는 방법도 있습니다.ready () 함수.
IE9 이하의 브라우저에서 현재 페이지가 맨 윗부분(즉 iframe과friame 요소에 포함되지 않음)이면 html을 호출합니다.doScroll (), 이상을 던지지 않을 때까지 jquery를 호출할 수 있습니다.ready () 함수.

 1     if ( document.documentElement.doScroll && toplevel ) {
 2                 doScrollCheck();
 3             }
 4             
 5     /*  */
 6     
 7     try {
 8         // If IE is used, use the trick by Diego Perini
 9         // http://javascript.nwbox.com/IEContentLoaded/
10         document.documentElement.doScroll("left");
11     } catch(e) {
12         setTimeout( doScrollCheck, 1 );
13         return;
14     }
15 
16     // and execute any waiting functions
17     jQuery.ready();

 
4. 이벤트 실행:
위에서 말한 바와 같이 브라우저의DOMContentLoaded/onreadystatechange 이벤트와 html에 대한 설명입니다.doScroll()의 체크를 사용하여 jquery를 호출합니다.ready () 도구 함수, jquery.ready () 는 최종적으로 비동기 대기열의 Firewith () 방법을 사용해서 전송된 모든 이벤트를 터치합니다.만약 js를 통해 수동으로 호출된다면, jquery 이벤트 시스템을 통해 호출할 수도 있습니다.

readyList.fireWith( document, [ jQuery ] );

if ( jQuery.fn.trigger ) {
                jQuery( document ).trigger( "ready" ).off( "ready" );
            }

 
사실 그중에 jquery도 있어요.holdready () 방법은 호출을 지연시키는 데 사용되지만, 비교적 간단하고, 자주 사용되지 않습니다. 여기서는 설명하지 않겠습니다.
 
5. 요약:
이를 통해 알 수 있듯이 jQuery의ready() 사건은 우리가 보기에 그렇게 간단하지 않다. 그 원리를 이해하는 동시에 우리가 시스템을 설계할 때 전면적으로 고려해야 한다고 생각해야 한다.
4

이것은 비동기 대기열을 사용하여 사용자가 여러 번 호출하고 순서대로 집행할 수 있도록 한다

4

그의 사건 귀속은 각종 상황을 고려했고 자원의 방출을 충분히 고려했다

4

이것은 브라우저가 호출되는 상황과 js가 수동으로 호출되는 상황을 동시에 고려했다

개인적인 느낌: js가 도대체 어떻게 사용되는지 알고 싶으면 js의 원본 코드와 디자인을 이해하는 것이 지름길이다.