RequireJS

RequireJS Site : http://requirejs.org/

RequireJS 란? 

JavaScript 파일 및 모듈 로더로 코드의 속도와 품질 향상을 기대할 수 있다고 한다.

JS 파일 단위로 모듈을 구성하여 전역 변수의 사용을 없애고, 실행 함수에서 의존성 있는 모듈을 명시적으로 지정하여 비동기 환경에서의 스크립트 로드 오류를 줄일 수 있다.(지정된 모듈이 우선 로드 되고 함수가 실행되는 구조이다.)

RequireJS 사용순서

1) RequireJS Script 불러오기

// require.js 로드 후, data-main 항목의 JS파일이 로드된다.
<script data-main="js/require/main" src="js/require.js"></script>

2) 모듈 작성 - define

// 의존성 모듈을 배열의 형태로 나열되며 생략이 가능하다.
// 함수의 매개변수는 의존성 모듈을 순서대로 나열하여 참조할 수 있다.
define([ -- 의존성 모듈 주입 -- ], function( -- 주입된 의존성 모듈의 매개변수 -- ){
    return 오브젝트;
});

// Singleton Type
define(function(){
    return {
        plus : function(a, b){
            return (a + b);
        },
        minus : function(a, b){
            return (a - b);
        }
    };
});

// Instance Type
define(function(){
    function Calc(name){
        this.name = name;
    };
    Calc.prototype.getName = function(){
        return this.name;
    };
    Calc.prototype.plus = function(a, b){
        return (a + b);
    };
    Calc.prototype.minus = function(a, b){
        return (a - b);
    };
});

3) 환경 설정 - requirejs.config

requirejs.config({
    baseUrl : '자바스크립트 기본폴더 경로',
    paths : {
        /*
         * --- 사용 예 ---
         * '모듈 명' : '파일의 경로'
         *
         * 모듈 명은 이후에 의존성 항목에서 해당 모듈을 지칭하는 용도로 사용된다. 
         * 경로는 baseUrl 항목의 상대경로 또는 웹 URL(http:// ..)로 지정할 수 있다.
         */
        'jquery' : 'jquery-2.1.1.min',
        'handlebars' : 'handlebars-v4.0.5',
        'calc' : 'require/calc',
        'calc2' : 'require/calc2'
    },
    shim : {
        /*
         * 외부 라이브러리나 객체를 모듈로 변환하는 옵션
         *
         * --- 사용 예 ---
         * '모듈 명' : {
         *     deps : [ -- 의존성 모듈 주입 -- ]
         *     exports : '모듈의 리턴 값'
         * }
         *
         * --- 변환 예 ---
         * define('모듈 명', [ -- 의존성 모듈 주입 -- ], function( -- 주입된 의존성 모듈의 매개변수 -- ){
         *     return window['모듈의 리턴 값'];
         * });
         */
        'jquery' : {
            exports : '$'
        }
    }
});

4) 기능 구현 - requirejs

requirejs([ -- 의존성 모듈 주입 -- ], function( -- 주입된 의존성 모듈의 매개변수 -- ){
    // 실행코드 삽입
});

requirejs(['jquery', 'calc', 'calc2'], function(jQuery, calc, calc2){
	var result = calc.plus(5, 10);
	result = calc.minus(result, 1);

	var cal01 = new calc2(1);
	var cal02 = new calc2(2);
	
	result = cal01.plus(100, 10);
	result = cal01.minus(result, 10);
	
	result = cal02.plus(200, 10);
	result = cal02.minus(result, 10);
});