AMD를 사용하지 않으면 엔터프라즈급의 웹앱을 만들 수가 없다. 요즘 Java 에서 Spring Framework이 엔터프라이즈 구현에 핵심이듯이 서로의 의존관계를 관리하고 주입하여 준다. 전통적인 방식은 HTML에서 <script> 태그를 사용하여 모듈들을 순차적으로 코딩한다. 그런 순차적 코딩이 아닌 모듈개념으로 어떻게 전환할 수 있는지 알아보자
1) 예전 방식의 자바스크립트 로딩방식
- html 코드
+ add.js : 더하기 연산
+ multi.js : 곱하기 연산
+ app.js : add, multi 연산을 사용하고 결과 출력
<html>
<body>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="multi.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
- 나머지 코드들
+ 전역변수 cal를 사용하기 위하여 모든 .js에서 undefined을 확인해야 한다
// add.js
var cal = cal || {};
cal.add = function(x, y) {
return x + y;
}
// multi.js
var cal = cal || {};
cal.multiply = function(x, y) {
return x*y;
}
// app.js
// 전역변수 cal를 이용하여 호출한다
console.log('add result is ' + cal.add(4, 5));
console.log('multi result is ' + cal.multiply(4, 5));
- html 호출 결과
2) AMD 방식으로 로딩하기
- add.js, multi.js 모듈화를 위하여 define() 펑션을 이용한다
- app.js 에서 모듈을 사용하기 위하여 require() 펑션을 이용한다
// add.js
// var cal 과 같은 변수 선언이 없어졌다.
// 1) Functional Programming의 최대 장점이 변수 설정으로 인한 메모리 할당이 필요없어지게 되었다
// 2) Anonymous Function == Closure Function으로 만들었다
define(function() {
return function(x, y) {
return x + y;
}
})
// multi.js
define(function() {
return function(x, y) {
return x * y;
}
})
// app.js
// 의존관계에 있는 것을 require의 첫번째 인자에 배열로 설정한다
require(['add', 'multi'], function(add2, multi2) {
console.log('AMD : add result is ' + add2(4, 5));
console.log('AMD : multi result is ' + multi2(4, 5));
});
- AMD 구현체 require.js를 사용하여 index.html 을 변경한다
+ data-main 값으로 app.js 를 지정한다
+ src 값으로 require.js 를 지정한다
<html>
<BODY>
<script data-main="app" src="http://requirejs.org/docs/release/2.1.5/minified/require.js"></script>
</BODY>
</html>
- 결과 확인
** 테스트 소스
AMD.zip<참조>
'NodeJS > Modules' 카테고리의 다른 글
| [NPM] Node.js 모듈을 NPM Registry에 등록하기 (0) | 2013.08.14 |
|---|---|
| [Node.js] Node.js와 브라우져에서 모듈(Module) 사용하려면 (0) | 2013.03.16 |
| [Socket.io] HTML5의 Websocket.io 아키텍쳐 (0) | 2013.01.13 |
| [Modules] Prototype.js 사용하기 (0) | 2012.11.23 |
| [CoffeeScript] Smooth CoffeeScript 배우기 (0) | 2012.10.30 |