AMD과 common.js (UMD)

AMD와 Common.js는 모듈화된 코드를 로딩하는 역할을 한다. 

이 둘의 차이점은, 

모든 모듈의 로딩이 완료된 후에 실행하는 것인가 

아니면 로딩 완료 이전에 실행하는 것인가이다. 

(즉, 동기 vs 비동기의 방식의 차이)

Common.js 

모든 모듈이 로컬에 다운로드가 된 이후에 실행하는 방식이다. 

node.js에서 사용하는 방식으로

server 환경에서 외부 모듈을 가져올 때 유리한 방식이다.

var lib = require("package/lib");

function foo() {

  lib.log("hello world!");

}

 

exports.foobar = foo;

하지만 모든 모듈을 다운로드할 때까지

페이지를 동작할 수 없다는 것이 단점으로 부각되어

이를 해결하기 위해 새롭게 탄생한 방식이 AMD 방식이다. 

AMD  

비동기적으로 필요한 파일을 다운로드하는 방식으로 

client단(브라우저 환경)에서 외부 모듈을 가져올 때 유리한 방식이다. 

 define(["package/lib"], function (lib) {

 function foo() {

  lib.log("hello world!");

 }

 

 return {

   foobar : foo

 }

}

UMD

참고로 어떤 방식으로 외부 모듈을 로딩하는 것과 무관하게

각 모듈을 선언하는 방식을 UMD 방식이라고 한다. 

(function (root, factory) {

    if (typeof define === 'function' && define.amd) {

        // AMD

        define(['jquery', 'underscore'], factory);

    } else if (typeof exports === 'object') {

        // Node, CommonJS-like

        module.exports = factory(require('jquery'), require('underscore'));

    } else {

        // Browser globals (root is window)

        root.returnExports = factory(root.jQuery, root._);

    }

}(this, function ($, _) {

    //    methods

    function a(){};    //    private because it's not returned (see below)

    function b(){};    //    public because it's returned

    function c(){};    //    public because it's returned

    //    exposed public methods

    return {

        b: b,

        c: c

    }

}));

더 자세히 정리된 페이지

http://d2.naver.com/helloworld/12864