자바스크립트 코딩 기법과 핵심 패턴 - 네임스페이스 패턴

네임스페이스 패턴

네임스페이스는 프로그램에서 필요로 하는 전역 변수의 개수를 줄이는 동시에 과도한 접두어를 사용하지 않고도 이름이 겹치지 않게 해준다.

어플리케이션이나 라이브러리를 위한 전역 객체를 하나 만들고 모든 기능을 이 객체에 추가하면 된다.

// 수정전 : 전역변수 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');