Js高级：面向对象--tab栏跳转的实现

两大编程思想

两大编程思想：面向过程和面向对象。

面向过程是分析解决问题所需要的步骤，然后用 函数把这些步骤一步一步地实现，使用的时候在一个一个的一次调用。

面向对象是把一个事务分解成一个个对象，由对象之间分工合作。

ES6中的类和对象

 ES6中类与对象

类是抽象的，泛指的。是指抽取出对象公共的属性和方法组织成一个模板。

对象是具体的。类的实例化可以获得对应类的对象。

ES6  创建类和this指向

创建类

constructor()方法是类的类的构造函数，用于传递参数，返回实例化对象。通过new生成实例化对象的时候会自动调用这个方法。如果没有显示，类内部会自动为我们创建缺省构造器。

construct（）方法里面的this指向实例化对象。

类里面的普通方法指向函数的调用者。

class Animal {
    constructor(name,age){
        //constructor里面的this指向的实例化的对象
        this.name=name;
        this.age=age;
        this.say()
    }
    say(){
        console.log('我是动物')
        //方法里面的this指向方法调用者
        console.log(this.name)
    }
}
var bird=new Animal('mimi',1)

运行结果：

 Tab栏跳转的实现

实现思想：抽象出Tab对象，对象里面有跳转、添加、删除、编辑的功能。

var _this//声明自定义的全局变量，永远指向全局的this（实例化的对象）
class Tab{
  constructor(id) {
    _this=this
    this.tab = document.querySelector(id)
    this.add = this.tab.querySelector('.tabadd')
    this.ul = this.tab.querySelector('.fisrstnav ul')
    this.fsection=this.tab.querySelector('.tabscon')
    this.init()
  }
  init() {
    this.updateArray()
    // 给add添加addTab方法
    this.add.onclick = this.addTab
    
    // 遍历lis数组，给tab栏上的每个tab标签贴上index
    for (let i = 0; i < this.lis.length;i++){
      this.lis[i].index = i
      /* this.lis[i].onclick = function () {
        // console.log(this.index)//方法里面的this指向事件的触发者this.lis[i]
      } */
      this.lis[i].onclick = this.change
      // 给remove添加关闭方法
      this.remove[i].onclick = this.deleteTab
      // 给spans的鼠标双击事件添加方法
      this.spans[i].ondblclick=this.editTab
    }
  }
  // 每次动态新增或者删除都需要重新获取新的元素
  updateArray() {
    this.lis = this.tab.querySelectorAll('li')
    this.section = this.tab.querySelectorAll('section')
    this.remove = this.tab.querySelectorAll('.icon-guanbi')
    this.spans = this.tab.querySelectorAll('.fisrstnav li span:first-child');
  }
  // 排他思想的切换，将初始所有lis和section数组里面的元素类名清空
  clearner() {
    for (let i = 0; i < this.lis.length; i++){
      this.lis[i].className = '',
      this.section[i].className=''
    }
  }
  // tab栏的切换方法
  change(){
    // console.log(this)//li
    _this.clearner()//注意：这里调用的是全局的方法
    this.className = 'liactive'
    _this.section[this.index].className='conactive'
  }
  // tab栏的添加方法
  addTab() {
    _this.clearner()//先将原来的类名清空
    // this指向的add（类名为tabadd的元素）
    let random=Math.random()
    let li ='<li class="liactive"><span>新的测试</span><span class="iconfont icon-guanbi"></span></li>'
    let section = '<section class="conactive">测试'+random+'</section>'
    _this.ul.insertAdjacentHTML('beforeend', li)
    _this.fsection.insertAdjacentHTML('beforeend', section)
    // 重新更新li和section数组
    _this.init()
    
  }
  // tab栏的删除方法
  deleteTab(e) {
    e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
    var index = this.parentNode.index
    _this.lis[index].remove()
    _this.section[index].remove()
    // 当我们删除的不是选中状态的li 的时候,原来的选中状态li保持不变
    if (document.querySelector('.liactive')) return;
    // 当我们删除了选中状态的这个li 的时候, 让它的前一个li 处于选定状态
    index--;
    // 手动调用我们的点击事件  不需要鼠标触发(当前面的条件为真才会触发后面的事件)
    _this.lis[index] && _this.lis[index].click();
  }
  editTab() {
    // 原来span里面的innerHTML
    var str=this.innerHTML
    // 双击禁止选定文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.innerHTML = '<input type="text"/>'
    var input = this.children[0]
    input.value = str
    // 双击时input里面的value处于选中状态
    input.select()
    // 当我们离开文本框就把input.value里面的值赋给span(onblur失去焦点事件)
    input.onblur = function () {
      this.parentNode.innerHTML=this.value
    }
    // 当我们按下回车，手动让input失去焦点触发input的onblur事件
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        // 手动调用表单失去焦点事件，不需要鼠标离开
        this.blur()
        /* onblur是原生的js写法，可以直接写到元素的属性中或者在脚本中定义或者用于直接绑定事件；blur时jquery中的方法，直接绑定对象 */
      }
    }
  }
}
new Tab('#tab')