생성자 패턴
객체를 동적으로 생성하는 방법
Health 함수는 new 키워드로 불리면서 객체를 생성하는 함수 역할을 수행함
여기서 Health 를 생성자라고 한다
🔥Prototype으로 동일 메모리에 메서드를 올려두고 사용할 수 있음!!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | function Health(name,time){ this.name = name; this.time = time; } Health.prototype.showInfo = function(){ return this.name + "님 오늘은 " + this.time + "에 운동을 하셨군요!"; } var crong = new Health("Crong","PM 10:00"); var popi = new Health("Popi","AM 06:00"); console.log(crong.showInfo()); console.log(popi.showInfo()); console.log(crong.showInfo === popi.showInfo); | cs |
ES6 Class 로 사용하기
다른 객체지향처럼 ES6 에서는 Class를 사용할 수 있음
Prototype 을 따로 안하고 Class 안의 메서드로 작성하여 사용함
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class Health { constructor(name,time){ this.name = name; this.time = time; } showInfo() { return this.name + "님 오늘은 " + this.time + "에 운동을 하셨군요!"; } } var crong = new Health("Crong","PM 10:00"); var popi = new Health("Popi","AM 06:00"); console.log(crong.showInfo()); console.log(popi.showInfo()); console.log(crong.showInfo === popi.showInfo); | cs |
생성자 패턴을 사용하여 TAB UI 만들기
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 | <html> <head> <title>TabUI</title> <style> * { margin: 0px; padding: 0px; } h2 { text-align: center; } .tab { width: 600px; margin: 0 auto; background-color: bisque; } .tab-menu div { display: inline-block; width: 146px; height: 50px; line-height: 50px; text-align: center; cursor: pointer; } .section { background-color: antiquewhite; padding: 5%; } </style> </head> <body> <h2>TAB UI TEST</h2> <div class="tab"> <div class="tab-menu"> <div>crong</div> <div>jk</div> <div>honux</div> <div>pobi</div> </div> <div class="section"> </div> </div> <script> function Tab() { this.menu = document.querySelector(".tab-menu"); this.registerEvents(); } Tab.prototype = { registerEvents: function () { this.menu.addEventListener("click", function (evt) { this.sendAjax("./json.txt", evt.target.innerText); }.bind(this)); }, sendAjax: function (url, clicked) { var oReq = new XMLHttpRequest(); oReq.addEventListener("load", function () { var data = JSON.parse(oReq.responseText); this.makeTemplate(data, clicked); }.bind(this)); oReq.open("GET", url); oReq.send(); }, makeTemplate: function (data, clicked) { var resultHTML = ""; var html = document.querySelector("#tab-content").innerHTML; for (var i = 0, len = data.length; i < len; i++) { if (data[i].name == clicked) { resultHTML = html.replace("{name}", data[i].name).replace("{favorites}", data[i].favorites.join(" ")); break; } } var section = document.querySelector(".section").innerHTML = resultHTML; } } var tab = new Tab(); </script> <script id="tab-content" type="text/template"> <h4>{name}</h4> <p>{favorites}</p> </script> </body> </html> | cs |
'Dev > Javascript' 카테고리의 다른 글
| [JS] 정규표현식을 이용한 유효성검사 (0) | 2018.09.03 |
|---|---|
| [JS] Handlebar 템플릿 라이브러리 (0) | 2018.08.22 |
| [JS] DOM 심화 (1) | 2018.07.11 |
| [JS] Javascript 배열, 객체 (0) | 2018.07.10 |
| [JS] Javascript 기초정리2 (0) | 2018.05.22 |
