TabView 리팩토링

Author: jeonghwan-kim

src/View.js

@@ -2,5 +2,5 @@ import MainController from './controllers/MainController.js'
 import './app.scss';
 
 document.addEventListener('DOMContentLoaded', () => {
-  MainController.init()
+  new MainController()
 })

src/app.js

@@ -37,26 +37,6 @@ input[type=text] {
   border: 1px solid #ccc;
 }
 
-ul.tabs {
-  display: flex;
-}
-
-.tabs li {
-  display: inline-block;
-  width: 50%;
-  padding: 15px;
-  text-align: center;
-  box-sizing: border-box;
-  border-bottom: 1px solid #ccc;
-  background-color: #eee;
-  color: #999;
-}
-
-.tabs li.active {
-  background-color: #2ac1bc;
-  color: #fff;
-}
-
 .list li {
   box-sizing: border-box;
   display: block;

src/app.scss

@@ -8,85 +8,69 @@ import SearchModel from '../models/SearchModel.js'
 import KeywordModel from '../models/KeywordModel.js'
 import HistoryModel from '../models/HistoryModel.js'
 
-const tag = '[MainController]'
 
-export default {
-  init() {
-    FormView.setup(document.querySelector('form'))
-      .on('@submit', e => this.onSubmit(e.detail.input))
-      .on('@reset', e => this.onResetForm())
+export default class MainController {
+  constructor() {
+    const formViewEl = document.querySelector('form')
+    const tabViewEl = document.querySelector('#tabs')
+    const keywordViewEl = document.querySelector('#search-keyword')
+    const historyViewEl = document.querySelector('#search-history')
+    const resultViewEl = document.querySelector('#search-result')
 
-    TabView.setup(document.querySelector('#tabs'))
+    this.formView = new FormView(formViewEl)
+      .on('@submit', e => this.search(e.detail.input))
+      .on('@reset', () => this.renderView())
+
+    this.tabView = new TabView(tabViewEl)
       .on('@change', e => this.onChangeTab(e.detail.tabName))
 
-    KeywordView.setup(document.querySelector('#search-keyword'))
-      .on('@click', e => this.onClickKeyword(e.detail.keyword))
+    this.keywordView = new KeywordView(keywordViewEl)
+      .on('@click', e => this.search(e.detail.keyword))
 
-    HistoryView.setup(document.querySelector('#search-history'))
-      .on('@click', e => this.onClickHistory(e.detail.keyword))
+    this.historyView = new HistoryView(historyViewEl)
+      .on('@click', e => this.search(e.detail.keyword))
       .on('@remove', e => this.onRemoveHistory(e.detail.keyword))
 
-    ResultView.setup(document.querySelector('#search-result'))
+    this.resultView = new ResultView(resultViewEl)
 
     this.selectedTab = '추천 검색어'
     this.renderView()
-  },
-  search(query) {
-    FormView.setValue(query)
-    SearchModel.list(query).then(data => {
-      this.onSearchResult(data)
-    })
-  },
-  renderView() {
-    console.log(tag, 'rednerView()')
-    TabView.setActiveTab(this.selectedTab)
+  }
 
-    if (this.selectedTab === '추천 검색어') {
-      this.fetchSearchKeyword()
-      HistoryView.hide()
-    } else {
-      this.fetchSearchHistory()
-      KeywordView.hide()
-    }
+  async search(query) {
+    this.formView.setValue(query)
+    const data =  await SearchModel.list(query)
+    this.onSearchResult(data)
+  }
 
-    ResultView.hide()
-  },
-  fetchSearchKeyword() {
-    KeywordModel.list().then(data => {
-      KeywordView.render(data)
-    })
-  },
-  fetchSearchHistory() {
-    HistoryModel.list().then(data => {
-      const a = HistoryView.render(data)
-      a.bindRemoveBtn()
-    })
-  },
-
-  onSubmit(input) {
-    console.log(tag, 'onSubmit()', input)
-    this.search(input)
-  },
-  onResetForm() {
-    console.log(tag, 'onResetForm()')
-    this.renderView()
-  },
   onSearchResult(data) {
-    TabView.hide()
-    KeywordView.hide()
-    HistoryView.hide()
-    ResultView.render(data)
-  },
+    this.tabView.hide()
+    this.keywordView.hide()
+    this.historyView.hide()
+    this.resultView.mount(data)
+  }
+
   onChangeTab(tabName) {
     this.selectedTab = tabName
     this.renderView()
-  },
-  onClickKeyword(keyword) {
-    this.search(keyword)
-  },
-  onClickHistory(keyword) {
-    this.search(keyword)
-  },
+  }
+
+  async renderView() {
+    this.tabView.setActiveTab(this.selectedTab)
+
+    if (this.selectedTab === '추천 검색어') {
+      const data = await KeywordModel.list()
+      this.keywordView.mount(data)
+      this.historyView.hide()
+    } else {
+      const data = await HistoryModel.list()
+      this.historyView.mount(data).bindRemoveBtn()
+      this.keywordView.hide()
+    }
+
+    this.resultView.hide()
+  }
+
   onRemoveHistory(keyword) {
     HistoryModel.remove(keyword)
     this.renderView()

src/controllers/MainController.js

@@ -16,10 +16,7 @@ <h2 class="container">검색</h2>
       </form>
 
       <div class="content">
-        <ul id="tabs" class="tabs">
-          <li>추천 검색어</li>
-          <li>최근 검색어</li>
-        </ul>
+        <div id="tabs"></div>
         <div id="search-keyword"></div>
         <div id="search-history"></div>
         <div id="search-result"></div>

src/index.html

@@ -11,7 +11,7 @@ const data = [{
 ]
 
 export default {
-  list(query) {
+  list() {
     return new Promise(res => {
       setTimeout(() => {
         res(data)

src/models/SearchModel.js

@@ -1,46 +1,41 @@
 import View from './View.js'
 
-const tag = '[FormView]'
+export default class FormView extends View {
+  constructor (el) {
+    super(el)
+    this._inputEl = el.querySelector('[type=text]')
+    this._resetEl = el.querySelector('[type=reset]')
+    this._showResetBtn(false)
+    this._bindEvents()
+    return this
+  }
+  
+  _showResetBtn(show = true) {
+    this._resetEl.style.display = show ? 'block' : 'none'
+  }
+  
+  _bindEvents() {
+    this.on('submit', e => e.preventDefault())
+    this._inputEl.addEventListener('keyup', e => this._onKeyup(e))
+    this._resetEl.addEventListener('click', () => this._onClickReset())
+  }
+  
+  _onKeyup(e) {
+    const enter = 13
+    this._showResetBtn(this._inputEl.value.length)
+    if (!this._inputEl.value.length) this.emit('@reset')
+    if (e.keyCode !== enter) return
+    this.emit('@submit', { input: this._inputEl.value })
+  }
+  
+  _onClickReset() {
+    this.emit('@reset')
+    this._showResetBtn(false)
+  }
+  
+  setValue(value = '') {
+    this._inputEl.value = value
+    this._showResetBtn(this._inputEl.value.length)
+  }
 
-const FormView = Object.create(View)
-
-FormView.setup = function (el) {
-  this.init(el)
-  this.inputEl = el.querySelector('[type=text]')
-  this.resetEl = el.querySelector('[type=reset')
-  this.showResetBtn(false)
-  this.bindEvents()
-  return this
-}
-
-FormView.showResetBtn = function (show = true) {
-  this.resetEl.style.display = show ? 'block' : 'none'
-}
-
-FormView.bindEvents = function () {
-  this.on('submit', e => e.preventDefault())
-  this.inputEl.addEventListener('keyup', e => this.onKeyup(e))
-  this.resetEl.addEventListener('click', e => this.onClickReset())
-}
-
-FormView.onKeyup = function (e) {
-  const enter = 13
-  this.showResetBtn(this.inputEl.value.length)
-  if (!this.inputEl.value.length) this.emit('@reset')
-  if (e.keyCode !== enter) return
-  this.emit('@submit', {
-    input: this.inputEl.value
-  })
-}
-
-FormView.onClickReset = function () {
-  this.emit('@reset')
-  this.showResetBtn(false)
 }
-
-FormView.setValue = function (value = '') {
-  this.inputEl.value = value
-  this.showResetBtn(this.inputEl.value.length)
-}
-
-export default FormView

src/views/FormView.js

@@ -1,35 +1,34 @@
 import KeywordView from './KeywordView.js'
 
-const tag = '[HistoryView]'
+export default class HistoryView extends KeywordView {
+  constructor(el) {
+    super(el);
+    this._messages.NO_KEYWORDS = '검색 이력이 없습니다'
 
-const HistoryView = Object.create(KeywordView)
-
-HistoryView.messages.NO_KEYWORDS = '검색 이력이 없습니다'
-
-HistoryView.getKeywordsHtml = function (data) {
-  return data.reduce((html, item) => {
-    html += `<li data-keyword="${item.keyword}">
-      ${item.keyword} 
-      <span class="date">${item.date}</span>
-      <button class="btn-remove"></button>
-      </li>`
-    return html
-  }, '<ul class="list">') + "</ul>"
-}
-
-HistoryView.bindRemoveBtn = function () {
-  Array.from(this.el.querySelectorAll('button.btn-remove')).forEach(btn => {
-    btn.addEventListener('click', e => {
-      e.stopPropagation()
-      this.onRemove(btn.parentElement.dataset.keyword)
+    return this;
+  }
+  
+  _getKeywordsHtml (data) { 
+    return data.reduce((html, item) => {
+      html += `<li data-keyword="${item.keyword}">
+        ${item.keyword} 
+        <span class="date">${item.date}</span>
+        <button class="btn-remove"></button>
+        </li>`
+      return html
+    }, '<ul class="list">') + "</ul>"
+  }
+  
+  bindRemoveBtn () {
+    Array.from(this.el.querySelectorAll('button.btn-remove')).forEach(btn => {
+      btn.addEventListener('click', e => {
+        e.stopPropagation()
+        this._onRemove(btn.parentElement.dataset.keyword)
+      })
     })
-  })
+  }
+  
+  _onRemove (keyword) {
+    this.emit('@remove', { keyword })
+  }
 }
-
-HistoryView.onRemove = function (keyword) {
-  this.emit('@remove', {
-    keyword
-  })
-}
-
-export default HistoryView