Javascript의 Require.js/AMD 모듈러 로딩 사용 사례 요약-JS 튜토리얼-php.cn

Require.js/AMD Modular Loading

개발자는 스크립트 로더를 사용하여 혼란스럽고 풍부한 스크립트 애플리케이션을 보다 질서있게 만들고 싶어하며 Require.js가 그러한 옵션입니다. Require.js는 AMD 기술과 자동으로 작동하여 가장 복잡한 스크립트 종속성 그래프도 매끄럽게 만드는 강력한 툴킷입니다.
이제 동일한 이름의 Require.js 함수를 사용한 간단한 스크립트 로딩 예제를 살펴보겠습니다.

require([&#39;moment&#39;], function(moment) {
  console.log(moment().format(&#39;dddd&#39;)); // 星期几
});

로그인 후 복사

require 함수는 모듈 이름 배열을 받아들이고 이러한 모든 스크립트 모듈을 병렬로 로드합니다. yepnope와 달리 Require.js는 대상 스크립트가 순서대로 실행된다는 것을 보장하지 않고 실행 순서가 해당 종속성 요구 사항을 충족할 수 있도록 보장하지만 전제는 이러한 스크립트의 정의가 AMD(Asynchronous Module Definition, Asynchronous Module Definition, 비동기 모듈 정의) 사양.

Case 1: JavaScript 파일 로드

 <script src="./js/require.js"></script> 
<script> 
  require(["./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

로그인 후 복사

Case 1에 표시된 것처럼 두 개의 JavaScript 파일 a.js 및 b.js가 있으며 각각 myFunctionA 및 myFunctionB라는 두 가지 메서드를 정의합니다. RequireJS를 사용하여 이 두 파일을 로드하면 함수 부분의 코드가 이 두 파일의 메서드를 참조할 수 있습니다.

require 메소드의 문자열 배열 매개변수는 문자열이 ".js"로 끝나거나 "/"로 시작하거나 URL인 경우 다른 값을 허용할 수 있습니다. RequireJS는 사용자가 JavaScript 파일을 직접 로드하고 있다고 생각합니다. , 그렇지 않은 경우 문자열이 "my/module"과 유사한 경우 이를 모듈로 간주하고 사용자가 구성한 baseUrl 및 경로와 함께 해당 모듈이 있는 JavaScript 파일을 로드합니다. 구성부분은 나중에 자세히 소개하겠습니다.

여기서 RequireJS는 페이지가 로드된 후 myFunctionA 및 myFunctionB가 기본적으로 실행되어야 한다고 보장하지 않는다는 점을 지적해야 합니다. 페이지가 로드된 후 스크립트가 실행되도록 해야 하는 경우 RequireJS는 독립적인 기능을 제공합니다. 이 모듈을 다운로드하려면 RequireJS 공식 웹사이트로 이동해야 하는 domReady 모듈은 RequireJS에 포함되어 있지 않습니다. domReady 모듈을 사용하면 사례 1의 코드를 약간 수정하고 domReady에 대한 종속성을 추가할 수 있습니다.

Case 2: 페이지 로딩 후 JavaScript 실행

 <script src="./js/require.js"></script> 
<script> 
  require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

로그인 후 복사

Case 2의 코드를 실행한 후 a.js와 b.js에 RequireJS가 삽입되는 것을 Firebug를 통해 확인할 수 있습니다. 현재 페이지에는 JavaScript 파일을 비동기적으로 다운로드하는 데 사용되는