面向对象案例tab切换

html代码实现

	<div class="tabsbox" id="tab">
		<nav class="firstnav">
			<ul>
				<li class="liactive">
					<span>测试1</span>
					<span class="close">-</span>
				</li>
				<li>
					<span>测试2</span>
					<span class="close">-</span>
				</li>
				<li>
					<span>测试3</span>
					<span class="close">-</span>
				</li>
			</ul>
			<div class="tabadd">
				<span>+</span>
			</div>
		</nav>
		<div class="tabscon">
			<section class="conactive">测试1</section>
			<section>测试2</section>
			<section>测试3</section>
		</div>
	</div>

js代码实现

		/**面向对象版tab栏切换
		 * 功能需求：
		 * 1.点击tab栏可以切换效果
		 * 2.点击+号，可以添加tab项和内容项
		 * 3.点击叉号，可以删除当前的tab项和内容项
		 * 双击tab项文字或者内容项文字，可以修改里面的文字内容
		 * 
		 * 以面向对象的方法实现tab 首先抽取公共的属性和方法写在类中，然后去实例化对象就可以了
		 * 抽象对象：Tab对象
		 * 1.该对象具有切换功能
		 * 2.该对象具有添加功能
		 * 3.该对象具有删除功能
		 * 4.该对象具有修改功能
		 * 
		 * this指向的是函数的调用者
		*/
		var that; //声明全局变量
		class Tab {
			constructor(id) {
				//由于构造函数在实例化的时候只调用了一次 所以之后添加的
				//li及section不会操作成功，所以需要每次添加的时候重新获取一次
				that = this
				//  获取元素
				this.main = document.querySelector(id)
				this.lis = this.main.querySelectorAll('li')
				this.sections = this.main.querySelectorAll('section ')
				this.add = this.main.querySelector('.tabadd')
				//获取 li的父元素
				this.ul = this.main.querySelector('.firstnav ul:first-child')
				//获取section的父元素
				this.fsection = this.main.querySelector('.tabscon')
				//通过实例对象调用了init这个方法
				this.init()
			}
			//初始化操作让相关的元素绑定事件
			init() {
				this.updateNode()
				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;
				}
			}
			//获取所有的小li和section
			updateNode() {
				//拿到所有的删除按钮
				this.remove = this.main.querySelectorAll('.close')
				this.lis = this.main.querySelectorAll('li');
				this.sections = this.main.querySelectorAll('section')
				this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
			}
			//1.切换功能
			toggleTab() {
				console.log(this.index)
				that.clearClass()
				this.className = 'liactive'
				//内容部分
				that.sections[this.index].className = 'conactive'
			}
			//===清除函数
			clearClass() {
				for (var i = 0; i < this.lis.length; i++) {
					this.lis[i].className = ''
					this.sections[i].className = ''
				}
			}
			//2.添加功能
			/**
			 * 第一步：创建新的选项卡li和新的内容section
			 * 第二步：把创建的两个元素追加到对应的父元素中
			 * 以前的做法：动态创建元素createElement,单是元素里面内容较多，需要innerHtml赋值在appendChild追加到父元素里面
			 * 现在的高级做法：利用insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
			*/
			addTab() {
				/**
				 * 1、创建li元素和section元素
				 * 2、把这两个元素追加到对应的父元素里面
				*/
				that.clearClass()
				var random = Math.random()
				var li = '<li class="liactive"><span>新选项卡</span><span class="close">-</span></li>'
				var section = '<section class="conactive">测试3' + random + '</section>'
				that.ul.insertAdjacentHTML('beforeend', li)
				that.fsection.insertAdjacentHTML('beforeend', section)
				that.init()

			}
			//3.删除功能
			removeTab(e) {
				/**
				 * 1.点击‘-’号可以删除当前的li选项和当前的section
				 * 2.'-'号是没有索引好的，但它的父亲li有索引号，这个索引号正式我们想要的索引号
				 * 3.核心思路：点击‘-’号可以删除整个索引号对应的li和section
				 * 
				*/
				//阻止冒泡 由于li点击也有切换效果所以需要阻止冒泡
				e.stopPropagation()
				var index = this.parentNode.index;
				console.log('index', index)
				//根据索引号删除对应索引号的li及section
				that.lis[index].remove()
				that.sections[index].remove()
				that.init()
				//当我们删除的不是选中状态的li的时候，原来的选中状态li保持不变
				if (document.querySelector('.liactive')) return
				//当我们删除了选中状态的li的时候，让它的前一个index-1 li处于选定状态  我们第一个为选中状态并删除时此时index-1不存在，如果当前等于0 则第一个状态置激活状态
				index != 0 ?index--:index;				
				// index--;
				//手动调用点击事件 不需要鼠标触发
				that.lis[index] && that.lis[index].click()
			}
			//4.修改功能
			//1、双击选项卡li或者section里面的文字，可以实现修改功能
			//2、双击事件是：ondblclick
			//3、如果双击文字，会默认选定文字，此时需要上级禁止选中文字
			//4、window.getSelection?window.getSelection():document.selection.empty()
			//5、核心思路：双击文字的时候，在里面生成一个文本框，当失去焦点或者按下回车然后把文本框的输入值给原先元素即可
			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) {
					e.keyCode === 13 && this.blur()
				}
			}
		}
		new Tab('#tab')  //实例化对象