[JavaScript] 자바스크립트 모듈패턴과 이름공간

자바스크립트는 객체 기반 함수형 스크립트 언어이며 웹에서 중요한 위치를 차지하고 있다.

 

모듈패턴 1

이름공간 안에서 사용하는 함수와 외부로 노출하는 함수를 구분한다.

var namespace = (function()
{
       var namespace = {};
       var i = 0;
       // 내부에서 사용하는 함수
       function func1()
       {
               alert(i);
       }
       // namespace를 통해 외부로 노출하는 함수
       namespace.func2 = function()
       {
               alert(i);
       }
       return namespace;
})();

 

모듈패턴 2

전역번수 $ 를 아래와 같이 지역변수로 전달하면 이름공간 내에서 지역변수로 사용하기 때문에 속도가 향상될 수 있다.

var namespace = (function(namespace, $, undefined)
{
       var i = 0;
       // 내부에서 사용하는 함수
       function func1()
       {
               // 내부 함수 private
               alert(i);
       }
       // namespace를 통해 외부로 노출하는 함수
       namespace.func2 = function()
       {
               alert(i);
       };
       return namespace;
       // namespace 객체가 없으면 생성
})(window.namespace || {}, jQuery);

 

모듈패턴 3

ECMAScript3에서 undefined 은 불변(immutable) 객체가 아니라 가변객체(mutable)다.
그것은 아래와 같이 재정의 가능하다.

undefined = true;
(function(window, document, undefined)
{
       // 여기서 undefined 은 true 값을 가진 지역변수가 된다.
})(window, document);

(function(namespace, $, undefined)
{
       var i = 0;
       function func1()
       {
               alert(i);
       }
       namespace.func2 = function()
       {
               alert(i);
       };
       // namespace 객체가 없으면 생성
})(window.namespace = window.namespace || {}, jQuery);

ECMASCript5에서는 아래와 같이 strict 모드로 설정가능하다.

strict mode ('use strict';)

 

모듈 (Module)

아래와 같이 자바스크립트를 사용하게 되면 전역 공간을 사용하게 된다.

생성한 메서드와 변수가 전역 네임스페이스에 들어가게 된다.

var iValue = 10;
var myFunction = function() { // ... 
}
var anotherFunction = function() { // ... 
}

 

아래와 같이 선언과 동시에 실행되는 함수로 작성하면 지역공간을 사용하여 전역공간이 지저분해지는 것을 방지한다.

(function(){
    // ...
 
})();

 

이 코드는 익명함수(anonymous)와 ()로 함수의 정의와 실행이 되는 코드다.
익명함수 내에서 작업을 하게 되면 전역 공간에 영향을 주지 않고 작업이 가능하게 된다.

(function(window, $, undefined){
    // ...
 
})(window, jQuery);

 

익명함수에서 선언한 변수나 함수를 외부에서도 사용하려면 전역 공간과의 연결고리가 필요하다. 위와 같이 window 객체를 파라미터로 전달해서 window 객체에 연결하면 외부에서도 사용이 가능하다. jQuery로 넘겨진 파라미터는 익명함수 안에서 이름충돌 없이 $로 사용이 가능하다. 세 번째 파라미터를 보시면 undefined으로 되어 있다. 가변객체이기 때문에 외부에서 선언된 것을 내부에서도 그대로 사용하게 된다.

 

이름공간 (Namespace)

보통 아래와 같이 이름공간을 사용한다.

window.MyApp = window.MyApp || {};
window.MyApp.someFunction = function(){
    // ...
 
};

 

 

MyApp 이름으로 생성된 객체여부를 확인해서 없으면 {}로 새로 정의해 준다.

위와 같은 일반적인 이름공간의 사용보다 모듈 방식을 사용해서 아래와 같이 변경해 본다.

(function(MyApp, $, undefined){
    // ...
 
}(window.MyApp = window.MyApp || {}, jQuery));

또는

window.MyApp = (function(MyApp, $, undefined){
    // ...
    return MyApp;
 
})(window.MyApp || {}, jQuery);

 

이런 방법으로 전역공간과 충돌 없이 자신의 이름공간에서 자유롭게 정의 및 사용이 가능해진다.