Global NameSpace Function(범용 네임스페이스 함수)

네임스페이스 패턴 생성시 유용한 범용적인 네임스페이스 함수

프로그램의 복잡도가 증가하고 코드의 각 부분들이 별개의 파일로 분리되어 선택적으로 문서에 포함하게 되면, 어떤 코드가 특정 네임스페이스나 그 내부의 프로퍼티를 처음으로 정의한다고 가정하기가 위험합니다.

네임스페이스에 추가하려는 프로퍼티가 이미 존재할 수도 있고 따라서 내용을 덮어쓰게 될 지도 모릅니다.

그러므로 네임스페이스를 생성하거나 프로퍼티를 추가하기 전에 먼저 이미 존재하는지 여부를 확인하는 것이 최선입니다.

다음의 예제를 살펴보도록 합니다.

javascript

// 위험하다.
var MYAPP = {};

// 개선안
if (typeof MYAPP === 'undefined') {
    MYAPP = {};
}

// 또는 더 짧게 작성할 수 있다.
var MYAPP = MYAPP || {};

이렇게 추가되는 확인 작업 때문에 상당량의 중복 코드가 생겨날 수 있습니다.

예를 들어 MYAPP.modules.module2 를 정의하려면, 각 단계의 객체와 프로퍼티를 정의할 때마다 확인 작업을 거쳐야 하므로 코드가 세 번 중복됩니다.

따라서 네임스페이스 생성의 실제 작업을 맡아 줄 재사용 가능한 함수를 만들어두면 편리합니다.

다음은 네임스페이스 함수를 구현한 예제입니다.

다음과 같은 방식은 해당 네임스페이스가 존재하면 덮어쓰지 않기 때문에 기존 코드를 망가뜨리지 않습니다.

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;

};

이 코드는 다음 모든 예에서 사용할 수 있습니다.

javascript

var module2 = MYAPP.namespace('MYAPP.modules.module2');
console.log(module2);
console.log(module2 === MYAPP.modules.module2); // true 가 기록

// 첫 부분의 'MYAPP' 을 생략하고도 사용할 수 있다.
MYAPP.namespace('modules.module10');

// 매우 긴 네임스페이스를 만들어 본다.
MYAPP.namespace('once.upon.a.time.there.was.this.long.nested.property');

console.log(MYAPP);

다음의 그림은 위 예제를 요소 검사기로 MYAPP 을 실제로 검사했을 때의 모습입니다.

Jaehee's WebClub