第一课：面向对象案例：tab切换（2021/4/10 - 2021/4/11）

// 功能需求:
// 1．点击tab栏,可以切换效果.
// 2．点击＋号,可以添加tab项和内容项.
// 3．点击x号,可以删除当前的tab项和内容项.
// 4．双击tab项文字或者内容项文字可以修改里面的文字内容.

// step1:抽取共用方法和属性

// 抽象对象: Tab对象
// 1．该对象具有切换功能
// 2.该对象具有添加功能
// 3.该对象具有删除功能
// 4.该对象具有修改功能
var that;
class Tab {
  constructor(id) {
    that = this;
    //  获取元素
    this.main = document.querySelector(id);
    this.add = this.main.querySelector('.tabadd');
    // li的父元素
    this.ul = this.main.querySelector('.firstnav ul:first-child');
    // section的父元素
    this.fsection = this.main.querySelector('.tabscon');
    this.init();
  }
  // 为了解决添加新的元素没有点击效果和状态显示异常的问题，新建一个新的方法
  // 获取所有的小li 和section
  updateNode(){
    this.lis = this.main.querySelectorAll('li'); //获取所有li
    this.section = this.main.querySelectorAll('section');//获取下面的所有section
  }
  // init 初始化操作让相关的元素绑定事件
  init(){
    this.updateNode();
    this.add.onclick = this.addTab;
    for(var i = 0; i< this.lis.length;i++){
      this.lis[i].index = i;//给每个li添加索引
      //给每个li添加点击事件
      this.lis[i].onclick = this.toggleTab;
    }
  }
  // 1.切换功能
  toggleTab(){
    that.clearClass(); //清除所有再设置更改的那一条
    this.className = 'liactive'; //this指向单个li
    that.sections[this.index].className = 'conactive'; //获取实例对象的sections
  }
  // 清除所有li和section的样式
  clearClass(){
    for(var i = 0;i<this.lis.length;i++){
      this.lis[i].className = '';
      this.section[i].className = '';
    }
  }
  // 2.添加功能
  // 第一步:创建新的选项卡li和新的内容section
  // 第二步:把创建的两个元素追加到对应的父元素中.

  addTab(){
    // 先所有class表现状态的都清除掉，再去添加新的 
    that.clearClass();
    // 设置一个随机数看看是不是每次创建都是不一样的
    var random = Math.random();
    // (1) 创建li元素和section元素
    var li = '<li class="liactive"><span>新选项卡</span><i class="iconfont icon-error"></i></li>'
    // section跟着一起添加
    var section = '<section class="conactive">测试 ' + random +'</section>'
    // (2) 把这两个元素追加到对应点父元素里面
    // appendChild方法需要创建新节点元素再添加，而这个方法可以通过字符串的形式添加html，更快捷方便
    that.ul.insertAdjacentHTML('beforeend',li);
    that.init(); //每次添加新标签都要重新获取之前以及现在的li和section的所有内容
   
  }
  // 3.删除功能
  removeTab(){}
  // 4.修改功能
  editTab(){}
}

var tab = new Tab('#tab'); //执行的时候立即执行constructor的函数