[javascript patterns] 스터디 11

즉시 객체 초기화

코드부터 보자.

({
  //여기에 설정 값들을 정의한다.
  maxwidth: 600,
  maxheight: 400,

  //메서드도 정의할 수 있다.
  gimmeMax: function() {
    return this.maxwidth + 'x' + this.maxheight;
  },

  // 초기화
  init: function() {
    console.log(this.gimmeMax());
    //초기화작업실시...
  }
}).init();

초기화 시점의 분기

초기화 시점 분기(로드타임 분기)는 최적화 패턴이다. 브라우저 탐지(또는 기능 탐지)가 전형적인 예다.

//변경 이전
var utils = {
  addListener: function(el, type, fn) {
    if (typeof window.addEventListener === 'function') {
      el.addEventListener(type, fn, false);
    } else if (typeof document.attachEvent === 'function') {
      el.attachEvent('on' + type, fn);
    } else { // 구형의 브라우저
      el['on' + type] = fn;
    }
  },
  removeListener: function(el, type, fn) {
      // 거의 동일한 코드
  }
};

이 코드는 약간 비효율적이다. utils.addListener()나 utils.removeListener()를 호출할 때마다 똑같은 확인 작업을 반복해서 실행한다.

// 변경 이후

// 인터페이스
var utils = { addListener: null, removeListener: null};

// 구현
if (typeof window.addEventListener === 'function') {
  utils.addListener = function(el, type, fn) {
    el.addEventListener(type, fn, false);
  };
  utils.removeListener = function(el, type, fn) {
    el.removeEventListener(type, fn, false);
  };
else if (typeof document.attachEvent === 'function') { // IE
  utils.removeListener = function (el, type, fn) {
    el.detachEvent('on'+type, fn);
  };
} else { // 구형브라우저
  utils.addListener = function (el, type, fn) {
    el['on' + type] = fn;
  };
  utils.removeListener = function (el, type, fn) {
    el['on' + type] = null;
  };
}