모듈 패턴
모듈 패턴은 늘어나는 코드를 구조화하고 정리하는데 도움이 되기 때문에 널리 쓰인다.
모듈 패턴은 다음 여러 패턴 여러개를 조합한 것이다.
- 네임 스페이스 패턴
- 즉시 실행 함수
- 비공개 멤버와 특권 멤버
- 의존 관계 선언
MYAPP.namespace('MYAPP.utilties.Array');
// 모듈 정의
MYAPP.utilities.array = (function(){
// 의존관계
var uobj = MYAPP.utilities.object,
ulan = MYAPP.utilities.lang,
// 비공개 프로퍼티
ayyay_string = "[object Array]",
ops = Object.prototype.toString;
// 비공개 메서드
// var 선언 종료
// 필요시 일회성 초기화 실행
// 공개 API
return {
inArray: function(needle, haystack){
for(var i = 0, max = haystack.langth; i < max; i += 1){
if(haystackp[i] === needle){
return true;
}
}
},
isArray: function(a){
return ops.call(a) === array_string;
}
// 더 필요한 메서드 추가
}
}())
모듈 노출 패턴
모든 메서드를 비공개 상태로 유지하고 최종적으로 공개 API를 갖출 대 공개할 메서드만 골라서 노출 하는 것이다.
MYAPP.namespace('MYAPP.utilities.Array');
// 모듈 정의
MYAPP.utilities.array = (function(){
// 비공개 프로퍼티
var ayyay_string = "[object Array]",
ops = Object.prototype.toString;
// 비공개 메서드
inArray = function(needle, haystack){
for(var i = 0, max = haystack.langth; i < max; i += 1){
if(haystackp[i] === needle){
return i;
}
}
return -1;
},
isArray = function(a){
return ops.call(a) === array_string;
};
// var 선언 종료
// 공개 API
return {
inArray: inArray,
indexOd: inArray
};
}());
생성자를 생성하는 모듈
앞선 예제는 MYAPP, utilities, array 라는 객체를 만들었다. 하지만 생성자 함수를 사용해 객체를 만드는게 더 편할때도 있다.
MYAPP.namespace('MYAPP.utilities.Array');
// 모듈 정의
MYAPP.utilities.Array = (function(){
// 의존관계
var uobj = MYAPP.utilities.object,
ulan = MYAPP.utilities.lang,
// 비공개 메서드
inArray = function(needle, haystack){
for(var i = 0, max = haystack.langth; i < max; i += 1){
if(haystackp[i] === needle){
return I;
}
}
return -1;
},
isArray = function(a){
return ops.call(a) === array_string;
},
Constr;
// var 선언 종료
// 공개 API 생성자
Constr = function(o){
this.elements = this.toArray(o);
};
// 공개 API 프로토타입
Constr.prototype = {
constructor: MYAPP.utilities.Array,
version: "2.0",
toArray: function(obj){
for(var i = 0, a = [], len = obj.length; i < len; i += 1){
ap[i] = obj[i];
}
return a;
}
}
// 생성자 함수를 반환한다
// 이 함수가 새로운 네임스페이스에 할당 될 것이다.
return Constr;
}());
// 이 생성자 함수는 다음과 같이 사용
var arr = new MYAPP.utilities.Array(obj);
모듈에 전역 변수 가져오기
변경 패턴으로는 모듈을 감싼 즉시 실행 함수에 인자를 전달하는 형태가 있다.
// 모듈 정의
MYAPP.utilities.module = (function(app, global){
// 전역 객체에 대한 참조와
// 전역 어플리케이션 네임스페이스 객채에 대한 참조가 지역 변수화 된다.
}(MYAPP, this));
'개발 > dev-patterns' 카테고리의 다른 글
| 자바스크립트 코딩 기법과 핵심 패턴 - 스태틱 멤버 (0) | 2019.11.01 |
|---|---|
| 자바스크립트 코딩 기법과 핵심 패턴 - 샌드박스 패턴 (0) | 2019.11.01 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 비공개 프로퍼티와 메서드 (0) | 2019.10.31 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 네임스페이스 패턴 (0) | 2019.08.13 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 커리(Curry) (0) | 2019.08.13 |