之前不用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');