JavaScript 모듈형 프로그래밍(2): AMD 사양

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

(위에서 이어짐)

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를 도입하여 모듈식 프로그래밍을 실제로 적용하는 방법을 자세히 설명합니다.

위는 JavaScript 모듈러 프로그래밍의 내용입니다(2): AMD 사양에 대한 자세한 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!