01-js类和实例/tab栏切换案例

1. 在ES6中类没有变量提升，所以必须先定义类，才可以通过类实例化对象
   2. 类里面 添加this的变量为实例变量，不添加this的变量为类的静态变量
   3. 类里面的constructor函数中的this 指向实例对象，类中的方法函数中的this指针，指向了方法的调用者！

设置表单里面的value文字内容为选定状态：
input.select(); //设置文本框里面的文字处于选定状态

var that; //保留类Tab中的this指针
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");
    this.fsection = this.main.querySelector(".tabscon");
    this.init();
  }
  // 初始化功能-包含1.重新获取元素 2.给元素重新绑定事件
  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.toggleTab;
      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(".icon-guanbi");
    this.spans = this.main.querySelectorAll(".firstnav li span:first-child");
  }
  // 切换功能
  toggleTab() {
    that.clearClass();
    this.className = "liactive";
    that.sections[this.index].className = "conactive";
  }
  // 清除所有li和section的类
  clearClass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = "";
      this.sections[i].className = "";
    }
  }
  // 添加功能
  // 类中的函数 谁调用函数中的this指针就指向谁，因为addTab函数 是由添加按钮对象进行调用的，
  // 所以该函数中的this 指向的是add按钮
  addTab() {
    console.log(this); //<div class="tabadd"><span>+</span></div>
    that.clearClass();
    // (1) 创建li元素和section元素
    var random = Math.random();
    var li =
      '<li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">' + random + "</section>";
    // (2) 把这两个元素追加到对应的父元素里面
    that.ul.insertAdjacentHTML("beforeend", li);
    that.fsection.insertAdjacentHTML("beforeend", section);
    that.init(); //重新初始化
  }
  // 删除功能
  removeTab(e) {
    // console.log(this);
    e.stopPropagation(); // 阻止冒泡 防止触发li 的切换点击事件
    // 获取删除当前对应的li的下标
    var index = this.parentNode.index;
    // console.log(index);
    // 根据索引号删除对应的li和section remove() 方法可以直接删除指定的元素
    that.lis[index].remove();
    that.sections[index].remove();
    that.init();
    // 当我们删除的不是选中状态的li的时候  原来的选中状态li保持不变
    if (document.querySelector(".liactive")) return;
    // 当我们删除了选中状态的这个li的时候 就让它的前一个li 处于选定状态
    index--;
    // 手动调用我们的点击事件  不需要鼠标触发
    that.lis[index] && that.lis[index].click();
  }
  // 修改功能
  editTab() {
    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.select(); //设置文本框里面的文字处于选定状态
    // 当我们离开文本框 就把文本框里面的值给span
    input.onblur = function () {
      this.parentNode.innerHTML = this.value;
    };
    // 按下回车也可以把文本框里面的值给span
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur();
      }
    };
  }
}
new Tab("#tab");