[JavaScript] 네임스페이스패턴

JavaScript/Core

[JavaScript] 네임스페이스패턴

Jundol 2015. 1. 26. 10:33

javascript에서는 전역유효범위를 지저분하게 하는것을 좋은 패턴이라 하기 어렵다.

코딩을 하다보면 라이브러리를 가져다 쓸 경우가 많이 생긴다. 그러다보면 타인이 작성한 코드가 내 코드에 들어와있을텐데

만약 전역스페이스에 동일변수가 선언되어 있고 유용하게 쓰여지고 있었다면 충돌로 인해 큰 오류를 만들어낼 수 있다.

그 대신 전역객체를 하나 생성하고 그 안에 전부 때려박는걸 네임스페이스패턴이라고 한다.

// 권장하지 않는 안티패턴

//생성자 함수 2개
function Parent() {};
function Child() {};

//변수 1개
var kid = 4;

//객체 2개
var module = {};
module.data = { a:1, b:2 };
var module = {};

전역 유효범위에 총 5개를 할당함으로써 전역스페이스를 어지럽히고 있다.

위와같은게 아닌 전역객체를 하나 생성하고 그 안에 전부 넣도록 하자.

// 권장하는 네임스페이스 패턴

var APP = {};

APP.Prent = function () {};
APP.Child = function () {};

APP.kid = 4;

// 객체 컨테이너
APP.modules = {};

// 객체들을 컨테이너 안에 추가
APP.modules.module1 = {};
APP.modules.module.data = { a:1, b:2 };
APP.modules.module2 = {};

하지만 네임스페이스 패턴에는 단점이 존재한다.

접두어를 매번 붙여야되기 때문에 코드량이 증가한다.
전역 인스턴스가 하나 뿐이기 때문에 코드의 어느 부분을 수정하더라도 전역 인스턴스가 수정된다. 나머지 기능들도 수정된 상태를 받게 된다

네임스페이스패턴에서 하나의 전역 인스턴스를 선언할 때에도 검사를 해 주는것이 좋다.

따라서 요롷게!

if(typeof APP === "undefined"){
   var APP = {};
}

// 혹은
// 짧은 or 사용법. 첫번째 지정된 피연산자가 undefined면 첫번째 피연산자 사용. 
// 아니면 두번째 피연산자 아니면 세번째 피연산자...
var APP = APP || {};