JS 모듈 3편 - commonJS & AMD

History

1. 코드의 양이 많아짐에 따라 변수명 중복, tight coupling 등의 문제가 생김
2. script파일을 나눠도 서로 간섭이 가능하여 생기는 side effect가 발생
3. function scope, IIFE, Closure를 사용해 각 script파일이 개별적인 scope를 보장받도록 하는 module pattern개발
4. module pattern은 여전히 global scope duplicate, dependency resulution of declared order 등의 문제가 있음
5. CommonJS, AMD 등의 모듈 시스템 개발

 

CommonJS

// CommonJS
var module1 = require("module1"); //.fight
var module2 = require("module2"); //.importedFunc2

function fight() {}

module.exports = {
  fight: fight,
};

module로 동작할 파일 등은 require문으로 가져온다.

작성한 코드를 모듈로써 내보낼 때는 module.exports를 통해 객체형식으로 내보낸다.

// browserify or webpack bundling all package dependency

 

browserify나 webpack 등의 번들러가 패키지 종속성을 해결한다.

 

AMD

//AMD
define(["module1", "module2"], function (module1Import, module2Import) {
  var module1 = module1Import;
  var module2 = module2Import;

  function dance() {}

  return {
    dance: dance,
  };
});

define라는 함수의 첫 번째 인자에 배열로 module을 받고

두 번째 인자로는 받아온 모듈들을 인자로 받는 콜백함수를 받는다.

마찬가지로 모듈로써 내보낼 때는 콜백함수의 리턴에 객체형식으로 내보낸다.