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