Javascript 모듈러 프로그래밍(1) AMD 사양(모듈의 표준 사용)_기본 지식

이 시리즈의 첫 번째 부분에서는 자바스크립트 모듈의 기본 작성 방법을 소개했습니다. 오늘은 표준화된 방식으로 모듈을 사용하는 방법을 소개하겠습니다.

(위에서 이어짐)
7. 모듈 사양
먼저 생각해 보세요. 모듈이 왜 중요한가요?
모듈 덕분에 우리는 다른 사람의 코드를 더 편리하게 사용할 수 있고, 우리가 원하는 기능에 대해 원하는 모듈을 무엇이든 로드할 수 있습니다.
그러나 여기에는 전제 조건이 있습니다. 즉, 모두가 같은 방식으로 모듈을 작성해야 한다는 것입니다. 그렇지 않으면 당신은 당신의 글쓰기 방식이 있고 나는 나만의 글쓰기 방식이 있으면 엉망이 되지 않을까요! 아직 Javascript 모듈에 대한 공식 사양이 없다는 점을 고려하면 이는 더욱 중요합니다.

현재 널리 사용되는 두 가지 Javascript 모듈 사양은 CommonJS와 AMD입니다. AMD를 주로 소개하겠지만 CommonJS부터 시작하겠습니다.
8. CommonJS
2009년 미국 프로그래머 Ryan Dahl은 서버측 프로그래밍을 위해 JavaScript 언어를 사용하여 node.js 프로젝트를 만들었습니다.

이것은 "Javascript 모듈러 프로그래밍"의 공식적인 탄생을 의미합니다. 솔직히 말해서 브라우저 환경에서는 모듈이 없어도 큰 문제가 되지 않습니다. 결국 웹 프로그램의 복잡성은 제한적이지만 서버 측에서는 운영 체제 및 기타 응용 프로그램과 상호 작용할 수 있는 모듈이 있어야 합니다. 그렇지 않으면 프로그래밍 방법이 없습니다.

node.js의 모듈 시스템은 CommonJS 스펙을 참고하여 구현되었습니다. CommonJS에는 모듈 로딩을 위한 전역 메소드 require()가 있습니다. 수학 모듈 math.js가 있다고 가정하면 다음과 같이 로드할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var math = require('math') ;

그런 다음 모듈에서 제공하는 메서드를 호출할 수 있습니다. :

코드 복사 코드는 다음과 같습니다.

var math = require('math')
Math.add(2,3) // 5

이 시리즈는 주로 브라우저 프로그래밍을 대상으로 하기 때문에 node.js를 포함하지 않으므로 CommonJS에 대해서는 많이 소개하지 않겠습니다. 여기서 우리가 알아야 할 것은 require()가 모듈을 로드하는 데 사용된다는 것입니다.
9. 브라우저 환경
서버 측 모듈을 사용하면 누구나 클라이언트 측 모듈을 원하는 것은 당연합니다. 그리고 모듈이 수정 없이 서버와 브라우저 모두에서 실행될 수 있도록 두 가지가 호환되는 것이 가장 좋습니다.

그러나 CommonJS 사양은 큰 제한으로 인해 브라우저 환경에 적합하지 않습니다. 이전 섹션의 코드를 브라우저에서 실행하면 큰 문제가 발생하게 됩니다.

코드 복사 코드는 다음과 같습니다.

var math = require('math') ;
Math.add(2, 3);

math.add(2, 3)의 두 번째 줄은 require('math')의 첫 번째 줄 다음에 실행됩니다. math.js 로딩이 완료될 때까지 기다리세요. 즉, 로드하는 데 시간이 오래 걸리면 전체 앱이 대기 상태로 정지됩니다.

모든 모듈이 로컬 하드 디스크에 저장되고 동기적으로 로드될 수 있기 때문에 이는 서버 측에서는 문제가 되지 않습니다. 그러나 브라우저의 경우 모듈이 서버 측에 배치되고 대기 시간은 네트워크 속도에 따라 시간이 오래 걸릴 수 있으며 브라우저가 "일시 중지" 상태에 있기 때문에 이는 큰 문제입니다. .

따라서 브라우저측 모듈은 "동기 로딩"(동기)을 사용할 수 없고 "비동기 로딩"(비동기)만 사용할 수 있습니다. 이것이 AMD 스펙 탄생의 배경이다.
10. AMD
AMD는 "Asynchronous Module Definition"의 약자로 "Asynchronous Module Definition"이라는 뜻입니다. 모듈을 비동기적으로 로드하며, 모듈 로드는 후속 명령문의 실행에 영향을 주지 않습니다. 이 모듈에 의존하는 모든 문은 콜백 함수에 정의되어 있습니다. 이 콜백 함수는 로딩이 완료될 때까지 실행되지 않습니다.

AMD도 require() 문을 사용하여 모듈을 로드하지만 CommonJS와 달리 두 개의 매개변수가 필요합니다:

코드 복사 코드는 다음과 같습니다.

require([module], callback)

첫 번째 매개변수 [module]은 로드할 모듈을 구성하는 배열이고, 두 번째 매개변수 콜백은 로드 성공 후의 콜백 함수입니다. 이전 코드를 AMD 형식으로 다시 작성하면 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

require(['math'], function (math) {
　math.add(2, 3);
　})

math. add() 및 수학 모듈 로딩은 동기적이지 않으며 브라우저가 멈추지 않습니다. 따라서 분명히 AMD는 브라우저 환경에 더 적합합니다.
현재 AMD 사양을 구현하는 두 가지 주요 Javascript 라이브러리는 require.js와curl.js입니다. 이 시리즈의 세 번째 부분에서는 AMD의 사용법과 require.js를 도입하여 모듈식 프로그래밍을 실제로 적용하는 방법을 자세히 설명합니다.
(끝)