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

스크립트 태그를 통한 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([&#39;jquery&#39;,&#39;login&#39;],function($,Login){
  alert("jquery and login module load success!");
  Login.do_login();
  //some else
});

로그인 후 복사

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

//依赖jquery的定义
 define([&#39;jquery&#39;],function($){
   // some definations
  function do_login(){
    $.post(&#39;/sessions/create&#39;,{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 파일을 비동기적으로 다운로드하는 데 사용되는