일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- reactive
- Spring Framework
- Spring Batch
- reactor
- 웹 스터디
- 공유기 서버
- 웹 커리큘럼
- spring reactive
- 서버운영
- reactor core
- 웹앱
- ipTIME
- Today
- Total
Hello World
모듈패턴 본문
모듈 패턴 - 객체생성패턴 중 하나
: 늘어나는 코드를 구조화하고 정리하는데 도움을 준다. (역 : 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); // 익명 함수를 바로 실행
'Javascript > Tips' 카테고리의 다른 글
"변수(Variable)"와 "프로퍼티(property)"의 차이가 무엇인가요? (0) | 2012.11.06 |
---|---|
"속성(Attribute)"와 "요소(property)"의 차이가 무엇인가요? (0) | 2012.11.06 |
document.write()를 언제 사용하시나요? (0) | 2012.09.10 |
Document Load 이벤트와 Ready 이벤트의 차이점 (1) | 2012.09.10 |
어린왕자와 여우 : javascript Closure (0) | 2012.09.03 |