JS require.js 모듈식 tool_javascript 기술에 대한 첫 번째 접촉-JS 튜토리얼-php.cn

JS require.js 모듈식 tool_javascript 기술에 대한 첫 번째 접촉

WBOY

풀어 주다： 2016-05-16 15:04:59

원래의

1616명이 탐색했습니다.

웹사이트의 기능이 점차 풍부해지면서 웹페이지의 js는 점점 더 복잡해지고 비대해집니다. 스크립트 태그를 통해 js 파일을 하나씩 가져오는 기존 방식은 더 이상 현재의 인터넷 개발 모델을 충족할 수 없습니다. 협업, 모듈 재사용, 단위 테스트 등과 같은 일련의 복잡한 요구 사항이 필요합니다.

RequireJS는 매우 작은 JavaScript 모듈 로딩 프레임워크이자 AMD 사양의 최고의 구현자 중 하나입니다. RequireJS의 최신 버전은 14K로만 압축되어 매우 가볍습니다. 다른 프레임워크와도 작동할 수 있습니다. RequireJS를 사용하면 프런트엔드 코드의 품질이 확실히 향상됩니다.

requirejs는 어떤 이점을 제공하나요?

requirejs의 공식 설명:

　RequireJS는 브라우저 내 사용에 최적화되어 있지만 Rhino 및 Node와 같은 다른 JavaScript 환경에서도 사용할 수 있습니다. RequireJS와 같은 모듈식 스크립트 로더를 사용하면 속도와 품질이 향상됩니다. 코드를 입력하세요.

대략적인 의미:

브라우저에서 js 파일에 대한 모듈 로더로 사용할 수 있으며, Node 및 Rhino 환경에서도 사용할 수 있습니다. 이 단락에서는 requirejs "모듈형 로딩"의 기본 기능을 설명합니다. 다음 장에서 하나씩 설명하겠습니다

먼저 일반적인 시나리오를 살펴보고 예제를 통해 requirejs를 사용하는 방법을 설명하겠습니다

일반적인 글쓰기 방법
index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="a.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

로그인 후 복사

a.js:

function fun1(){
 alert("it works");
}
 
fun1();

로그인 후 복사

이렇게 쓰는 걸 선호하실 수도 있겠네요

(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})()

로그인 후 복사

두 번째 방법은 전역 변수의 오염을 방지하기 위해 블록 범위를 사용하여 함수를 선언하는 것입니다. 위의 두 예제를 실행하면 경고가 실행될 때 html이 나타나는지 알 수 없습니다. 내용이 비어 있습니다. 즉, body은 확인을 클릭한 후에만 나타납니다. 이는 JS가 브라우저 렌더링을 차단한 결과입니다.

js 작성 방법 필요

물론 js를 다운로드하려면 먼저 requirejs 웹사이트로 이동해야 합니다. -> index.html:

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="require.js"></script>
  <script type="text/javascript">
   require(["a"]);
  </script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

로그인 후 복사

a.js:

define(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})

로그인 후 복사

브라우저는 올바르게 실행되고 있음을 나타내는 "작동합니다"라는 메시지를 표시하지만, 이번에는 브라우저가 비어 있지 않습니다. 지금까지 우리는 requirejs에 다음과 같은 장점:

1. js 로딩으로 인해 페이지 렌더링이 차단되는 것을 방지

2. 다음과 같은 추악한 장면을 방지하려면 프로그램 호출을 사용하여 js를 로드하세요

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

로그인 후 복사

이상은 이 글의 전체 내용입니다. require.js 모듈러 도구를 이해하는 데 도움이 되기를 바랍니다.