AMD CMD CommonJS 사양에 대한 간략한 분석--javascript 모듈러 로딩 학습 경험

자바스크립트 모듈러 AMD, CMD, CommonJS에 대해 학습한 내용을 정리한 글이며, 세 가지 방법에 대해 궁금하신 분들을 위한 기록 역할을 하며, 오류나 편차가 있으면 지적해 주시길 바랍니다. .나는 매우 감사할 것입니다.

이 글의 기본 독자들은 아마도 require와 seajs의 사용법(AMD, CMD 사용법)을 알고 있을 것이므로 사용법 구문은 포함하지 않았습니다.

1. 탄생 이유 :

이 세 가지 사양은 모두 JavaScript의 모듈화된 로딩을 위해 탄생했습니다. 사용되거나 사용될 것으로 예상되는 특정 모듈을 로드하여 거대하고 복잡한 코드를 가진 수많은 시스템을 잘 구성하고 관리할 수 있습니다. 모듈화하면 코드를 사용하고 관리할 때 혼란이 줄어들고 여러 사람의 협력도 촉진됩니다.

2. 규범:

(1) CommonJS는 JavaScript 생태계 구축에 관심이 있는 조직입니다. 서버와 브라우저 모두에서 JavaScript 프로그램의 이식성과 상호 교환성을 높이는 데 전념하는 전체 커뮤니티가 있습니다.

웹 서버, 데스크톱, 명령줄 앱과 브라우저를 위한 JavaScript 생태계 구축을 목표로 하는 그룹입니다.

브라우저, 명령줄 애플리케이션, 데스크탑에서 특별히 제작된 JavaScript 에코시스템 웹 서버 세트입니다. (그는 자신의 위키에서 그렇게 말했습니다)

