UMD (Universal Module Definition) Pattern 이란
AMD (requireJS), CommonJS (node), 일반 browser 환경에서 통합해서 쓸 수 있는 javascript module pattern 이다.
jQuery, moment, D3 등의 라이브러리에서도 해당 패턴을 사용한다.
예제 - jQeury 종속형
새로 만들 예제의 모듈명은 module1 이고 jQuery 에 종속적이라고 가정한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| (function (global, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports', 'jquery'], factory);
} else if (
typeof exports === 'object' &&
typeof exports.nodeName !== 'string'
) {
factory(exports, require('jquery'));
} else {
factory((global.module1 = global.module1 || {}), global.$);
}
})(this, function (exports, $) {
exports.action = function () {};
});
|
종속되는 모듈을 추가하려면, AMD 는 배열안에, commonJS 와 일반은 파라미터로 추가한 뒤 12 번째 줄의 콜백함수 안에 원하는 변수로 받으면 된다.
예제 - 기본형
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| (function (global, factory) {
if (typeof define === 'function' && define.amd) {
define(['exports'], factory);
} else if (
typeof exports === 'object' &&
typeof exports.nodeName !== 'string'
) {
factory(exports);
} else {
factory((global.module1 = global.module1 || {}));
}
})(this, function (exports) {
exports.action = function () {};
});
|
즉시실행 함수에 window 객체와 함수를 파라미터로 보내서 전역 객체를 생성하는 방식이다.
예제 - 3 항연산자 사용
1
2
3
4
5
6
7
| (function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(factory((global.module1 = global.module1 || {})));
}(this, (function (exports) {
exports.action = function () {};
})));
|
설명
window 객체 안에 모듈이 선언되므로, module1.action(); 으로 바로 호출해 사용하면 된다.
더 자세한 설명을 보고싶다면 umd를 참조하면 된다.