ES6學習筆記（三）：教你用js面向對象思惟來實現 tab欄增刪改查功能

前兩篇文章主要介紹了類和對象、類的繼承，若是想了解更多理論請查閱《ES6學習筆記（一）：輕鬆搞懂面向對象編程、類和對象》、《ES6學習筆記（二）：教你玩轉類的繼承和類的對象》，今天主要來分享關於如何用js面向對象的思惟來實現tab欄的一些相關的功能。

要實現的功能分析

1. 點擊tab欄能夠切換效果
2. 點擊+號，能夠添加tab項和內容項
3. 點擊X號，能夠刪除當前的tab項和內容項
4. 點擊tab文字或者內容項文字，能夠修改裏面的字體內容

抽像對象： Tab對象 （增刪改查功能）
實現功能效果以下圖：

首先創建一個class 類Tab:

let that
class Tab {
  constructor(id) {
    that=this
    // 獲取元素
    this.main = document.getElementById('tab')
    //獲取li的父元素
    this.ul = this.main.querySelector('.firstnav ul:first-child')
    // 獲取section的父元素
    this.fSection = this.main.querySelector('.tabscon')
    this.add = this.main.querySelector('.tabadd')
    this.remove = this.main.querySelectorAll('i')
    this.init()
  }
  //初始化
  init() {
    this.updateNode()
    // init 初始化操做讓相關的元素綁定事件
    this.add.onclick = this.addTab
    for(var i = 0; i<this.lis.length; i++) {
      this.lis[i].index = i
      this.lis[i].onclick = this.togggleTab
      this.remove[i].onclick = this.removeTab
      this.spans[i].ondblclick = this.editTab
      this.sections[i].ondblclick = this.editTab
    }

  }
  //咱們動態添加元素，刪除元素時，須要重新獲取對應的元素
  updateNode() {
    this.lis = this.main.querySelectorAll('li')
    this.sections = this.main.querySelectorAll('section')
    this.remove = this.main.querySelectorAll('i') 
    this.spans = this.main.querySelectorAll('span')
  }
  //切換功能
  togggleTab() {}
  //清除li和section的class，主要實現切換功能用
  clearClass() {
    for(var i = 0; i< this.lis.length; i++) {
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }
  //添加功能
  addTab() {}
  //刪除功能
  removeTab(e) {}
  // 修改功能
  editTab() {}
}
let tab = new Tab('#tab')

切換功能

1. 點擊上面的tab標題實現切換功能，下面對應的section也顯示，其餘的隱藏
2. 實現思路，先去掉已有的選中class,
3. 根據li的索引值，找到要顯示的section,添加對應的class，使其顯示

實現的主要代碼是：

that.clearClass()
this.className='liactive'
that.sections[this.index].className='conactive'

添加功能實現

1. 點擊+ 能夠實現添加新的選項卡和內容
2. 第一步：建立新的選項卡li和新的內容section
3. 第二步： 把建立的兩個元素追加到對應的父元素中
4. 之前的作法：動態建立元素createElement,可是元素裏面內容較多，須要innerHTML賦值在appendChild追加到父元素裏面
5. 如今高級作法，利用insertAdjacentHTML()能夠直接把字符串格式元素添加到父元素中，appendChild不支持追加字符串的子元素，insertAdjacentHTML支持追加字符串的元素

實現功能的主要代碼是：

//建立li元素和section元素
    that.clearClass()
    let li = ' <li class="liactive" ><span>新選項卡</span><i>X</i></li>'
    let section = '<section class="conactive">新內容區</setion>'
    that.ul.insertAdjacentHTML('beforeend', li)
    that.fSection.insertAdjacentHTML('beforeend',section)
    that.init()

刪除功能

1. 點擊X能夠刪除當前的選項卡和當前的section
2. X是沒有索引號的，可是它的父元素li有索引號，這個索引號正是咱們想要的索引號
3. 因此核心思路就是：點擊x號能夠刪除這個索引號對應的li和section

實現功能的主要代碼是：

e.stopPropagation();//阻止冒泡，
    let index = this.parentNode.index
    //根據索引號刪除對應的li 和section
    that.lis[index].remove()
    that.sections[index].remove()
    that.init()
    //當咱們刪除的不是選中狀態的元素時，原來的選中狀態保持不變
    if(document.querySelector('.liactive')) return
    //當咱們刪除 了選中狀態的生活，讓它前一個li處於選中狀態
    index--
    //手動調用click事件，不須要鼠標觸發
    that.li[index] && that.lis[index].click()

編輯功能

1. 雙擊選項卡li或者section裏面的文字，能夠實現修改功能
2. 雙擊事件是：ondblclick
3. 若是雙擊文字，會默認選定文字，此時須要雙擊禁止選中文字
4. window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
5. 核心思路：雙擊文字的時候，在裏面生成一個文本框，當失去焦點或者按下回車而後把文本輸入的值給原先元素便可

實現功能的主要代碼是：

let str = this.innerHTML
    //雙擊禁止選定文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.innerHTML ='<input type="text" value="'+ str +'"/>'
    let input = this.children[0]
    //文本框裏面的文字處於選中狀態
    input.select() 
    //當鼠標離開文本框就把文本框的值給span
    input.onblur = function() {
      this.parentNode.innerHTML=input.value

    }
    // 按回車鍵也餓能夠把文本框裏的值給span
    input.onkeyup = function(e) {
      if(e.keyCode === 13) {
        this.blur()
      }
    }

總結

這篇文章主要是經過我學習的技術總結後來分享瞭如何用面向對象的思路方法來實現tab欄的切換、編輯、增長、刪除功能。用到了不少ES6的一些語法。
案例源碼地址：https://github.com/qiuqiulanfeng/tab