이 조직은 CommonJS Modules/1.0 사양을 포함하여 몇 가지 사양을 공식화했습니다(웹사이트 http://www.commonjs.org/ 참조). 이것은 우리가 일반적으로 commonjs 사양이라고 부르는 것입니다.

“CommonJS API는 많은 공통 애플리케이션 요구 사항을 처리하는 API를 정의하여 궁극적으로 Python, Ruby 및 Java만큼 풍부한 표준 라이브러리를 제공함으로써 이러한 격차를 메울 것입니다.”--(http://www.commonjs. org/)

따라서 Commonjs는 서버측 사양에 더 가깝습니다. Node.js는 이 사양을 채택합니다. CommonJS 사양에 따르면 단일 파일은 모듈입니다. 모듈을 로드할 때는 파일을 읽고 실행한 다음 마지막으로 파일 내부의 내보내기 개체를 반환하는 require 메서드를 사용합니다.

그는 또한 다음과 같은 시나리오에서 사용될 수 있다고 말했기 때문에 그는 서버 측에 더 편향되어 있음이 분명합니다. 물론 브라우저에서도 사용할 수 있습니다.

•서버측 JavaScript 애플리케이션
•명령줄 도구
•데스크탑 GUI 기반 애플리케이션
•하이브리드 애플리케이션(Titanium, Adobe AIR)

(2), AMD 사양

Commonjs는 모듈화 문제를 해결하고 브라우저에서 사용할 수 있습니다. 그러나 Commonjs는 모듈을 사용할 때 로드되어 사용됩니다. 음, 로딩 속도 등의 문제가 발생합니다. (브라우저에서 모듈을 동기식으로 로드하면 성능, 가용성, 디버깅, 도메인 간 액세스 등의 문제가 발생합니다.)

브라우저의 특수한 상황을 고려하여 또 다른 사양이 등장했습니다. 이 사양은 종속 모듈을 비동기적으로 로드하고 이를 미리 로드할 수 있는 사양입니다. CommonJS가 동기식 요구 호출에 사용되지 않는 한 AMD는 CommonJS 모듈의 드롭인 버전으로 사용될 수 있습니다. 동기 요구 호출을 사용하는 CommonJS 코드는 콜백 스타일 AMD 모듈 로더를 사용하도록 변환될 수 있습니다(https://github.com/amdjs/amdjs-api/wiki/AMD-(%E4%B8%AD%E6%96%) 87%E7%89%88) (말합니다).

다음은 간단한 CommonJS 변환을 사용한 모듈 정의입니다(amd 사양의 사용).

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

정의(함수(요구, 내보내기, 모듈) {
var a = require('a'),
b = 요구('b');
exports.action = function () {};

});

따라서 AMD와 Commonjs는 호환됩니다. 호출 방법만 약간만 변경하면 동기 로딩이 가능합니다. (AMD도 commonjs 기반의 셸을 추가한 것으로 의심되는데, 다른 Shenma 지침과 지원 텍스트는 찾지 못했습니다.) . 여기에 추가해야 합니다.)

AMD 사양을 보면 AMD는 기본적으로 종속 모듈을 미리 명시한 다음 이러한 모듈을 미리 로드한다는 것을 알 수 있습니다. 실제로 이를 위해서는 이러한 종속성을 미리 생각하고 미리 작성해야 합니다. 처음에 종속성을 계속 추가하는 과정으로 돌아가야 합니다.

(3), CMD

이 문제를 해결하기 위한 것인지는 모르겠습니다. Taobao의 Yubo Daniel은 seajs를 만들고 이 사양이 CMD 사양을 따른다고 주장한 다음 이 사양에 대한 링크를 제공했습니다. (열면 초안이라는 단어가 표시됩니다.) ). 이 기준에 대해 유삼촌은 Zhihu에서 이렇게 말했습니다

" AMD는 RequireJS 승격 과정에서 표준화된 모듈 정의 출력입니다.

CMD는 SeaJS 승격 과정에서 모듈 정의의 표준화된 출력입니다.
CommonJS Modules/2.0 사양과 유사하게 BravoJS 승격 프로세스 중 모듈 정의의 표준화된 출력입니다.
그 외에도 많아요⋯⋯
"

그래서 이 사양은 실제로 Seajs 홍보를 위해 개발된 것입니다. 이제 SeaJS에 무슨 일이 일어나고 있는지 살펴보겠습니다. 기본적으로 여러분은 이 사양을 알고 있습니다.

마찬가지로 Seajs도 종속성을 사전 로드합니다. JS와 AMD 사양은 종속성 호출 및 선언 측면에서 동일합니다. AMD와 CMD는 모두 정의와 요구를 사용하지만 CMD 표준은 사용 중에 종속성을 제안하는 경향이 있습니다. 즉, 코드가 어디에 작성되든 갑자기 다른 모듈에 의존해야 한다는 것을 알게 되면 그냥 요구를 사용하여 도입하면 됩니다. 현재 코드에서 우리는 사전 로딩을 도와줄 것이며, 원하는 것은 무엇이든 작성할 수 있습니다. 하지만 AMD 표준에서는 헤더에 종속성 매개변수를 미리 작성하도록 요구합니다(잘 작성되지 않았나요? 돌아가서 잘 작성하세요). 이것이 가장 분명한 차이점입니다.

3. 공생

CommonJS는 서버 측 사양이므로 다른 두 표준은 실제로 충돌하지 않습니다.

해외에서는 AMD를 더 많이 사용하고 있고, 물론 중국에서도 많이 사용하고 있고, Dojo는 1.6 버전에서도 사용하고 있어 충분히 훌륭하다는 것이 입증되었습니다.

물론 CMD를 사용하는 사람들이 많지만 기본적으로 그들은 중국에 집중되어 있습니다. Seajs의 공식 웹사이트를 보면 많은 멋진 회사들이 CMD를 사용하고 있음을 알 수 있습니다(iQiyi, Tencent Weibo, Alipay, Taobao 등). 여기에서 http://seajs.org/docs/를 살펴보세요. 아마도 수많은 작고 알려지지 않은 회사들이 채용 시 seajs 기술을 요구할 것입니다.

그래서 세 가지 사양은 현재 매우 좋습니다(사실 js에 자체 모듈 로딩 메커니즘이 있기 때문입니다. es6이 나온 후에는 어떻게 될지 모르겠습니다).

다른 로딩 사양과 호환되어야 하는 파일을 작성할 때 어떻게 해야 합니까? 다음 코드를 살펴보세요.

(function (root, factory) { 
 
  if (typeof define === 'function' && define.amd) { 
 
    // AMD 
 
    define(['jquery', 'underscore'], factory); 
 
  } else if (typeof exports === 'object') { 
 
    // Node, CommonJS之类的 
 
    module.exports = factory(require('jquery'), require('underscore')); 
 
  } else { 
 
    // 浏览器全局变量(root 即 window) 
 
    root.returnExports = factory(root.jQuery, root._); 
 
  } 
 
}(this, function ($, _) { 
 
  // 方法 
 
  function a(){}; // 私有方法，因为它没被返回 (见下面) 
 
  function b(){}; // 公共方法，因为被返回了 
 
  function c(){}; // 公共方法，因为被返回了 
 
    
 
  // 暴露公共方法 
 
  return { 
 
    b: b, 
 
    c: c 
 
  } 
 
}));

로그인 후 복사

이 코드는 다양한 로딩 사양과 호환됩니다.

4. AMD와 CMD의 차이점

다음은 유 삼촌이 Zhihu에 대해 말한 내용입니다.

1. 종속 모듈의 경우 AMD가 먼저 실행되고 CMD가 지연되어 실행됩니다. 그러나 RequireJS 2.0부터는 실행을 지연할 수 있도록 변경되었습니다(작성 방법에 따라 처리 방법이 다름). CMD는 최대한 게으른 것을 추천합니다.
2. CMD는 가장 가까운 위치에 대한 의존성을 촉진하는 반면, AMD는 전면에 대한 의존성을 촉진합니다.

3. AMD의 API는 기본적으로 여러 목적으로 사용되는 반면, CMD의 API는 엄격하게 차별화되며 단일 책임을 옹호합니다. 예를 들어, AMD에서 require는 전역 요구와 로컬 요구로 구분되며 둘 다 require라고 합니다. CMD에서는 전역 요구 사항이 없습니다. 대신 모듈 시스템의 완성도를 기반으로 모듈 시스템을 로드하고 시작하기 위해 seajs.use를 제공합니다. CMD에서는 모든 API가 단순하고 순수합니다.

4. 아직 세부적인 차이점이 있으니, 본 사양의 정의만 살펴보시기 바랍니다.
(알겠습니다~ 네 번째 사항은 더 말씀드리지 않겠습니다...)

5. AMD와 CMD의 몇 가지 유사점

둘 다 정의와 요구가 있으며 호출 메소드는 실제로 종속성 매개변수를 추가할 수 있습니다. 즉, 종속성 매개변수를 제공하여 사전 로드 종속 모듈을 구현할 수 있습니다(그러나 권장되지 않습니다. 참고: id 및 deps 매개변수로 정의하는 것은 사용하지 않기 때문입니다). CMD 사양에 속하지만 모듈/전송 사양에 속합니다 ---출처: https://github.com/seajs/seajs/issues/242).

AMD는 공장에서 require를 사용하여 지금 사용된 모듈을 로드할 수도 있지만, 이 모듈은 미리 로드되지 않으며 사용될 때만 로드되는 동기 로드입니다.

var a = require('a'); // 모듈 a 로드

잘못된 내용이 있으면 바로잡아주세요.

위 글은 AMD CMD CommonJS 사양을 간략하게 분석한 것입니다. 자바스크립트 모듈러 로딩 학습 경험 요약은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. Script Home에 많은 지원 부탁드립니다. .