생성자패턴으로 TabUI만들기

25 May 2021

Reading time ~2 minutes

이전에 구현했던 코드

<html>
<header>
    <link rel="stylesheet" href="tabui.css">
    <style>
    h2 {
    text-align: center
}

h2,
h4 {
    margin: 0px;
}

.tab {
    width: 600px;
    margin: 0px auto;
}

.tabmenu {
    background-color: bisque;
}

.tabmenu>div {
    display: inline-block;
    width: 146px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

.content {
    padding: 5%;
    background-color: antiquewhite;
}
</style>
</header>

<body>
    <h2> TAB UI TEST</h2>

    <div class="tab">
        <div class="tabmenu">
            <div>crong</div>
            <div>jk</div>
            <div>pobi</div>
            <div>honux</div>
        </div>
        <section class="content">
            <h4>hello jk</h4>
            <p>golf, facebook</p>
        </section>
    </div>
    <script>

        function makeTemplate(data, clickedName) {
            var html = document.getElementById("tabcontent").innerHTML;
            var resultHTML = "";

            for (var i = 0; i < data.length; i++) {
                if (data[i].name === clickedName) {
                    resultHTML = html.replace("{name}", data[i].name)
                        .replace("{favorites}", data[i].favorites.join(" "));
                    break;
                }
            }
            document.querySelector(".content").innerHTML = resultHTML;
        }

        function sendAjax(url, clickedName) {
            var oReq = new XMLHttpRequest();
            oReq.addEventListener("load", function () {
                var data = JSON.parse(oReq.responseText);
                makeTemplate(data, clickedName);
            });
            oReq.open("GET", url);
            oReq.send();
        }

        var tabmenu = document.querySelector(".tabmenu");
        tabmenu.addEventListener("click", function (evt) {
            sendAjax("./json.txt", evt.target.innerText);
        });
    </script>

    <script id="tabcontent" type="my-template">
            <h4>hello {name}</h4>
            <p>{favorites}</p>
       </script>
</body>

</html>

생성자 패턴으로 TabUI 만들기

<html>
<header>
    <link rel="stylesheet" href="tabui.css">
    <style>
    h2 {
    text-align: center
}

h2,
h4 {
    margin: 0px;
}

.tab {
    width: 600px;
    margin: 0px auto;
}

.tabmenu {
    background-color: bisque;
}

.tabmenu>div {
    display: inline-block;
    width: 146px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    cursor: pointer;
}

.content {
    padding: 5%;
    background-color: antiquewhite;
}
</style>
</header>

<body>
    <h2> TAB UI TEST</h2>

    <div class="tab">
        <div class="tabmenu">
            <div>crong</div>
            <div>jk</div>
            <div>pobi</div>
            <div>honux</div>
        </div>
        <section class="content">
            <h4>hello jk</h4>
            <p>golf, facebook</p>
        </section>
    </div>
    <script>

        function Tab(tabElement) {
            this.tabmenu = tabElement;
            this.registerEvents();
        }

        Tab.prototype = {
            registerEvents : function() {
                this.tabmenu.addEventListener("click", function (evt) {
                    this.sendAjax("./json.txt", evt.target.innerText);
                }.bind(this)); //bind 해주지 않으면 this가 가리키는 것은 tabmenu
            },
            sendAjax : function(url, clickedName) {
                var oReq = new XMLHttpRequest();
                oReq.addEventListener("load", function () {
                    var data = JSON.parse(oReq.responseText);
                    this.makeTemplate(data, clickedName);
                }.bind(this)); //bind 해주지 않으면 this가 가리키는 것은 oReq
                oReq.open("GET", url);
                oReq.send(); 
            },
            makeTemplate : function(data, clickedName) {
                var html = document.getElementById("tabcontent").innerHTML;
                var resultHTML = "";

                for (var i = 0; i < data.length; i++) {
                    if (data[i].name === clickedName) {
                        resultHTML = html.replace("{name}", data[i].name)
                            .replace("{favorites}", data[i].favorites.join(" "));
                        break;
                    }
                }
                document.querySelector(".content").innerHTML = resultHTML
            }
        }

        var tabmenu = document.querySelector(".tabmenu");
        var o = new Tab(tabmenu);

    </script>

    <script id="tabcontent" type="my-template">
            <h4>hello {name}</h4>
            <p>{favorites}</p>
       </script>
</body>

</html>

Tab.prototype에서 sendAjax 함수라든지, makeTemplate 함수에 대해 bind(this)를 해주지 않으면 this가 가리키는 것은 Tab이 아니게 된다
- 각각 tabmenu, oReq를 가리킴 (주석참고)

WebProgramming