모듈화?


자바스크립트의 모듈?

자바스크립트는 웹페이지의 단순한 보조 기능을 처리하기 위한 용도로 만들어진 언어이다. 본래는 import와 export를 지원하지 않는다. script로 여러 JS 파일들을 하나의 HTML에서 로드 하면, 모두 하나의 전역 객체를 공유한다. 즉 하나의 파일 내에 있는 것처럼 동작한다. 따라서 전역변수가 중복 될 수 있는 문제가 발생한다. 즉 자바스크립트에서는 표준 모듈 시스템을 제공하지 않았다.

// 모듈화 가 없을 때에는 모두 객체로서 처리
// 각 파일 별로 전역 공간을 지정하는 객체를 설정.
var NAMESPACE = NAMESPACE || {};
NAMESPACE.plus = funvtion(){}

CommonoJS

AMD (Asynchronous Module Definition. RequireJS는 AMD 명세의 구현체. )

// math.js 배열안에 필요한 의존성이 들어온다.
define([], function () {
	function sum (a, b) { return a + b; }
	return {
		sum: sum
	}
});

// sub1.js math는 math.js 에서 return한 sum 객체가 된다.
define(['math'], function (math) {
	function plusTwo (a) {
		return math.sum(a, 2);
	}
	return {
		plusTwo: plusTwo
	}
});

// main.js
require(['sub1'], function (sub) {
	console.log(sub.plusTwo(10)); // 12
});

결론