【用bind(）完善】b站pink老师JavaScript的ES6面向对象案例代码——面向对象版Tab栏切换

之前不用bind(）完善的面向对象版Tab栏切换案例，见http://t.csdn.cn/RsGQb

 

tab.js部分： （只修改了该部分）

【其他部分的代码见：http://t.csdn.cn/RsGQb】

// var that;//全局变量   用bind()，不需要全局变量that
class Tab {
  constructor(id) {//此处的this指向 最大的盒子
    // 获取元素
    // that = this;//用that获得此处的this的值，即 最大的盒子,用bind()，不需要全局变量that赋值操作
    this.main = document.querySelector(id);//最大的盒子
    this.add = this.main.querySelector('.tabadd');//加号
    this.ul = this.main.querySelector('.fisrstnav ul:first-child');//li的父元素--类名是fisrstnav的第一个ul
    this.tabscon = this.main.querySelector('.tabscon');//section的父元素
    //下面new了Tab，会自动调用constructor函数，从而调用init初始化操作
    this.init();//页面刚加载，调用init（）方法 初始化操作
  }
  // init 初始化操作让相关的元素绑定事件
  init() {//此处的this指向 最大的盒子
    this.updateNode();//初始化时，调用updateNode函数，从而获取获取所有li和section
    //加号只有一个，所以写到for循环外面
    this.add.onclick = this.addTab.bind(this.add, this);//点击加号后，调用下面addTab方法。此处bind()第一个参数没有改变原代码this的指向，bind()第二个参数传参this,该参数this指向 最大的盒子
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      //[toggleTab如果加（）则立即调用]
      //[此处需要点击后再调用]
      this.lis[i].onclick = this.toggleTab.bind(this.lis[i], this);//此处bind()第一个参数没有改变原代码this的指向，bind()第二个参数传参this,该参数this指向 最大的盒子
      //x号和li一一对应，所以写到li的for循环里面
      this.removes[i].onclick = this.removeTab.bind(this.removes[i], this);//此处bind()第一个参数没有改变原代码this的指向，bind()第二个参数传参this,该参数this指向 最大的盒子
      //给所有tab标签的文字内容span绑定ondblclick双击事件
      this.spans[i].ondblclick = this.editTab;
      //给所有section绑定ondblclick双击事件
      this.sections[i].ondblclick = this.editTab;
    }
  }
  //因为需要动态添加元素 需要重新获取对应的元素
  //获取所有li和section和x号（包括后来添加的）
  updateNode() {//此处的this指向 最大的盒子
    this.removes = this.main.querySelectorAll('.icon-guanbi');//x号
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');//tab标签的文字内容span
  }
  // 1. 切换功能
  toggleTab(that) {//此处的this指向 this.lis[i]被点击的li【在上面被this.lis[i]调用了】
    //上一行中的that接收init()里面的bind(this.lis[i], this)的bind的第二个参数this,该参数this指向 最大的盒子
    // console.log(this.index);这个this.index就是对应li的索引号
    that.clearClass();//最大的盒子调用clearClass方法【先干掉所有人】
    this.className = 'liactive';//被点到的li移除下面的横线
    that.sections[this.index].className = 'conactive';//被点到的li对应的内容section显示 
  }
  //【干掉所有人】清除所有li和section的类名
  clearClass() {//classClass方法是用that调用的，所以此处的this指向最大的盒子
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = '';//其他没被点到的li不移除下面的横线
      this.sections[i].className = '';//其他没被点到的li对应的内容section不显示
    }
  }
  // 2. 添加功能
  addTab(tha) {//此处this指向 加号add【在上面被加号add调用了】
    //上一行中的that接收init()里面的bind(this.lis[i], this)的bind的第二个参数this,该参数this指向 最大的盒子
    tha.clearClass();//添加元素前，先清除li和section上所有类名
    var random = Math.random();//声明一个随机数变量
    // (1) 创建li元素和section元素 
    var li = ' <li class="liactive"><span>新选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">' + random + '</section>';
    // (2) 把这两个元素追加到对应的父元素里面
    tha.ul.insertAdjacentHTML('beforeend', li);
    tha.tabscon.insertAdjacentHTML('beforeend', section);
    tha.init();//调用初始化，然后初始化里面调用updateNode函数，从而获取获取所有li和section
  }
  // 3. 删除功能
  removeTab(the, e) {//此处this指向 x号remove【在上面被x号remove调用了】
    //上一行中的that接收init()里面的bind(this.lis[i], this)的bind的第二个参数this,该参数this指向 最大的盒子
    e.stopPropagation();//设置阻止冒泡，使得点击X号的时候获取index,不会由于冒泡再获取其父级li的index 
    var index = this.parentNode.index;
    console.log(index);
    //根据索引号删除对应的li 和 section   remove()方法可以直接删除指定的元素
    the.lis[index].remove();
    the.sections[index].remove();
    the.init();//删除完毕再调用init初始化，重新获取一遍li和section的个数
    //(1)当删除的不是选中状态的li的时候,原来的选中状态li保持不变
    //【相当于是如果有liactive这个类名，即有li被选中，则return退出程序】
    if (document.querySelector('.liactive')) return;
    //(2)当删除了选中状态的这个li的时候, 让它的前一个li处于选定状态
    //【相当于让前一个li被点击，li被点击之后的事件之前都写过了】
    //如果index=0,则index是false,不执行index--
    //如果index!=0,则执行index--
    index && index--
    // click()手动调用点击事件，不需要鼠标触发
    //&&逻辑与 遇到false或等价于false就不执行之后的了
    //如果index--<0,但是由于索引号>=0,所以lis[-1]为false
    that.lis[index] && that.lis[index].click();
  }
  // 4. 修改功能
  editTab() {//此处this指向 tab标签的文字内容span【在上面被this.spans[i]调用了】
    //获取之前span的值
    var str = this.innerHTML;
    //双击禁止选择文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
    this.innerHTML = '<input type="text"/>';
    //获取添加的input文本框
    var input = this.children[0];
    //让input文本框显示之前span初始的值
    input.value = str;
    //让文本框中文字处于选中状态
    input.select();
    //当离开文本框时（onblur失去焦点），把文本框里面的值给span 
    input.onblur = function () {
      //如果input文本框没有内容，则仍显示之前的span的值
      if (this.value == '') {
        this.parentNode.innerHTML = str;//this指input文本框
      } else {
        this.parentNode.innerHTML = this.value;//this指input文本框
      }

    }
    //按下回车也可以把文本框里面的值给span
    input.onkeyup = function (e) {
      if (e.key === 'Enter') {
        //手动调用blur失去焦点事件
        this.blur();//this指input文本框
      }
    }
  }
}
var tab = new Tab('#tab');