RequireJS 라이브러리를 사용하여 JavaScript 모듈을 로드하는 방법에 대한 예제 튜토리얼

스크립트 태그를 통한 js의 기본 로드 방법은 동기식입니다. 즉, 첫 번째 스크립트 태그의 js가 로드된 후 두 번째 스크립트 태그가 로드되기 시작하는 식으로 모든 js 파일이 로드될 때까지 계속됩니다. 그리고 js를 로드하는 동안 스크립트 순서를 통해 js의 종속성을 보장해야 하며, 이는 사용자 경험에 큰 영향을 미칩니다. 이를 기반으로 js 로드 및 언로드 문제에 대한 많은 솔루션이 나타났습니다. require.js도 그 중 하나입니다.

requirejs가 로드하는 모듈은 일반적으로 AMD 표준을 준수하는 모듈입니다. 즉, 메소드와 변수를 노출하는 모듈을 반환하기 위해 정의 및 ruturn으로 정의됩니다. requirejs도 AMD 표준을 충족하는 모듈을 로드할 수 있지만 더 귀찮습니다. 이번에는 관련되지 않습니다.

js main 로드 요구에는 다음 측면이 포함됩니다.

script 태그 data-main 속성은 requirejs, async="true"(ie가 아님) 및 defer(ie)에 의해 로드된 항목 모듈을 선언합니다. 태그는 비동기 로드를 나타냅니다.

require.config 구성 모듈에 해당하는 경로

require 종속성 선언

html 데모

<script src ="js/require.js" defer async="true" data-main="js/main" >
 
<!--给出requirejs路径，声明为异步加载，指定入口模块为
 
main.js（可省略.js）-->

main.js

require.config({
  //声明模块的位置
  paths: {
    "jquery":"libs/jquery"
    "login" : "libs/login"
  }
  //或使用baseUrl指定所有模块的路径
  baseUrl: "js/libs"
});
//使用require加载模块，第一个参数为数组，即要加载的模块，将按数组顺序加载；第二个为回调函数，在全部加载完成后执行。
require(['jquery','login'],function($,Login){
  alert("jquery and login module load success!");
  Login.do_login();
  //some else
});

amd의 로그인 모듈 정의를 준수합니다

//依赖jquery的定义
 define(['jquery'],function($){
   // some definations
  function do_login(){
    $.post('/sessions/create',{uname:$("#uname").val(),
         password:$("#password").val()},function(data){
     //some 
   });
   return {do_login:do_login};
  } 
 });
 
//不依赖其他模块的定义
define(function(){
 //some definations
 return {xx:xx};
});

Rails는 js 로더를 적용하지 않습니다. 한편, 새로운 버전의 Rails 자산 파이프는 모든 js 파일을 하나의 js 파일로 패키징합니다. 다수의 js 로딩 상태가 아닌 반면, 터보링크는 리뷰가 혼합된 소위 pjax 기술을 사용합니다. 기본 링크는 html의 bod 부분만 가져오고, head 부분은 가져옵니다. 웹사이트가 처음 열릴 때만 js 로딩이 수행되도록 변경되지 않았습니다.

사례 1: JavaScript 파일 로드

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

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

여기서 짚고 넘어가야 할 점은 RequireJS는 기본적으로 페이지가 로드된 후 myFunctionA 및 myFunctionB가 실행되어야 한다고 보장하지 않는다는 점입니다. 페이지가 로드된 후 스크립트가 실행되는지 확인해야 하는 경우, RequireJS는 독립적인 domReady 모듈을 제공합니다. 이 모듈을 다운로드하려면 RequireJS 공식 웹사이트로 이동해야 합니다. 이 모듈은 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에 RequireJS가 삽입되는 것을 Firebug를 통해 확인할 수 있습니다. 현재 페이지에서는 JavaScript 파일을 비동기적으로 다운로드하는 데 사용되는 3f1c4e4b6b16bbbd69b2ee476dc4f83a 태그를 각각 선언합니다. 비동기 속성은 현재 대부분의 브라우저에서 지원됩니다. 이는 27835793f4768f4164d1421d99e293bc 태그의 js 파일이 다른 페이지 콘텐츠의 다운로드를 차단하지 않음을 나타냅니다.

사례 3: RequireJS 삽입 3f1c4e4b6b16bbbd69b2ee476dc4f83a

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

RequireJS를 사용하여 JavaScript 모듈 정의

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

