프로그래밍 가능한 스크립트 로딩 태그는 매우 간단하지만 일부 상황에서는 더 정교한 스크립트 로딩 방법이 필요합니다. 플래티넘 회원이나 특정 레벨에 도달한 플레이어 등 특정 기준을 충족하는 사용자에 대해서만 스크립트를 로드하고 싶을 수도 있고, 사용자가 활성화를 클릭할 때 채팅 위젯과 같은 기능만 로드하고 싶을 수도 있습니다. 그것. <br><span style="color: rgb(0, 0, 0);"><strong>1. 스크립트 직접 로드</strong></span><br>다음과 유사한 코드를 사용하여 <script> <br></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = '/js/feature.js'; head.appendChild(script);</pre><div class="contentsignin">로그인 후 복사</div></div><p>잠깐만요. 스크립트 로드가 완료되었는지 어떻게 알 수 있나요? 이벤트를 트리거하기 위해 스크립트 자체에 일부 코드를 추가할 수 있지만 로드할 모든 스크립트에 대해 이러한 코드를 추가하는 것은 너무 성가신 일입니다. 또는 또 다른 상황이 있습니다. 즉, 타사 서버의 스크립트에 해당 코드를 추가하는 것이 불가능합니다. HTML5 사양은 콜백에 바인딩할 수 있는 onload 속성을 정의합니다. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">script.onload = function() { // 现在可以调用脚本里定义的函数了 };</pre><div class="contentsignin">로그인 후 복사</div></div><p>그러나 IE8 및 이전 버전은 onload를 지원하지 않고 onreadystatechange를 지원합니다. 일부 브라우저에서는 <script> 태그를 삽입할 때 일부 "초자연적인 이벤트"가 발생합니다. 그리고 우리는 아직 오류 처리에 관해 이야기하지도 않았습니다! <br/>이러한 모든 문제를 피하려면 스크립트 로딩 라이브러리를 사용하는 것이 좋습니다. </p><p><span style="color: #000000"><strong>yepnope의 조건부 로딩</strong><br/></span>yepnope은 간단하고 가벼운 스크립트 로딩 라이브러리입니다(압축된 간소화된 버전은 1.7KB에 불과합니다). 디자인 목표는 가장 일반적인 동적 스크립트 로딩 요구 사항을 성실하게 충족하는 것입니다. <br/>yepnope의 가장 간단한 사용법은 스크립트를 로드하고 스크립트 실행이 완료되면 콜백을 반환하는 것입니다. <br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: 'oompaLoompas.js', callback: function() { console.log('oompa-Loompas ready!'); } });</pre><div class="contentsignin">로그인 후 복사</div></div><p>아직도 무관심하신가요? 다음으로 우리는 yepnope를 사용하여 여러 스크립트를 병렬로 로드하고 주어진 순서대로 실행하겠습니다. 예를 들어 Backbone.js를 로드하려고 하는데 이 스크립트는 Underscore.js에 의존한다고 가정해 보겠습니다. 이를 위해 이 두 스크립트의 위치를 배열의 로드 매개변수로 제공하기만 하면 됩니다. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ load: ['underscore.js', 'backbone.js'], complete: function() { // 这里是Backbone 的业务逻辑 } });</pre><div class="contentsignin">로그인 후 복사</div></div><p>여기에서는 콜백 대신 완료가 사용된다는 점에 유의하세요. </p><p>차이점은 콜백은 스크립트 로딩 목록의 리소스마다 실행되고, 전체 스크립트는 모든 스크립트가 로딩되었을 때만 실행된다는 점입니다. yepnope의 대표적인 기능은 조건부 로딩입니다. 테스트 매개변수가 주어지면 yepnope는 매개변수 값이 true인지 여부에 따라 다른 리소스를 로드합니다. 예를 들어, 사용자가 터치 스크린 장치를 사용하고 있는지 어느 정도 정확하게 판단할 수 있으며 그에 따라 다양한 스타일 시트와 스크립트를 로드할 수 있습니다. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: Modernizr.touch, yep: ['touchStyles.css', 'touchApplication.js'], nope: ['mouseStyles.css', 'mouseApplication.js'], complete: function() { // 不管是哪一种情况，应用程序均已就绪！ } });</pre><div class="contentsignin">로그인 후 복사</div></div><p>단 몇 줄의 코드만으로 무대를 설정하고 사용자에게 액세스 장치에 따라 완전히 다른 경험을 제공할 수 있습니다. 물론 모든 조건부 로드에 yep(yes) 및 nope(no) 테스트 결과가 모두 필요한 것은 아닙니다. yepnope의 가장 일반적인 용도 중 하나는 이전 브라우저에서 누락된 기능을 보완하기 위해 shim 스크립트를 로드하는 것입니다. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;">yepnope({ test: window.json,nope: ['json2.js'], complete: function() { // 现在可以放心地用JSON 了 } });</pre><div class="contentsignin">로그인 후 복사</div></div><p>yepnope를 사용한 후 페이지는 다음과 같은 아름다운 마크업 구조가 되어야 합니다. <br/></p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:xhtml;"><html> <head> <!-- metadata and stylesheets go here --> <script src="headScripts.js"></scripts> <script src="deferredScripts.js" defer>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
