JS require.js 모듈러 도구에 대한 첫 번째 접촉
- 高洛峰원래의
- 2016-12-28 14:22:521534검색
웹사이트의 기능이 점차 풍부해지면서 웹페이지의 js는 점점 더 복잡해지고 비대해집니다. 스크립트 태그를 통해 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.rogindex.html:
a.js:<!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 중국어 웹사이트를 주목하세요!