javascript_in_depth_9

디자인 패턴 실용 - Init-time branching 패턴

Init-time branching 패턴은 자바스크립트에서 매우 유용한 패턴 중 하나이다. 이름 그대로 초기화 단계에서 분기하여 같은 함수를 환경에 따라 다르게 정의하는 것을 의미한다. 보통 웹페이지가 처음 열릴 때 실행된다고 해서 Init-branching 패턴이라고도 하며, 페이지가 로드될 때 실행되기 때문에 Load-branching 패턴이라고도 한다.

활용

이 패턴이 유용한 이유는 자바스크립트가 다양한 브라우저 환경에서 제공되어야 하기 때문이다. 따라서 주요 기능에 대해서 이러한 호환성을 보장해줄 떄 사용하면 좋은 패턴이다.

특징

Init-time branching 패턴의 장점은 브라우저 환경이나 상태에 따라서 같은 기능을 다양한 방법으로 제공할 수 있어서 매우 유용하다. 하지만 어찌되었든 최초 초기화 시점에 그러한 브라우저 환경과 상태를 확인하기 위한 추가 컴퓨팅 자원이 소모되므로 최초 초기화 때 소모하는 것이 나을지, 아니면 매번 컴퓨팅 자원을 소모하는 것이 나을지 판단하여 선택하면 좋다.

예제

// 표준 호환을 위한 이벤트 핸들러 함수 정의 방법
// 브라우저 종류와 버전에 따라서 구분하는 것이 아니라
// 현재 브라우저의 기능 여부를 기준으로 제공하는 방법이 좋다.
(function () {
    if (!Element.prototype.addEventListener) {
        if (Element.prototype.attachEvent) {
            Element.prototype.addEventListener = function (type, fn) {
                this.attachEvent("on" + type, fn);
            }
        } else {
            Element.prototype.addEventListener = function (type, fn) {
                this["on" + type] = fn;
            }
        }
    }

    if (!Element.prototype.removeEventListener) {
        if (Element.prototype.detachEvent) {
            Element.prototype.removeEventListener = function (type, fn) {
                this.detachEvent("on" + type, fn);
            }
        } else {
            Element.prototype.removeEventListener = function (type) {
                this["on" + type] = null;
            }
        }
    }
}());

XMLHttpRequest 객체 호환성 지원

XMLHttpRequest 객체는 현재 대부분 브라우저에서는 지원하나, Internet Explorer 낮은 버전에서는 사용할 수 없어서 이를 위한 호환성 설정이 필요하다.

// Init-time branching을 통한 getXHR() 함수 정의
var getXHR = (function () {
    var xhr;
    if (window.XMLHttpRequest) {
        return function () {
            return new XMLHttpRequest();
        }
    }
    try {
        xhr = new ActiveXObject("MSXML2.XMLHTTP.6.0");
        return function () {
            return new new ActiveXObject("MSXML2.XMLHTTP.6.0");
        }
    } catch (e) {
        try {
            xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");
            return function () {
                return new ActiveXObject("MSXML2.XMLHTTP.3.0");
            }
        } catch (e) {
            alert("This browser does not support XMLHttpRequest")
        }
    }
}());