JavaScript 모듈 사양의 CommonJS, AMD 및 CMD 소개

이 기사는 JavaScript 모듈 사양에 대한 CommonJS, AMD 및 CMD에 대한 소개를 제공합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

이 기사는 "JS 모듈식 프로그래밍: CommonJS 및 AMD/CMD를 철저히 이해하세요!" 기사에서 가져온 것입니다. 기사 요약의 대부분은 기사의 원문을 발췌한 것입니다. 공부의 편의를 위해 그냥 메모해 두었습니다. 앞으로 새로운 경험이 있을 때 시간나면 추가하겠습니다. 위반사항이 있을 경우, 선배님들의 명복을 빕니다!

시작하기 전에 대답해 보세요: 모듈이 왜 중요한가요?

답변: 모듈 덕분에 우리는 다른 사람의 코드를 더 편리하게 사용할 수 있고, 원하는 기능에 대해 원하는 모듈을 로드할 수 있습니다. 그러나 여기에는 전제 조건이 있습니다. 즉, 모든 사람이 같은 방식으로 모듈을 작성해야 합니다. 그렇지 않으면 당신은 당신의 글쓰기 방식이 있고 나는 나만의 글쓰기 방식이 있을 것입니다.

그래서 다음 세 가지 모듈 사양이 나왔고, 이 글도 나왔습니다. 미리 설명하자면 CommonJS 사양의 구현은 node.js이고, AMD(Asynchronous Module Definition) 사양의 구현은 require.js와curl.js, CMD 사양의 구현은 Sea.js입니다.

JS(CommonJS, AMD, CMD)의 모듈 사양, js 모듈화에 대해 들어본 적이 있다면 CommonJS나 AMD, 심지어 CMD에 대해서도 들어봤을 것입니다. 하지만 이전에는 정말 듣기만 했습니다. 이제 이러한 사양이 무엇이고 어떤 역할을 하는지 살펴보겠습니다. 이 기사에는 이 세 가지 사양의 소스와 해당 제품의 원리가 포함되어 있습니다.

1. CommonJS 사양

1. 처음에는 공식적으로 정의된 API가 브라우저 기반 애플리케이션만 구축할 수 있다고 생각했습니다. 고급 단어, 돌팔이를 사용하면 CommonJS는 더 이상 견딜 수 없습니다. CommonJS API는 일반 응용 프로그램(주로 브라우저가 아닌 응용 프로그램)에서 사용되는 많은 API를 정의하여 이러한 격차를 메웁니다. 궁극적인 목표는 Python, Ruby 및 Java와 유사한 표준 라이브러리를 제공하는 것입니다. 이 경우 개발자는 CommonJS API를 사용하여 애플리케이션을 작성할 수 있으며, 이러한 애플리케이션은 다양한 JavaScript 인터프리터 및 다양한 호스트 환경에서 실행될 수 있습니다.

CommonJS 호환 시스템에서는 JavaScript를 사용하여 다음 프로그램을 개발할 수 있습니다:

(1). 서버측 JavaScript 애플리케이션
(2) 명령줄 도구
(3). . 하이브리드 애플리케이션(예: Titanium 또는 Adobe AIR)

2009년 미국 프로그래머 Ryan Dahl은 서버 측 프로그래밍에 JavaScript 언어를 사용하기 위해 node.js 프로젝트를 만들었습니다. 이것은 "Javascript 모듈러 프로그래밍"의 공식적인 탄생을 의미합니다. 솔직히 말해서, 브라우저 환경에서는 모듈이 없는 것이 큰 문제가 아닙니다. 결국 웹 프로그램의 복잡성은 제한적입니다. 그러나 서버 측에는 운영 체제 및 기타 응용 프로그램과 상호 작용하는 모듈이 있어야 합니다. , 그렇지 않으면 프랑스어 프로그래밍에 전혀 문제가 없습니다. NodeJS는 CommonJS 사양을 구현한 것이며, webpack도 CommonJS 형식으로 작성되었습니다.

