웹 사이트 기능이 점차 더 풍부 해짐에 따라 웹 페이지의 JS는 점점 더 복잡하고 부풀어 오릅니다. 스크립트 태그를 통해 JS 파일을 가져 오는 원래 방법은 더 이상 현재 인터넷 개발 모델을 충족 할 수 없습니다. 팀 협업, 모듈 재사용, 단위 테스트 등과 같은 일련의 복잡한 요구가 필요합니다.
requirejs는 매우 작은 JavaScript 모듈로드 프레임 워크이며 AMD 사양의 가장 좋은 구현 자 중 하나입니다. 요구 사항의 최신 버전은 압축 후 14k에 불과하며 매우 가볍습니다. 또한 다른 프레임 워크와 함께 작동 할 수 있으며 요구 사항을 사용하면 프론트 엔드 코드의 품질이 반드시 향상됩니다.
JS가 가져올 수있는 혜택
요구 사항에 대한 공식 설명 :
requirejs는 자바 스크립트 파일 및 모듈 로더입니다. 브라우저 내 사용에 최적화되어 있지만 Rhino 및 Node와 같은 다른 JavaScript 환경에서 사용할 수 있습니다. 요구 사항과 같은 모듈 식 스크립트 로더를 사용하면 코드의 속도와 품질이 향상됩니다.
일반적인 의미 :
브라우저에서는 JS 파일의 모듈 로더로 사용할 수 있거나 Node 및 Rhino 환경 인 Balabala에서 사용할 수 있습니다. 모듈 식 하중이란 무엇입니까? 다음 페이지에서 하나씩 설명하겠습니다.
먼저 일반적인 시나리오를 살펴보고 예제를 통해 요구 사항을 사용하는 방법을 설명해 봅시다.
정상적인 글쓰기 방법
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 컨텐츠가 비어있는 지 알 수 없습니다. 이것은 JS가 브라우저 렌더링을 차단 한 결과입니다.
작성 방법이 필요합니다
물론 우선 JS-> requirejs.rog를 다운로드하려면 requirejs 웹 사이트로 이동해야합니다.
index.html :
<! docType html> <html> <head> <script type = "text/javaScript"src = "require.js"> </script> <script> <script> <text/javaScript "> require (["a "]); </script> </head> <hod> <span> 바디 </span> </body> </html>
A.JS :
define (function () {function fun1 () {alert ( "it Works");} fun1 ();})브라우저는 "It Works"를 제기하므로 올바르게 실행되지만 약간의 차이가 있습니다. 이번에는 브라우저가 비어 있지 않으며 신체가 페이지에 나타났습니다. 지금까지 우리는 요구 사항에 다음과 같은 장점이 있다는 것을 알 수 있습니다.
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> <text/javascript "src = type = "text/javaScript"src = "d.js"> </script> <script type = "text/javaScript"src = "e.js"> </script> <script type = "text/javaScript"src = "f.js"> </script> <script> <script/javascript "src ="f.js "> type = "text/javaScript"src = "g.js"> </script> <script type = "text/javaScript"src = "h.js"> </script> <script type = "text/javascript"src = "i.js"> </script> <script> <script> src = j.js "> </javascript"
위는이 기사에 관한 것입니다. 필요한 모든 사람들이 필요한 것들을 이해하는 것이 도움이되기를 바랍니다. JS 모듈 식 도구.