index.html
<body>
<div class="container">
<form>
<input type="text" placeholder="검색어를 입력하세요" autofocus>
<button type="reset" class = "btn-reset"></button>
</form>
</div>
<script type="module" src="./js/app.js"></script> <!--1. app.js-->
</body>
View.js
const tag = '[View]'
export default {
init(el) {
if (!el) throw el
console.log(el) ----->
this.el = el
return this
},
on(event, handler) {
this.el.addEventListener(event, handler)
return this
},
emit(event, data) {
const evt = new CustomEvent(event, { detail: data })
this.el.dispatchEvent(evt)
return this
},
hide() {
this.el.style.display = 'none'
return this
},
show() {
this.el.style.display = ''
return this
}
}
View에 관한 메소드 덩어리들을 모아 둔 거 같음
init메소드 : el값을 파라미터로 받음
만약 el값이 없을 경우에는 el값을 생략함 throw(예외처리함수)
//console.log(el)를 찍으면 태그들이 나옴
//console.log(this)를 찍으면 FormView값의 메소드들이 찍힘
this.el = el : 결국 FormView메소드. 태그들을 태그 값으로 만듬
return this : FormView메소드들을 리턴함
on메소드 : event와 handler를 파라미터로 받음
FormView.js
import View from './View.js'
const tag = '[FormView]'
const FormView = Object.create(View)
FormView.setup = function (a) {
this.init(a)
this.inputEl = a.querySelector('[type=text]')
this.resetEl = a.querySelector('[type=reset]')
this.showResetBtn(false)
}
FormView.showResetBtn = function(show =true) {
this.resetEl.style.display = show ? 'block' : 'none'
}
export default FormView
'FrontEnd > VanillaJs' 카테고리의 다른 글
| [VanillaJS] 추천 검색어(KeywordView) 생성하기 (0) | 2018.09.18 |
|---|---|
| [VanillaJS] 검색폼 구현 3 (0) | 2018.09.12 |
| [VanillaJS] 검색폼 구현 2 (0) | 2018.09.10 |
| [VanillaJS] 검색폼 구현 1 (0) | 2018.09.10 |
| [VanillaJS] 0.문서 구조 (0) | 2018.09.09 |
