Javascript는 DOMContentLoaded 이벤트 인스턴스_javascript 기술을 캡슐화합니다.

최근 Javascript 프레임워크를 작성 중인데 DOMContentLoaded 이벤트를 방금 캡슐화했습니다. 약간의 설렘을 안고 개발 과정에서 발생하는 원칙과 호환성 문제를 잊지 않도록 메모해 두었습니다. .

js 코드를 작성할 때 일반적으로 window.onload 이벤트를 추가합니다. 주로 DOM이 로드된 후 getElementById, getElementsByTagName 및 기타 메서드를 사용하여 작업할 DOM 요소를 선택할 수 있지만 window.load는 DOM이 로드됩니다. iframe의 스크립트, CSS 및 모든 리소스는 최종 이미지 또는 iframe이 로드될 때까지 트리거되지 않습니다. 많은 경우 웹 페이지에 js를 실행하기에는 너무 늦습니다. 시간이 많이 걸리는 작업인 마지막 이미지가 로드될 때까지는 사용자 경험에 영향을 미치게 됩니다.

많은 js 프레임워크에는 DOM이 로드된 후 즉시 js 코드를 실행하고 이미지를 느리게 로드할 수 있는 JQuery의 $(document).ready() 메서드와 같은 document.ready 함수가 있습니다.

document.ready의 핵심은 DOMContentLoaded 이벤트입니다. Firefox, chrome, Opera, safari 및 ie9는 모두 이벤트 바인딩을 위해 addEventListener('DOMContentLoaded',fn,false)를 사용할 수 있지만 ie6~8은 DOMContentLoaded를 지원하지 않습니다. 이벤트이므로 ie6~8에 대한 호환성 처리가 필요합니다.

정보에 따르면 ie6~8은 document.onreadystatechange 이벤트를 사용하여 document.readyState 상태가 완료인지 모니터링하여 페이지에 iframe이 포함되어 있는지 확인할 수 있습니다. ie6~8의 document.readyState는 iframe이 완료될 때까지 기다립니다. 이때 모든 리소스가 로드된 후에야 iframe이 완료됩니다. 그러나 테스트 후 페이지에 iframe이 없더라도 ReadyState가 완료되면 DOMContentLoaded 이벤트 대신 onload 이벤트가 실제로 트리거되는 것에 놀랐습니다.

다행히 IE에는 고유한 doScroll 메서드가 있습니다. 페이지 DOM이 로드되지 않은 경우 doScroll 메서드를 호출하면 오류가 보고되지 않을 때까지 주기적으로 doScroll을 호출하면 오류가 보고됩니다. , 이는 페이지 DOM이 로드되었음을 의미하며, 이 방법은 이미지 및 iframe의 콘텐츠가 로드되었는지 여부에 관계없이 유효합니다.

document.ready 이벤트에 여러 개의 js 파일이 바인딩된 경우 브라우저가 반복적으로 바인딩하는 것을 방지하고 순서대로 실행하기 위해 이벤트 큐 메커니즘을 도입하여 문제를 해결할 수 있습니다.

위는 document.ready 이벤트의 원리와 호환성 문제입니다. 아래는 실행 과정의 이해를 돕기 위해 함수 캡슐화 모드를 사용하여 주석으로 작성합니다. 무슨 문제라도 있으면 환영합니다. 조언을 해주세요.

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

//domReady의 이벤트 큐 저장
eventQueue = [];

//DOM 로드 여부 판단
isReady = false;

/ /Judge DOMReady 바인딩 여부
isBind = false;

/*Execute domReady()
*
*@param {function}
*@execute 이벤트 핸들러를 event queue , DOMContentLoaded 바인딩
* DOM 로딩이 완료되면 즉시 실행
*@caller
*/
function domReady(fn){
if (isReady) {
fn .call(window);
}
else{
eventQueue.push(fn);
};

bindReady();
};

/*domReady 이벤트 바인딩
*
*@param null
*@execute 최신 브라우저는 ie9를 포함하여 addEvListener를 통해 DOMContentLoaded를 바인딩합니다.
ie6-8은 doScroll을 판단하여 DOM이 로드되는지 여부를 결정합니다.
*@caller domReady()
*/
function binReady(){
if (isReady) return;
if (isBind) return;
isBind = true;

if (window.addEventListener) {
document.addEventListener('DOMContentLoaded',execFn,false);
}
else if (window.attachEvent) {
doScroll();
} ;
};

/*doScroll은 ie6-8의 DOM이 로드되는지 여부를 결정합니다
*
*@param null
*@execute doScroll은 DOM이 로드되는지 여부를 결정합니다
*@caller binReady()
*/
function doScroll(){
try{
document.documentElement.doScroll('left');
}
catch(error ) {
return setTimeout(doScroll,20);
};
execFn();
};

/*실행 이벤트 큐
*
*@ param null
*@execute 실행 대기열에서 이벤트 핸들러를 반복합니다.
*@caller binReady()
*/
function execFn(){
if (!isReady) {
isReady = true;
for (var i = 0; i < eventQueue.length; i ) {
eventQueue[i].call(window);
};
eventQueue = [];
};
};

//js 파일 1
domReady(function(){
...
});
//js 파일 2
domReady(function(){
...
});

//참고로 js가 비동기적으로 로드된 경우 domReady 메서드를 바인딩하지 마세요. 그렇지 않으면 함수가 바인딩되지 않습니다.
//비동기적으로 로드된 js가 다운로드되기 전에 DOMContentLoaded가 트리거되었기 때문에 addEventListener가 실행될 때 더 이상 수신 대기할 수 없습니다.

테스트 페이지: 두 개의 큰 이미지가 로드됩니다. Onload에서는 js를 실행하기 전에 이미지를 로드해야 합니다. DOMContentLoaded는 js를 실행하기 전에 DOM이 로드될 때까지 기다려야 합니다. Firebug를 열어 로딩 프로세스를 볼 수 있습니다. 각 테스트 전에 브라우저 캐시를 지워야 합니다.