JS require.js 모듈러 도구에 대한 첫 번째 접촉-JS 튜토리얼-php.cn

JS require.js 모듈러 도구에 대한 첫 번째 접촉

高洛峰

풀어 주다： 2016-12-28 14:22:52

원래의

1441명이 탐색했습니다.

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

第一次接触JS require.js模块化工具

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

requirejs는 어떤 이점을 제공합니까?

requirejs에 대한 공식 설명:

　RequireJS는 JavaScript 파일 및 모듈 로더로 브라우저 내 사용에 최적화되어 있습니다. Rhino 및 Node와 같은 다른 JavaScript 환경에서 사용할 수 있습니다. RequireJS와 같은 모듈식 스크립트 로더를 사용하면 코드의 속도와 품질이 향상되며, Node 및 Rhino 환경에서도 사용할 수 있습니다. .. 이 단락에서는 requirejs "모듈형 로딩"의 기본 기능을 설명합니다. 다음 페이지에서는

을 하나씩 설명하고, requirejs

일반적인 작성 방법

index.html:

a.js:

다음과 같이 작성하는 것이 더 좋을 수도 있습니다

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

로그인 후 복사

두 번째 방법은 블록 범위를 사용하여 함수를 선언하여 전역 변수는 여전히 동일합니다. 위의 두 가지 예제를 실행할 때, html 내용이 비어 있습니다. 즉, body 확인을 클릭하면 JS가 브라우저 렌더링을 차단한 결과입니다.

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

로그인 후 복사

requirejs 작성 방법

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

로그인 후 복사

물론, 먼저 requirejs 웹사이트에 가서 js를 다운로드해야 합니다 -> requirejs.rog

index.html:

a.js:

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

<!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>

로그인 후 복사

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

2. 다음과 같은 보기 흉한 장면을 방지하기 위해 js를 로드하는 프로그램 호출을 사용하세요

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

로그인 후 복사

위 내용은 글 전체 내용이며, require.js 모듈러 툴을 이해하시는 모든 분들에게 도움이 되었으면 좋겠습니다.

JS require.js 모듈화 도구에 대한 최초의 관련 기사를 더 보려면 PHP 중국어 웹사이트를 주목하세요!