CommonJS에 대한 AMD 사양에 명시된 대로 JavaScript 모듈 정의는 정의 메소드를 통해 수행됩니다.

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

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

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

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

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

사례 6: 메인 프로그램

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 
});

학생 모듈과 수업 모듈은 독립된 모듈입니다. 다음으로, 이 모듈은 학생 모듈과 수업 모듈에 의존하므로 주요 프로그램 부분의 로직도 패키징할 수 있습니다.

사례 7: 학생 및 수업 모듈에 의존하는 관리자 모듈,manager.js

define(["js/student", "js/class"], function(student, clz){ 
 return { 
  addNewStudent: function(name, gender){ 
  clz.addToClass(student.createStudent(name, gender)); 
    }, 
  getMyClassSize: function(){ 
  return clz.getClassSize(); 
  } 
   }; 
 });

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

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

위 코드를 통해 예를 들어, 우리는 모듈을 작성하는 방법, 이 모듈을 사용하는 방법, 모듈 간의 종속성을 정의하는 방법을 명확하게 이해했습니다. 여전히 기억해야 할 몇 가지 사용 팁이 있습니다:

AMD 사양에 명시된 대로 모듈 ID를 제공하지 마십시오. 제공되는 경우 모듈의 이식성에 영향을 미칩니다. RequireJS를 구현하면 파일 위치가 변경되어 ID를 수동으로 수정해야 합니다.

각 JavaScript 파일은 하나의 모듈만 정의합니다. 모듈 이름과 파일 경로의 검색 알고리즘에 따라 이 방법이 최적화 프로그램에 의해 최적화됩니다. 모듈의 순환 종속성을 피하세요. 피할 수 없는 경우 모듈의 "require" 모듈에 대한 종속성을 추가하고

require(”dependencyModuleName”)

:

을 사용하여 코드에서 RequireJS를 직접 구성할 수 있습니다.

前面的介绍中，我们似乎忽略了一个基本问题，模块名字是怎么来的？当我在 require 一个模块时，这个模块是如何映射到具体的 JavaScript 文件上去？这就涉及到如何配置 RequireJS。

最简化的加载 RequireJS 的方式如案例2 所示，在这种情况下，我们没有指定一个 baseUrl 和 paths 给 RequireJS，如果通过如案例10 所示方式，则 data-main 指定了一个在当前 index.html 目录并行的文件夹下的 /js/main.js 作为程序入口，而 /js 目录也将作为 baseUrl 在其他模块定义时候使用。

案例九：载入 require.js

<script data-main="js/main" src="scripts/require.js"></script>

因此，我们前面示例中的所有模块依赖，都可以去掉”js/”，直接写 ”student”， ”class”，”manager” 等。 一种更为直接的方式显示指定 baseUrl 和 paths 就是利用 require.config 来设置这些参数。如案例十 所示。

案例十. 配置 RequireJS

<script type="text/javascript" src="./js/require.js"></script> 
<script type="text/javascript"> 
require.config({ 
 baseUrl: "./js", 
 paths: { 
   "some": "some/v1"
 }, 
waitSeconds: 10 
}); 
require( ["some/module", "my/module", "./js/a.js"], 
 function(someModule,  myModule) {} 
); 
</script>

baseUrl指明的是所有模块的 base URL，比如”my/module”所加载的 script实际上就是 /js/my/module.js。注意，以 .js 结尾的文件加载时不会使用该 baseUrl，它们仍然会使用当前 index.html所在的相对路径来加载，所以仍然要加上”./js/”。如果 baseUrl没有指定，那么就会使用 data-main中指定的路径。

paths 中定义的路径是用于替换模块中的路径，如上例中的 some/module 具体的 JavaScript 文件路径是 /js/some/v1/module.js 。 waitSeconds 是指定最多花多长等待时间来加载一个 JavaScript 文件，用户不指定的情况下默认为 7 秒。

另外一个重要的配置是 packages，它可以指定其他符合 CommonJS AMD 规范的目录结构，由此带来了丰富的扩展性。如 Dojo、jQuery 等的模块也可以通过该配置来让 RequireJS 加载。

其他可配置的选项还包括 locale、context、deps、callback等，有兴趣的读者可以在 RequireJS 的官方网站查阅相关文档。

更多使用RequireJS库加载JavaScript模块的实例教程相关文章请关注PHP中文网！