JavaScript面向对象:面向对象案例

面向对象:面向对象案例"/>

JavaScript面向对象:面向对象案例

 面向对象版 tab 栏切换

功能需求:

1.点击 tab栏,可以切换效果.

2.点击 + 号, 可以添加 tab 项和内容项.

3.点击 x 号, 可以删除当前的tab项和内容项.

双击tab项文字或者内容项文字,可以修改里面的文字内容

基本结构

 抽象对象:  Tab 对象

1.该对象具有切换功能

2.该对象具有添加功能

3.该对象具有删除功能

4.该对象具有修改功能

 面向对象版 tab 栏切换 添加功能

1.点击 + 可以实现添加新的选项卡和内容

2.第一步: 创建新的选项卡li 和 新的 内容 section

3.第二步: 把创建的两个元素追加到对应的父元素中.

4.以前的做法:  动态创建元素 createElement  , 但是元素里面内容较多, 需要innerHTML赋值,在 appendChild 追加到父元素里面.

5.现在高级做法:   利用 insertAdjacentHTML() 可以直接把字符串格式元素添加到父元素中

6.appendChild 不支持追加字符串的子元素, insertAdjacentHTML 支持追加字符串的元素

7.insertAdjacentHTML(追加的位置,‘要追加的字符串元素’) 

8.追加的位置有: beforeend  插入元素内部的最后一个子节点之后

9.该方法地址:   

出现这样的原因是因为，我们后面添加的小li是后添加的，而前面的获取元素是页面加载时，获取已经准备好的。解决方案就是把获取放在一个函数中，加载时调用一次，添加完成后在调动一次init()就可以了 

  面向对象版 tab 栏切换 删除功能

1.点击 × 可以删除当前的li选项卡和当前的section

2.X是没有索引号的, 但是它的父亲li 有索引号, 这个索引号正是我们想要的索引号

3.所以核心思路是: 点击 x 号可以删除这个索引号对应的 li 和 section

4.但是,当我们动态删除新的li和索引号时,也需要重新获取 x 这个元素.  需要调用init 方法

icon-guanbi是我们要的X号 

删除功能 

面向对象版 tab 栏切换 编辑功能

1.双击选项卡li或者 section里面的文字,可以实现修改功能

2.双击事件是:  ondblclick

3.如果双击文字,会默认选定文字,此时需要双击禁止选中文字

4.window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

5.核心思路:  双击文字的时候, 在 里面生成一个文本框, 当失去焦点或者按下回车然后把文本框输入的值给原先元素即可.

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('.fisrstnav ul:first-child')// section的父元素this.fsection=this.main.querySelector('.tabscon');this.init()}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;}}// 获取所有的小li和sectionupdateNode(){this.lis=this.main.querySelectorAll('li')this.sections=this.main.querySelectorAll('section');this.remove=this.main.querySelectorAll('.icon-guanbi')this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child');}// 1.切换功能toggleTab(){// console.log(this.index);that.clearClass()this.className='liactive';that.sections[this.index].className='conactive'}// clearClass this指向的是that 也就是实例化对象clearClass(){for(var i=0;i<this.lis.length;i++){this.lis[i].className='';this.sections[i].className='';}}// 2.添加功能addTab(){that.clearClass()//创建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>'// 追加父元素that.ul.insertAdjacentHTML('beforeend',li)that.fsection.insertAdjacentHTML('beforeend',section)that.init()}// 3.删除功能removeTab(e){e.stopPropagation();var index=this.parentNode.index;console.log(index);// remove()方法可以直接删除指定的元素that.lis[index].remove();that.sections[index].remove();that.init();// 当我们删除的不是选中状态的li的时候，原本的状态if(document.querySelector('.liactive')) return;//return了就是不执行后面的代码// 当我们点击了选中状态的这个li的时候，让它前一个li处于选中状态index--;// 手动调用我们点击事件，不需要鼠标触发that.lis[index]&&that.lis[index].click();that.sections[index].click();}// 4.修改功能editTab(){var str=this.innerHTML;// 双击禁止选中文字window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();this.innerHTML='<input tpye="text"/>'var input=this.children[0]input.value=strinput.select();//文本框里面的文字处于选定状态// 当我们离开文本框就把文本框里面的值给spaninput.onblur=function(){input.parentNode.innerHTML=this.value;}// 按下回车也可以把文本框里面的值给spaninput.onkeyup = function(e) {if (e.keyCode === 13) {// 手动调用表单失去焦点事件  不需要鼠标离开操作this.blur();}}}
}
new Tab('#tab');