여러 자바 스크립트 파일에서 여러 함수로드

Question

페이지가로드 될 때로드 할 여러 외부 JavaScript 파일 내에 여러 함수가 있습니다. "body onLoad"를 사용하면 한 함수가 항상 다른 함수를 대체합니다. 각 파일에서 각 기능을로드하고 페이지에서로드 할 수 있도록 구성하는 방법은 무엇입니까?

"document.getElementById ("clockModule "). innerHTML ="을 사용하여 특정 div에 데이터를 출력 할 때마다 두 개의 함수 (한 번에 2 개만 있음)를 하나의 javascript 파일에 넣음으로써 파일 결합을 시도했습니다. ID를 입력하면 데이터가 하나의 ID로 출력되고 서로 겹칩니다.

Answer 1

window.onload = function(){ ... }을 수행 할 때 새 값을 window.onload에 할당하고 이전에 할당 된 값을 대체합니다. 즉, 하나의 가치 만있을 수 있습니다. 같은 방식으로 innerHTML은 요소의 전체 내용을 바꿉니다.

대신 이벤트 핸들러를 연결하고 createElement 및 appendChild을 사용하여 DOM 노드를 만들고 연결하는 것을 고려하려면 을 사용하십시오.

Answer 2

개발하는 동안 몇 개의 개별 .js 파일을로드해도됩니다. 그러나 프로덕션에 게시 할 준비가되면 성능 목적으로 모든 .js 파일을 하나의 파일로 롤백해야합니다 (어쩌면 심지어 minify). 어쨌든 나는 항상 DOMContentLoaded 리스너를 사용합니다 :

document.addEventListener('DOMContentLoaded', function() { 
    //do stuff in here. 
    if(window.location.pathname === '/about'){ 
    //do page specific stuff in here. 
    } 
}, false);