JavaScript 파일의 동적 로드 JavaScript 파일의 동적 로드는 구성 요소 및 모듈의 주문형 초기화를 위한 편리한 솔루션을 제공합니다. 이 기사에서는 널리 사용되는 JavaScript 라이브러리가 이를 수행하는 방법을 살펴보고 로딩 이벤트를 효과적으로 처리하기 위한 강력한 기술을 소개합니다. 동적 로딩 방법 동적 JavaScript 파일 로딩에는 두 가지 기본 방법을 사용할 수 있습니다. eval()을 사용한 AJAX: 이 접근 방식에는 AJAX 호출을 통해 스크립트를 검색한 다음 eval()을 사용하여 평가하는 방법이 포함됩니다. 그러나 이 방법은 도메인 간 제한으로 인해 제한되며 보안 위험이 있습니다. 스크립트 요소 추가: 요소를 스크립트의 URL과 함께 HTML에 추가하면 브라우저가 자동으로 스크립트를 구문 분석하고 실행합니다. 이 방법은 도메인 간 호환이 가능하며 깔끔한 로딩 프로세스를 보장합니다.</li> </ol> <h2>로딩 이벤트 처리</h2> <p>비동기적으로 로드된 스크립트의 로딩 이벤트를 처리하기 위해 콜백 기반 접근 방식이 일반적으로 사용됩니다. .</p> <p>다음 단계에서는 강력한 접근 방식을 설명합니다.</p> <ol> <li><script> 요소를 추가하고 콜백 핸들러를 Readystatechange 및 onload 이벤트에 바인딩합니다.</li> <li>문서 헤드에 스크립트 요소를 추가하여 스크립트 로딩을 시작합니다.</li> <li>스크립트가 실행될 때 실행될 콜백 함수를 정의합니다. 로드됩니다.</li> <li>스크립트 URL과 콜백 함수를 loadScript 함수에 전달합니다.</li> </ol> <p>예를 들어 다음 코드 조각은 이 접근 방식을 보여줍니다.</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>function loadScript(url, callback) { var head = document.getElementsByTagName("head")[0]; var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; script.onreadystatechange = callback; script.onload = callback; head.appendChild(script); }</pre><div class="contentsignin">로그인 후 복사</div></div> <p>이 기술을 사용하면 로드된 스크립트에 의존하는 코드는 스크립트가 완전히 로드된 후에만 실행됩니다.</p> <h2>jQuery의 단순화된 접근 방식</h2> <p>jQuery는 단순화하기 위해 $.getScript()라는 편리한 메서드를 제공합니다. 동적 스크립트 로딩 및 로딩 이벤트 처리:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre>$.getScript("my_lovely_script.js", function() { alert("Script loaded and executed."); // Code can access variables and functions defined in the loaded script here });</pre><div class="contentsignin">로그인 후 복사</div></div>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
