네임스페이스 패턴
네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해준다.
어플리케이션이나 라이브러리를 위한 전역 객체를 하나 만들고 모든 기능을 이 객체에 추가하면 된다.
// 수정전 : 전역변수 5개
// 경고 : 안티패턴
// 생성자 함수 2개
function Parent(){}
function Child(){}
// 변수 1개
var some_var = 1;
// 객체 2개
var modulel = {};
modulel.data = {a:1, b:2};
var modulel2 = {};
// 수정 후 : 전역 변수 1개
// 전역 객체
var MYAPP = {};
// 생성자
MYAPP.Parent = function(){};
MYAPP.Child = function(){};
// 변수
MYAPP.some_var = 1;
// 객체 컨테이너
MYAPP.modules = {};
// 객체들을 컨테이너 안에 추가한다.
MYAPP.modules.modules1 = {};
MYAPP.modules.modules1.data = {a:1, b:2};
MYAPP.modules.modules2 = {};
이 패턴은 코드에 네임스페이스를 지정해주며, 코드 내의 이름 충돌 뿐 아니라 이 코드와 같은 페이지에 존재하는 자바스크립트 라이브러리나 위짓 등 서드 파티 코드와의 이름 충돌도 방지해준다.
범용 네임스페이스 함수
네임 스페이스를 생성하거나 프로퍼티를 추가하기 전에 먼저 이미 존재하는지 여부를 확인 하는 것이 최선이다.
// 위험
var MYAPP = {};
// 개선안
if (typeof MYAPP === "undefined"){
var MYAPP = {};
}
// 또는 더 짧게 쓸 수 있따.
var MYAPP = MYAPP || {};
이렇게 추가되는 확인 작업 때문에 상당량의 중복 코드가 생겨날 수 있다. 따라서 네임스페이스 생성의 실제 작업을 맡아 줄 재사용 가능한 함수를 만들어 두면 편하다.
var MYAPP = MYAPP || {};
MYAPP.namespace = function(ns_string){
var parts = ns_string.split('.'),
parent = MYAPP,
i;
// 처음에 중복되는 전역 객체명은 제거한다.
if(parts[0] === "MYAPP"){
parts = parts.slice(1);
}
for(i = 0; i < parts.length; i += 1){
// 프로퍼티가 존재하지 않으면 생성한다.
if(typeof parent[parts[i]] === "undefined"){
parent[parts[i]] = {};
}
parent = parent[parts[i]];
}
return parent;
};
이 코드는 다음 모든 예에서 사용할 수 있다.
// 반환 값을 지역 변수에 할당한다.
var module2 = MYAPP.namespace('MYAPP.modules.module2');
module2 === MYAPP.modules.module2; // true
// 첫부분의 'MYAPP' 을 생략하고도 쓸 수 있다.
MYAPP.namespace('modules.module51');
// 아주 긴 네임스페이스
MYAPP.namespace('once.ipon.a.time.there.was.long.nested.property');
'개발 > dev-patterns' 카테고리의 다른 글
| 자바스크립트 코딩 기법과 핵심 패턴 - 모듈 패턴 (0) | 2019.11.01 |
|---|---|
| 자바스크립트 코딩 기법과 핵심 패턴 - 비공개 프로퍼티와 메서드 (0) | 2019.10.31 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 커리(Curry) (0) | 2019.08.13 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 설정 객체 패턴 (0) | 2019.08.09 |
| 자바스크립트 코딩 기법과 핵심 패턴 - 함수 프로퍼티(메모이제이션) (0) | 2019.08.06 |