<5. 생성자패턴으로 TabUI 만들기>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <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)); //sendAjax를 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가 가리키는 것이 XMLHttpRequest 객체가 될 것이다 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> | cs |
'BoostCource > Front-end' 카테고리의 다른 글
| #05. FE - form 데이터 보내기 (0) | 2018.11.16 |
|---|---|
| [FE] 05. JavaScript Regular expression(정규표현식) (0) | 2018.11.16 |
| [FE] 05. 생성자 패턴 (0) | 2018.10.01 |
| [FE] 04. 클린코드 (0) | 2018.09.27 |
| [FE] 04. handlebar를 활용한 템플릿 작업 (0) | 2018.09.27 |