[JavaScript] 네임스페이스패턴

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

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

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

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

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

1 2 3 4 5 6 7 8 9 10 11

//생성자 함수 2개 function Parent() {}; function Child() {}; //변수 1개 var kid = 4; //객체 2개 var module = {}; module.data = { a:1, b:2 }; var module = {};

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

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

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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 = {};

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

 

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

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

따라서 요롷게!

 

1 2 3 4 5 6 7 8

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