[JS_Design Pattern] 2. 모듈 패턴 ( Module Pattern )

Module Pattern

자바스크립트의 모듈 패턴은 javascript 의 코드 관리 기법 중 하나로 객체 핸들링을 위한 방법론 중 하나이다.

객체에 유효범위를 주어 private, public을 구분하여 캡슐화를 할 때 사용하는 방법이다.

Namespace pattern에 Lexical Scope를 추가한 것으로 보면 된다.

Module Pattern 이란, 즉시 실행 함수(Immediately Invoked Function)에

this인자를 넘겨주고 함수 내부에서 exports란 인자로 접근할 수 있는 패턴을 말한다.

basic>

(function(){
     //something to do
})();

모듈 패턴을 사용하는 예를 코드를 통해 살펴보자.

code>

//패턴 적용 전 : global scope에 변수, 함수 모두 존재하는 상황
var countGlobal = 0;
var increaseCountGlobal = function(){
    return (++count);
}
var decreaseCountGlobal = function(){
    return (--count);
}
 
//패턴 적용 후 : testModule 이라는 객체에 모두 집어 넣었다.
var test = (function(){
    var count = 0;
    return {
        increaseCount : function(){
            return (++count);
        },
        decreaseCount : function(){
            return (--count);
        }
    }
})();

모듈 패턴을 사용하게 되면 두 함수 increaseCount, decreaseCount 에서 this 인자의 사용없이

클로저 원리를 통해 count 변수에 접근할 수 있다.

count 변수는 Java에서의 접근 제어자인 private과 같이 처리 되었다.

즉 외부에서는 접근이 불가능한 변수가 된 것이다.

이렇게 모듈 패턴을 사용하면 보다 객체지향적인 코드를 작성할 수 있다.

이 모듈 패턴과 네임 스페이스 패턴을 함께 사용하면 보다 깔끔한 코드가 완성된다.

code>

// 네임스페이스 패턴과 함께 사용하기
var app = app || {};
app.testModule = (function(){
    var count = 0;
    return {
        increaseCount : function(){
            return (++count);
        },
        decreaseCount : function(){
            return (--count);
        }
    }
})();

=> app이라는 전역 객체에 testModule 이라는 모듈을 추가시켰다.

End--