JavaScript 모듈성에 대한 간략한 소개-JS 튜토리얼-php.cn

머리말

모듈화와 관련하여 가장 직접적인 표현은 우리가 작성한 require 및 import 키워드입니다. 관련 정보를 찾아보면 CommonJS, CMD AMD와 같은 용어는 물론 RequireJS, SeaJS와 같은 익숙하지 않은 프레임워크도 만나게 될 것입니다. 예를 들어 SeaJS 공식 웹사이트에서는 "간단하고 친숙한 모듈 정의 사양, Sea.js는 CMD 사양을 따릅니다. 자연스럽고 직관적인 코드 구성, 종속성 자동 로딩..."

과 같이 프론트엔드 초보자인 저는 솔직히 그 사람이 혼란스러워 보였고 이해하지 못하는 모습을 보였습니다. 나의 평소 스타일에 따르면, 무언가를 소개하기 전에 항상 그것이 왜 필요한지 설명해야 합니다.

JavaScript 기초

클라이언트 작업을 하는 학생은 다음과 같습니다. OC에 익숙함 #import "classname", Swift의 모듈 및 파일 수정자, Java의 import package+class 모드에 익숙해야 합니다. 우리는 파일을 참조하는 것이 클래스를 참조하는 패턴에 익숙합니다. 그러나 JavaScript와 같은 동적 언어에서는 상황이 변경되었습니다. 예:

<html>
  <head>
    <script type="text/javascript" src="index.js"></script>
  </head>

  <body>
    <p id="hello"> Hello Wrold </p>
    <input type="button" onclick="onPress()" value="Click me" />
  </body>
 </html>

로그인 후 복사

// index.js
function onPress() {
    var p = document.getElementById(&#39;hello&#39;);
    p.innerHTML = &#39;Hello bestswifter&#39;;
}

로그인 후 복사

HTML의