집 >웹 프론트엔드 >JS 튜토리얼 >자바스크립트 프로그래밍 가능 스크립트 로딩 사용 예시에 대한 자세한 설명

자바스크립트 프로그래밍 가능 스크립트 로딩 사용 예시에 대한 자세한 설명

伊谢尔伦원래의: 2017-07-21 15:45:511519검색

프로그래밍 가능한 스크립트 로딩

3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그는 매우 간단하지만 일부 상황에서는 더 정교한 스크립트 로딩 방법이 필요합니다. 플래티넘 회원이나 특정 레벨에 도달한 플레이어 등 특정 기준을 충족하는 사용자에 대해서만 스크립트를 로드하고 싶을 수도 있고, 사용자가 활성화를 클릭할 때 채팅 위젯과 같은 기능만 로드하고 싶을 수도 있습니다. 그것.
1. 스크립트 직접 로드
다음과 유사한 코드를 사용하여 3f1c4e4b6b16bbbd69b2ee476dc4f83a

var head = document.getElementsByTagName(&#39;head&#39;)[0];
var script = document.createElement(&#39;script&#39;);
script.src = &#39;/js/feature.js&#39;;
head.appendChild(script);

잠깐만요. 스크립트 로드가 완료되었는지 어떻게 알 수 있나요? 이벤트를 트리거하기 위해 스크립트 자체에 일부 코드를 추가할 수 있지만 로드할 모든 스크립트에 대해 이러한 코드를 추가하는 것은 너무 성가신 일입니다. 또는 또 다른 상황이 있습니다. 즉, 타사 서버의 스크립트에 해당 코드를 추가하는 것이 불가능합니다. HTML5 사양은 콜백에 바인딩할 수 있는 onload 속성을 정의합니다.

script.onload = function() {
// 现在可以调用脚本里定义的函数了
};

그러나 IE8 및 이전 버전은 onload를 지원하지 않고 onreadystatechange를 지원합니다. 일부 브라우저에서는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 삽입할 때 일부 "초자연적인 이벤트"가 발생합니다. 그리고 우리는 아직 오류 처리에 관해 이야기하지도 않았습니다!
이러한 모든 문제를 피하려면 스크립트 로딩 라이브러리를 사용하는 것이 좋습니다.

yepnope의 조건부 로딩
yepnope은 간단하고 가벼운 스크립트 로딩 라이브러리입니다(압축된 간소화된 버전은 1.7KB에 불과합니다). 디자인 목표는 가장 일반적인 동적 스크립트 로딩 요구 사항을 성실하게 충족하는 것입니다.
yepnope의 가장 간단한 사용법은 스크립트를 로드하고 스크립트 실행이 완료되면 콜백을 반환하는 것입니다.

yepnope({
  load: &#39;oompaLoompas.js&#39;,
  callback: function() {
  console.log(&#39;oompa-Loompas ready!&#39;);
  }
});

아직도 무관심하신가요? 다음으로 우리는 yepnope를 사용하여 여러 스크립트를 병렬로 로드하고 주어진 순서대로 실행하겠습니다. 예를 들어 Backbone.js를 로드하려고 하는데 이 스크립트는 Underscore.js에 의존한다고 가정해 보겠습니다. 이를 위해 이 두 스크립트의 위치를 배열의 로드 매개변수로 제공하기만 하면 됩니다.

yepnope({
  load: [&#39;underscore.js&#39;, &#39;backbone.js&#39;],
  complete: function() {
  // 这里是Backbone 的业务逻辑
  }
});

여기에서는 콜백 대신 완료가 사용된다는 점에 유의하세요.

차이점은 콜백은 스크립트 로딩 목록의 리소스마다 실행되고, 전체 스크립트는 모든 스크립트가 로딩되었을 때만 실행된다는 점입니다. yepnope의 대표적인 기능은 조건부 로딩입니다. 테스트 매개변수가 주어지면 yepnope는 매개변수 값이 true인지 여부에 따라 다른 리소스를 로드합니다. 예를 들어, 사용자가 터치 스크린 장치를 사용하고 있는지 어느 정도 정확하게 판단할 수 있으며 그에 따라 다양한 스타일 시트와 스크립트를 로드할 수 있습니다.

yepnope({
  test: Modernizr.touch,
  yep: [&#39;touchStyles.css&#39;, &#39;touchApplication.js&#39;],
  nope: [&#39;mouseStyles.css&#39;, &#39;mouseApplication.js&#39;],
  complete: function() {
  // 不管是哪一种情况，应用程序均已就绪！
  }
});

단 몇 줄의 코드만으로 무대를 설정하고 사용자에게 액세스 장치에 따라 완전히 다른 경험을 제공할 수 있습니다. 물론 모든 조건부 로드에 yep(yes) 및 nope(no) 테스트 결과가 모두 필요한 것은 아닙니다. yepnope의 가장 일반적인 용도 중 하나는 이전 브라우저에서 누락된 기능을 보완하기 위해 shim 스크립트를 로드하는 것입니다.

yepnope({
  test: window.json,nope: [&#39;json2.js&#39;],
  complete: function() {
  // 现在可以放心地用JSON 了
  }
});

yepnope를 사용한 후 페이지는 다음과 같은 아름다운 마크업 구조가 되어야 합니다.

<html>
<head>
  <!-- metadata and stylesheets go here -->
  <script src="headScripts.js"></scripts>
  <script src="deferredScripts.js" defer></script>
</head>
<body>
  <!-- content goes here -->
</body>
</html>

친숙해 보이죠? 이 구조는 defer 속성을 논의하는 섹션에 제공된 것과 동일합니다. 유일한 차이점은 여기 스크립트 파일 중 하나가 yepnope.js(아마도 deferredScripts.js 위에)와 연결되어 있다는 것입니다. 조건부로 다시 로드되는 스크립트(브라우저에 shim 스크립트가 필요하기 때문에)와 동적으로 로드하려는 스크립트(사용자 작업에 대한 응답)를 독립적으로 로드할 수 있습니다. 결과는 더 작은 deferredScripts.js가 됩니다.

위 내용은 자바스크립트 프로그래밍 가능 스크립트 로딩 사용 예시에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：클래식 및 비차단