Hello World

모듈패턴 본문

Javascript/Tips

모듈패턴

EnterKey 2012. 10. 13. 03:56
반응형

모듈 패턴 - 객체생성패턴 중 하나

: 늘어나는 코드를 구조화하고 정리하는데 도움을 준다. (역 : Javascript Patterns)


모듈 패턴은 다음 패턴들 여러 개의 조합으로 이루어 진다.

      • 네임스페이스 패턴
      • 즉시 실행 함수
      • 비공개 멤버와 특권 멤버
      • 의존 관계 선언


 결론부터 말하자면, 자바스크립트는 public, private 등의 접근 제한자를 언어 차원에서 지원하지 않는다. 그러므로 단일 객체 안에 public과 private의 변수를 포함할 수 있는 클레스 형식의 개념을 구현하는데 사용된다. 이는 전역영역에서의 접근제한을 두어 특정 변수영역을 보호하기 위해 사용된다.




전역 공간에 변수가 무분별하게 선언 예 :


var dataCache = {};


var id = 0;

    

var url = '/default/data';


var connectServer = function() { ... }

var sendRequest = function() { ... }

var parseData = function(data) { ... }

var getData = function() {

    connectServer();

    var data = sendRequest();

    dataCache[id++] = data;

    return parseData(data);

}




모듈 패턴의 적용 예 : 


var spec = {

    url: '/some/path/data',

    callback: function(data) { ... }, // 콜백 지정

    parser: function jsonParser(data) { ... } // 파서 지정

};


var dataModule = (function(spec) {

    

    // private 영역 시작


    var dataCache = {};    

    var id = 0;    

    var url = spec.url || '/default/data';

    

    var connectServer = function() { ... }

    var sendRequest = function(opt) { ... }

    var parseData = spec.parser || function(data) { ... };

    

    var callback = spec.callback || function() { };    

    var headers = spec.headers || {};


    // private 영역 끝.

    

    

    // 필요한 것만 공개. 접근 제한은 public이 된다

    // 리턴되는 객체의 메서드들은 클로저로서

    // private 영역의 변수에 접근이 가능하다.

    return {

        send: function() {

            connectServer(spec.url, spec.method);

            var data = sendRequest(headers);

            dataCache[id++] = data;

            return parseData(data, callback);

        },

        cache: function(id) { return dataCache[id]; },

        getLastCacheId: function() { return id; }

    } 

    

})(spec); // 익명 함수를 바로 실행






반응형
Comments