javascript_in_depth_10

디자인 패턴 실용 - Self-defining function 패턴

Self-defining function은 자바스크립트의 변수에 함수를 쉽게 재정의하고 덮어쓸 수 있는 장점에서 나온 디자인 패턴이다.

활용

자바스크립트로 개발하다 보면 특정 함수를 호출하기 전에 초기화 작업을 수행해야 하는 때가 많다. 이럴 때 최초 즉시 호출 함수를 이용해서 Init-time branching 패턴 등으로 초기화하는 방법도 있지만, 자주 호출되지 않거나 웹 페이지상에서 한 번도 호출되지 않는 함수는 초기화 단계를 무조건 실행하도록 하는 것은 자원을 추가로 소모하게 된다.
이럴 때 Self-defining function 패턴을 사용하면 초기화 단계들의 컴퓨팅 자원 소모를 분산할 수 있다. 초기화 단계를 분산함으로써 얻을 수 있는 이점은 바로 사용자 경험이 개선될 수 있다는 점이다.

특징

Self-defining function 패턴의 장점은 외부에서 해당 함수를 호출할 때 보이는 변경 점은 없지만, 내부적으로 초기화 단계를 거치고 나서 이후의 처리 프로세스를 최적화할 수 있다는 점이다. 때에 따라서는 자동으로 생성되는 클로저를 활용해서 초기화 단계에서 생성되거나 수집한 데이터를 보관하고 있을 수 있으므로 일회성 처리를 수용하기에 좋은 패턴이다. 단점이라면 불필요한 클로저가 생성되고 데이터가 메모리에 계속 남아있을 수 있다. 따라서 해당 변수를 한 번만 사용하고 사용 안 할 것이라면 그냥 undefined로 초기화 하는 것이 좋다.

예제

// Self-defining function 패턴을 이용한 getXHR 정의
// getXHR()은 최초로 호출될 때 XMLHttpRequest를 정의할지 분기하여 객체를 반환하고
// 호출된 getXHR() 함수를 다시 정의하여 이후에는 동일한 방법으로 객체를 생성하도록 한다.
var getXHR = function () {
    var xhr;
    if (window.XMLHttpRequest) {
        getXHR = function () {
            return new XMLHttpRequest();
        };
        return new XMLHttpRequest();
    }
    try {
        xhr = new ActiveXObject("MSXML2.XMLHTTP.6.0");
        getXHR = function () {
            return new new ActiveXObject("MSXML2.XMLHTTP.6.0");
        };
        return xhr;
    } catch (e) {
        try {
            xhr = new ActiveXObject("MSXML2.XMLHTTP.3.0");
            getXHR = function () {
                return new ActiveXObject("MSXML2.XMLHTTP.3.0");
            };
            return xhr;
        } catch (e) {
            alert("This browser does not support XMLHttpRequest")
        }
    }
};

// Self-defining function 패턴을 이용한 함수 초기화
// 최초 호출시 DOM 템플릿 생성과 DOM 탐색 결과를 그대로 이용하고
// 변경이 필요한 부분만 수정하는 방식

<html>
<head>
    <style>
    #commentWrapper {
        width: 200px;
    }
    .comment {
        width: 150px;
        display: inline-block;
    }
    .name {
        width: 40px;
        display: inline-block;
    }
    </style>
</head>
<body>
    <div id="commentWrapper">
        <div>
            <div class="comment">Comment</div>
            <div class="name">Name</div>
        </div>
    </div>

    <form id="formComment">
        <label>Comment: <input type="text" id="comment"></input></label>
        <label>Name: <input type="text" id="name"></input></label>
        <input type="submit"></input>
    </form>

    <script>
    (function () {
        var addComment = function () {
            var divCommentWrapper = document.getElementById("commentWrapper"),
                divCommentRow = document.createElement("div"),
                divComment = document.createElement("div"),
                divName = document.createElement("div"),
                inputComment = document.getElementById("comment"),
                inputName = document.getElementById("name");

            divComment.className = "comment";
            divName.className = "name";
            divCommentRow.appendChild(divComment);
            divCommentRow.appendChild(divName);

            addComment = function () {
                divComment.innerHTML = inputComment.value;
                divName.innerHTML = inputName.value;
                inputComment.value = "";
                inputName.value = "";

                divCommentWrapper.appendChild(divCommentRow.cloneNode(true));
            };
            addComment();
        };
        document.getElementById("formComment").addEventListener("submit", function () {
            addComment();
            event.returnValue = false;
            return false;
        });
    }());
    </script>
</body>
</html>

// Self-defining function 패턴을 이용한 인증 정보 보관 및 중복 요청 방지
(function () {
    var requestAuthentication = function (information) {
        var _requestAuthentication = requestAuthentication,
            authInformation = null;

        requestAuthentication = function (information) {
            if (authInformation === null) {
                alert("Already requesting");
                return;
            } else {
                return authInformation;
            }
        }

        sendRequest(information);

        function sendRequest(information) {
            var xhr = new XMLHttpRequest();
            xhr.open("POST", "/auth");
            xhr.onload = function () {
                alert("Authorized!");
                authInformation = xhr.responseText; 
                // 수행시에 원래 인증 요청 함수로 설정해놓을 수도 있다.
                // requestAuthentication = _requestAuthentication
            };
            xhr.onerror = function () {
                if (confirm("Error occurred, send again?")) {
                    sendRequest(information);
                }
            }
            xhr.send(information);
        }
    }

    requestAuthentication("name=hello&password=world");
}());

javascript_in_depth_10

디자인 패턴 실용 - Self-defining function 패턴

활용

특징

예제

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally