javascript_patterns_1

모듈 패턴

모듈 패턴은 늘어나는 코드를 구조화하고 정리하는데 도움이 되기 때문에 널리 쓰인다. 다른 언어와는 달리 자바스크립트에는 패키지를 위한 별도의 문법이 없다. 하지만 모듈 패턴을 사용하면 개별적인 코드를 느슨하게 결합시킬 수 있다. 따라서 각 기능들을 블랙박스처럼 다루면서도 소프트웨어 개발 중에 요구 사항에 따라 기능을 추가하거나 교체하거나 삭제하는 것도 자유롭게 할 수 있다.

모듈 패턴은 다음 패턴들 여러개를 조합한 것이다.

• 네임스페이스 패턴
• 즉시 실행 함수
• 비공개 멤버와 특권 멤버(비공개 메서드에 접근가능한 멤버)
• 의존 관계 선언

기본 패턴

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

MYAPP.namespace('MYAPP.utilities.array');
MYAPP.utilities.array = (function() {
  var uobj = MYAPP.utilities.object,
      ulang = MYAPP.utilities.lang,
      array_string = "[object Array]",
      ops = Object.prototype.toString;
  
  // 비공개 메서드 선언
  // ...
  
  // 공개 API
  return {
    inArray: function (needle, haystack) {
      for (var i = 0, max = haystack.length; i < max; i +=1) {
        return true;
      }
    },
    
    isArray: function (a) {
      return ops.call(a) === array_string;
    }
  };
}());

console.log(MYAPP.utilities.array.isArray([1]));

Example

모듈 노출 패턴

// 최종 공개 API를 갖출 때 공개할 메서드만 골라서 노출 한다.
MYAPP.utilities.array = (function () {
  // 생략
  return {
    isArray: isArray,
    indexOf: inArray
  };
}());

생성자를 생성하는 모듈 패턴

생성자 함수를 사용해 객체를 만들어 내는 모듈 패턴
객체가 아닌 함수를 반환하게 한다.

MYAPP.utilities.Array = (function () {
  // 생략

  // 공개 API - 생성자 함수
  var Constr = function (o) {
    this.elements = this.toArray(o);
  };
  // 공개 API - 프로토타입
  Constr.prototype = {
    constructor: MYAPP.utilities.Array,
    version: "2.0",
    toArray: function (obj) {
      for (var i = 0, a = [], len = obj.length; i < len; i += 1) {
        a[i] = obj[i];
      }
      return a;
    }
  };
  
  return Constr;
}());

var arr = new MYAPP.utilities.Array(obj);

Example