RequireJS에 대한 간략한 소개와 사용 방법-JS 튜토리얼-php.cn

RequireJS에 대한 간략한 소개와 사용 방법

高洛峰

풀어 주다： 2016-12-09 15:37:35

원래의

1135명이 탐색했습니다.

RequireJS 소개

RequireJS는 JavaScript 모듈 로더입니다. 브라우저에서 사용하기 좋습니다. RequireJS를 사용하여 모듈식 스크립트를 로드하면 코드의 로딩 속도와 품질이 향상됩니다.

호환성

RequireJS에 대한 간략한 소개와 사용 방법

장점

js 파일의 비동기 로딩을 달성하여 웹페이지 응답 손실 방지

관리 모듈 서로 간의 종속성은 코드 작성 및 유지 관리를 용이하게 합니다

빠르게 시작하기

1단계

require.js 소개

require()의 종속성은 다음과 같습니다. 배열, 종속성이 하나만 있어도 배열을 사용하여 정의해야 합니다

두 번째 매개 변수는 콜백 함수(콜백)로 모듈 간의 종속성을 해결하는 데 사용할 수 있습니다

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require(["js/a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

로그인 후 복사

2단계

require.config를 사용하여 모듈 로딩 위치를 구성합니다.

고정된 위치가 비교적 길면 다음을 사용할 수 있습니다. baseUrl: "js ", 그러면

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require.config({
        paths : {
          "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
          "a" : "js/a"       
        }
      });
 
      require(["jquery", "a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

로그인 후 복사

3단계

require.config 구성에 js를 작성할 필요가 없습니다. 2단계에서 반복적으로 나타나는데, 각 페이지에 구성을 추가하면 잘 되지 않습니다. requirejs는 "마스터 데이터"라는 기능을 제공합니다

main.js를 만들고 2단계의 require.config를 넣어주세요. main.js 중간

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

로그인 후 복사

4단계

require를 통해 로드된 모듈은 일반적으로 AMD 사양을 준수해야 합니다. 즉, 정의를 사용합니다. 모듈을 선언해야 하지만 일부는 AMD 표준이 아닌 js를 로드해야 하는 경우도 있습니다. 그런 다음 다른 함수를 사용해야 합니다: shim

require.config({
  shim: {
    "underscore" : {
      exports : "_";
    },
    "jquery.form" : ["jquery"]
  }
});
require(["jquery", "jquery.form"], function($){
  $(function(){
    $("#form").ajaxSubmit({...});
  })
});

로그인 후 복사