前兩篇文章主要介紹了類和物件、類的繼承，如果想了解更多理論請查閱《ES6學習筆記（一）：輕松搞懂面向物件編程、類和物件》、《ES6學習筆記（二）：教你玩轉類的繼承和類的物件》，今天主要來分享關于如何用js面向物件的思維來實作tab欄的一些相關的功能，
要實作的功能分析
- 點擊tab欄可以切換效果
- 點擊+號，可以添加tab項和內容項
- 點擊X號，可以洗掉當前的tab項和內容項
- 點擊tab文字或者內容項文字，可以修改里面的字體內容
抽像物件： Tab物件 （增刪改查功能）
實作功能效果如下圖：
首先建立一個class 類Tab:
let that
class Tab {
constructor(id) {
that=this
// 獲取元素
this.main = document.getElementById('tab')
//獲取li的父元素
this.ul = this.main.querySelector('.firstnav ul:first-child')
// 獲取section的父元素
this.fSection = this.main.querySelector('.tabscon')
this.add = this.main.querySelector('.tabadd')
this.remove = this.main.querySelectorAll('i')
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.togggleTab
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('i')
this.spans = this.main.querySelectorAll('span')
}
//切換功能
togggleTab() {}
//清除li和section的class，主要實作切換功能用
clearClass() {
for(var i = 0; i< this.lis.length; i++) {
this.lis[i].className = ''
this.sections[i].className = ''
}
}
//添加功能
addTab() {}
//洗掉功能
removeTab(e) {}
// 修改功能
editTab() {}
}
let tab = new Tab('#tab')
切換功能
- 點擊上面的tab標題實作切換功能，下面對應的section也顯示，其他的隱藏
- 實作思路，先去掉已有的選中class,
- 根據li的索引值，找到要顯示的section,添加對應的class，使其顯示
實作的主要代碼是：
that.clearClass()
this.className='liactive'
that.sections[this.index].className='conactive'
添加功能實作
- 點擊+ 可以實作添加新的選項卡和內容
- 第一步：創建新的選項卡li和新的內容section
- 第二步： 把創建的兩個元素追加到對應的父元素中
- 以前的做法：動態創建元素createElement,但是元素里面內容較多，需要innerHTML賦值在appendChild追加到父元素里面
- 現在高級做法，利用insertAdjacentHTML()可以直接把字串格式元素添加到父元素中，appendChild不支持追加字串的子元素，insertAdjacentHTML支持追加字串的元素
實作功能的主要代碼是：
//創建li元素和section元素
that.clearClass()
let li = ' <li ><span>新選項卡</span><i>X</i></li>'
let section = '<section >新內容區</setion>'
that.ul.insertAdjacentHTML('beforeend', li)
that.fSection.insertAdjacentHTML('beforeend',section)
that.init()
洗掉功能
- 點擊X可以洗掉當前的選項卡和當前的section
- X是沒有索引號的，但是它的父元素li有索引號，這個索引號正是我們想要的索引號
- 所以核心思路就是：點擊x號可以洗掉這個索引號對應的li和section
實作功能的主要代碼是：
e.stopPropagation();//阻止冒泡，
let index = this.parentNode.index
//根據索引號洗掉對應的li 和section
that.lis[index].remove()
that.sections[index].remove()
that.init()
//當我們洗掉的不是選中狀態的元素時，原來的選中狀態保持不變
if(document.querySelector('.liactive')) return
//當我們洗掉 了選中狀態的生活，讓它前一個li處于選中狀態
index--
//手動呼叫click事件，不需要滑鼠觸發
that.li[index] && that.lis[index].click()
編輯功能
- 雙擊選項卡li或者section里面的文字，可以實作修改功能
- 雙擊事件是：ondblclick
- 如果雙擊文字，會默認選定文字，此時需要雙擊禁止選中文字
- window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
- 核心思路：雙擊文字的時候，在里面生成一個文本框，當失去焦點或者按下回車然后把文本輸入的值給原先元素即可
實作功能的主要代碼是：
let str = this.innerHTML
//雙擊禁止選定文字
window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
this.innerHTML ='<input type="text" value="'+ str +'"/>'
let input = this.children[0]
//文本框里面的文字處于選中狀態
input.select()
//當滑鼠離開文本框就把文本框的值給span
input.onblur = function() {
this.parentNode.innerHTML=input.value
}
// 按回車鍵也餓可以把文本框里的值給span
input.onkeyup = function(e) {
if(e.keyCode === 13) {
this.blur()
}
}
總結
這篇文章主要是通過我學習的技術總結后來分享了如何用面向物件的思路方法來實作tab欄的切換、編輯、增加、洗掉功能，用到了很多ES6的一些語法，
案例原始碼地址：https://github.com/qiuqiulanfeng/tab
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/146310.html
標籤：JavaScript
上一篇：node 上傳圖片到七牛