node.js의 모듈 시스템은 CommonJS 사양을 참조하여 구현됩니다. CommonJS에는 모듈을 로드하는 데 사용되는 전역 메서드 require()가 있습니다. 수학 모듈 math.js가 있다고 가정하면 다음과 같이 로드할 수 있습니다.

var math = require('math');

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

　var math = require('math');

  math.add(2,3); // 5

CommonJS에서 정의한 모듈은 다음과 같이 나뉩니다. {모듈 참조(요구)} {모듈 정의(내보내기)} {모듈 식별(모듈)}

require()는 외부 모듈을 소개하는 데 사용됩니다. 내보내기 개체는 현재 모듈의 메서드나 변수를 내보내는 데 사용됩니다. 내보내기 포트, 모듈 개체는 모듈 자체를 나타냅니다.

Node는 CommonJS의 사양을 따르지만 몇 가지 절충안을 만들고 몇 가지 새로운 사항을 추가했습니다.

하지만 CommonJS에 대해 이야기하고 Node에 대해서도 이야기한 후에 NPM을 먼저 이해해야 한다고 생각합니다. NPM은 Node의 패키지 관리자로서 Node가 종속 패키지의 설치 문제를 해결하도록 돕는 것이 아니라 CommonJS 사양(또는 이론)을 따라야 합니다. CommonJS WIKI는 그 역사에 대해 이야기하고, 모듈, 패키지 등을 소개합니다.

commonJS의 원리와 간단한 구현에 대해 이야기해 보겠습니다.

1. 원리

브라우저가 CommonJS와 호환되지 않는 근본적인 이유는 4개의 Node.js 환경 변수가 부족하기 때문입니다.

module
exports
require
global

이 네 가지 변수가 제공되는 한 브라우저는 CommonJS 모듈을 로드할 수 있습니다.

아래는 간단한 예입니다.

var module = {
  exports: {}
};

(function(module, exports) {
  exports.multiply = function (n) { return n * 1000 };
}(module, module.exports))

var f = module.exports.multiply;
f(5) // 5000

위 코드는 즉시 실행 함수에 모듈과 내보내기라는 두 가지 외부 변수를 제공하며, 이 즉시 실행 함수에 모듈이 배치됩니다. 모듈의 출력 값은 module.exports에 배치되어 모듈 로딩을 구현합니다.

2. AMD 사양

commonJS 사양을 기반으로 한 nodeJS가 나온 후 당연히 모든 사람이 클라이언트 측 모듈을 원한다는 개념이 형성되었습니다. 그리고 모듈이 수정 없이 서버와 브라우저 모두에서 실행될 수 있도록 두 가지가 호환되는 것이 가장 좋습니다. 그러나 CommonJS 사양은 주요 제한 사항으로 인해 브라우저 환경에 적합하지 않습니다. 아니면 위의 코드를 브라우저에서 실행하면 큰 문제가 발생하는데, 보이시나요?

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

第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。您会注意到 require 是同步的。

这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。

因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。

CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。

AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。

AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：

require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：

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

math.add()与math模块加载不是同步的，浏览器不会发生假死。所以很显然，AMD比较适合浏览器环境。目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js。

Require.js主要提供define和require两个方法来进行模块化编程，前者用来定义模块，后者用来调用模块。RequireJS就是实现了AMD规范的呢。

三、CMD规范

大名远扬的玉伯写了seajs，就是遵循他提出的CMD规范，与AMD蛮相近的，不过用起来感觉更加方便些，最重要的是中文版，应有尽有：seajs官方doc

define(function(require,exports,module){...});

前面说AMD，说RequireJS实现了AMD，CMD看起来与AMD好像呀，那RequireJS与SeaJS像不像呢？虽然CMD与AMD蛮像的，但区别还是挺明显的，官方非官方都有阐述和理解，我觉得吧，说的都挺好

위 내용은 JavaScript 모듈 사양의 CommonJS, AMD 및 CMD 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!