몇 가지 DOMContentLoaded 이벤트가있는 눈에 잘 띄지 않는 평범한 자바 스크립트

Question

아마도 어리석은 질문 일지 모르지만 나는 JavaScript와 매우 혼동 스럽습니다. 최대한 눈에 거슬리는 자바 스크립트로 코드 조직 this을 따르고 있습니다. Ruby on Rails에서 Google Maps를 사용하는 웹 사이트를 만듭니다.

내 시나리오 : 다른 페이지에서 몇 가지 작업을 수행하는 JavaScript 스크립트를 시작해야하는 정말 큰 웹 사이트가 있다고 가정합니다.

문제는 사용자가 방문하는 페이지에 관계없이 내 웹 사이트의 JavaScript 코드를 모두 사용자 브라우저에 추가해야한다는 것입니다. 예를 들어, 막 JavaScript 코드를 사용하는 페이지 A와 작은 JavaScript 코드를 사용하는 페이지 B가 있다고 가정 해 봅시다. 내가 이해하는 한, 페이지 B에서 사용자는 모든 JavaScript 코드 (즉, 페이지 A와 B 모두)를 검색해야합니다. 그것은 약간 비실용적이지 않습니까?

두 페이지 모두에 대해 JavaScript는 document.addEventListener("DOMContentLoaded", function, false); 함수에 의해 시작됩니다. 그러나 페이지 A의 기능은 "pageA"라는 div (js 스크립트를 통해 요소를 수정하거나 요소를 추가하기 위해 참조로 사용함)가 있다고 가정하며, 마찬가지로 페이지 B의 기능은 " pageB ". 따라서 페이지 B에있을 때 "pageA"요소가 없다는 오류가 발생합니다. 어떻게 피할 수 있습니까?

모든 단일 페이지에 대해 전체 JavaScript 코드 (모든 페이지)를 사용자에게로드해야한다는 점을 감안할 때 어떻게 시작할 수 있습니까? 즉, 사용자가 페이지를로드 할 때 즉시 시작해야합니다. 이벤트가 발생합니다.) 이러한 오류가없는 특정 JavaScript 코드 페이지? 나는 정말로 혼란 스럽다!

매우 빠른 응답 thanx들! 하지만 js 코드 전체를 하나의 단일 파일로 작성한다고 말한 적은 없습니다. 대신 나는 RoR의 조직을 사용합니다! (btw는 모든 파일을 하나의 단일 파일로 결합합니다). 내 문제를 명확히하기 위해 다른 파일에서 페이지 A의 이벤트를 시작하고 페이지 B의 이벤트 (또는 C 등 ..)를 시작합니다. DOMContentLoaded 이벤트가 발생하면 코드가 실행됩니다. 그러나 사용자가 페이지 B 에있을 때 페이지 A에 대한 이벤트를 실행하고 싶지 않습니다. 또는 마찬가지로 페이지 B에 대한 js 만로드하려고합니다 (따라서 페이지 A에 대한 이벤트가 발생하지 않도록). 어떻게해야합니까?

추신 : 더 나은 제목을 생각한다면 자유롭게 제안하십시오!

Answer 1

자바 스크립트 코드를 하나의 파일에 보관하면 사용자가 웹 사이트의 첫 페이지를 요청할 때 한 번만로드해야합니다 (그리고 한 번 컴파일해야합니다 (this 참조). 그런 다음 브라우저는 캐싱을 허용하지 않는 한 캐시 된 사본을 사용합니다 (웹 서버의 잘못된 구성이 캐시를 수행 할 수 있음).

당신은 (JQuery와) 같은 것을 할 때 :

$('#nosuchid').something(); 

또는 예를

$('.nosuchclass').each(function(i, el) { ... }); 

마크 업에 일치하는 요소가없는 경우 오류가 발생하지 않고 효과가 없습니다. 예를 들어 document.getElementById()을 사용하는 경우 요소가 일치하지 않으면 null을 반환하므로 해당 사례를 처리해야합니다. 제대로하면 오류가 발생하지 않을 것입니다.

상상할 수 있듯이 건너 뛴 코드는 실행하는 데 시간이 필요하지 않으므로 성능 문제도 기대할 필요가 없습니다.