Javascript의 Require.js/AMD 모듈러 로딩 사용 사례 요약

Require.js/AMD Modular Loading

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

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

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 파일을 비동기적으로 다운로드하는 데 사용되는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그가 각각 선언됩니다. 비동기 속성은 현재 대부분의 브라우저에서 지원됩니다. 이는 27835793f4768f4164d1421d99e293bc 태그의 js 파일이 다른 페이지 콘텐츠의 다운로드를 차단하지 않음을 나타냅니다.

사례 3: RequireJS 모듈 이름으로 삽입된 3f1c4e4b6b16bbbd69b2ee476dc4f83a,
모듈 종속성 목록,

해당 종속 모듈 로드가 끝날 때 트리거되는 콜백.

• RequireJS를 사용하여 JavaScript 모듈 정의

여기의 JavaScript 모듈은 전역 변수에 액세스할 필요가 없다는 점에서 기존 JavaScript 코드와 다릅니다. 모듈식 설계를 사용하면 JavaScript 코드가 "전역 변수"에 액세스해야 할 때 종속성을 통해 모듈의 구현 본문에 이러한 "전역 변수"를 매개변수로 전달할 수 있으므로 구현에서 전역 변수에 액세스하거나 선언할 필요가 없습니다. 크고 복잡한 네임스페이스 관리를 효과적으로 방지합니다.
• CommonJS의 AMD 사양에 명시된 대로 JavaScript 모듈 정의는 정의 메서드를 통해 수행됩니다.

  먼저 간단한 예제를 살펴보겠습니다. 이 예제에서는 학생 모듈과 클래스 모듈을 정의하여 메인 프로그램에 학생 개체가 생성되고 클래스에 배치됩니다.

• 사례 4: 학생 모듈, Student.js

<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" 
 data-requiremodule="js/a.js" src="js/a.js"></script>

사례 5: 클래스 모듈, class.js

define(function(){ 
   return { 
    createStudent: function(name, gender){ 
       return { 
         name: name, 
         gender: gender 
       }; 
    } 
   }; 
 });

사례 6: 메인 프로그램

 define(function() { 
 var allStudents = []; 
    return { 
      classID: "001", 
      department: "computer", 
      addToClass: function(student) { 
      allStudents.push(student); 
      }, 
      getClassSize: function() { 
      return allStudents.length; 
      } 
    }; 
   } 
 );

학생 모듈과 수업 모듈은 독립적인 모듈입니다. 다음으로, 이 모듈은 학생과 수업 모듈에 의존하므로 주요 프로그램 부분의 논리도 가능합니다. 포장.

사례 7: 학생 및 수업 모듈의 관리자 모듈에 종속됨,manager.js

 require(["js/student", "js/class"], function(student, clz) { 
   clz.addToClass(student.createStudent("Jack", "male")); 
   clz.addToClass(student.createStudent("Rose", "female")); 
   console.log(clz.getClassSize()); // 输出 2 
 });

사례 8: 새로운 메인 프로그램

require(["js/manager"], function(manager) { 
   manager.addNewStudent("Jack", "male"); 
   manager.addNewStudent("Rose", "female"); 
   console.log(manager.getMyClassSize());// 输出 2 
 });

通过上面的代码示例，我们已经清楚的了解了如何写一个模块，这个模块如何被使用，模块间的依赖关系如何定义。

其实要想让自己的站点更快捷，可以异步加载那些暂时用不到的脚本。为此最简单的做法是审慎地使用defer 属性和async 属性。如果要求根据条件来加载脚本，请考虑像yepnope 这样的脚本加载器。如果站点存在大量相互依赖的脚本，请考虑Require.js。选择最适合任务的工具，然后使用它，享受它带来的便捷。

위 내용은 Javascript의 Require.js/AMD 모듈러 로딩 사용 사례 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!