JavaScript 모듈화 아이디어: CommonJS, AMD, CMD, UMD

내가 아는 세 가지 모듈 로딩 방법은 CommonJS, AMD, CMD입니다

이 세 가지 모듈 로딩 방법을 설명하는 기사가 인터넷에 많이 있습니다. 온라인으로 가서 관련 정보를 찾아볼 수 있습니다.

(1) CommonJS

CommonJS에서는 단일 파일이 모듈입니다. 호출된 모듈은 내보내기를 사용하여 인터페이스를 노출하고 호출 모듈은 require를 사용하여 노출된 인터페이스를 호출합니다.

예는 다음과 같습니다.

// student.js
// 私有变量
var a = 123;
function add(student) {
    console.log('Add student：' + student);
}
// exports对象上的方法和变量是外部可访问的
exports.add = add;

1 // require를 사용하여 Student.js 모듈을 로드합니다. 2 var Student = require('./student.js');

CommonJS 로딩 모듈은 "동기식"입니다. 즉, 호출된 모듈에서 공개 메서드와 변수를 호출하려면 호출된 모듈이 로드될 때까지 기다려야 합니다. 서버에서 사용되는 NodeJS는 CommonJS를 사용하여 모듈을 관리합니다. 그러나 브라우저 측에서는 동기 로딩이 네트워크 환경의 영향으로 큰 불확실성을 가지게 되므로 CommonJS는 브라우저 측에는 적합하지 않습니다.

브라우저 환경에서 서버로부터 모듈을 로드하려면 "비동기" 방식을 사용해야 합니다. 그래서 AMD와 CMD 솔루션이 등장했습니다.

(2) AMD(Asynchromous Module Definition)

requireJS는 AMD를 사용하여 모듈을 비동기적으로 로드하는 관리 플러그인입니다. AMD 모듈은 객체, 함수, 생성자, 문자열, JSON 등과 같은 다양한 유형의 모듈을 지원합니다.

AMD 사양은 정의 메소드를 사용하여 모듈을 정의합니다.

//define(param1,param2) 通过define方法定义模块
//@param1: 数组，元素为引入的依赖模块
//@param2: 回调函数，通过形参传入依赖
define(['firstModule','secondModule'],function(firstModule,secondModule){
     function foo(){
           firstModule.test();
     }
     // 暴露foo()
     return {foo:foo};
});

동시에 AMD는 정의 메소드를 사용하여 CommonJS 사양과 호환되는 모듈을 정의하는 것을 허용합니다. require 및 내보내기를 사용할 수 있습니다.

define(function(require,exports,module){
     var reqModule = require("./firstModule");
     reqModule.test();

     exports.pubPort = function(){
            // 函数体
     }
});

(3) CMD

CMD와 AMD의 차이점은 주로 종속 모듈의 실행 타이밍에 반영됩니다. AMD는 "종속성 프런트 로드"입니다. 필요한 모듈을 미리 로드해 두는 것을 권장하며, CMD는 "가장 가까운 모듈에 따라" 결정됩니다. 즉, 사용할 수 있을 때 로드하세요. Java의 "hungry man 모드" 및 "lazy man 모드"와 다소 유사합니다.

requireJS 2.0부터는 지연 로딩도 가능합니다.

예:

// AMD——依赖前置
define(['./a','./b'],function(a,b){
    //提前声明要依赖的模块
});

// CMD
define(function(require,exports,module){
    //依赖可以就近写
    var a = require('./a');
    a.test();

    //软依赖
    if(status){
        var b = require('./b');
        b.test();
    }

여기에는 소프트 종속성이라는 용어가 있습니다. 저는 개인적으로 소프트 종속성이 반드시 종속되지는 않는다는 뜻이고, 하드 종속성은 반드시 종속되는 모듈이라는 것을 알고 있습니다. 그것에만 의존하고, 필요하지 않으면 의존하지 말고, 상태에 따라 판단하세요.

(4) UMD

UMD——범용 모듈 정의, 범용 모듈 정의

UMD는 CommonJS에 AMD를 더한 것과 같습니다. UMD의 역할은 실제로 판단을 내리는 것입니다:

- 먼저 현재 환경에서 NodeJ가 지원하는 모듈이 존재하는지 판단합니다. 존재한다면 Node.js 모듈 모드(내보내기)를 사용합니다.

- 지원되지 않는 경우 AMD 지원 여부를 확인(정의)하는 경우 AMD 모드를 사용하여 로드합니다.

아직 UMD에 대해 잘 이해하지 못하고 구체적으로 어떻게 사용하는지 잘 모르는 것 같습니다. 계속해서 이해해 봅시다. 어서 해봐요!