ES6 learning notes (3): teach you to use js object-oriented thinking to realize the function of adding, deleting, modifying and checking tab column

5 Line code , Can let wechat small program on the shelf to their own APP in | Register and send it to Dajiang 、 Huawei 、 Cherry keyboard ！>>>

The first two articles focus on classes and objects 、 Class inheritance , If you want to know more about the theory, please refer to 《ES6 Learning notes （ One ）： Easy to understand object-oriented programming 、 Classes and objects 》、《ES6 Learning notes （ Two ）： Teach you how to play with class inheritance and class objects 》, Today I'd like to share with you how to use js Object oriented thinking to achieve tab Some related functions of the column .

Function analysis to be realized

1. Click on tab Columns can switch effects
2. Click on + Number , You can add tab Items and content items
3. Click on X Number , You can delete the current tab Items and content items
4. Click on tab Text or content item text , You can modify the font content inside

The object of the portrait ： Tab object （ Add, delete, change and search functions ）
The function effect is shown in the figure below ：

So let's set up a class class Tab:

let that
class Tab {
   
  constructor(id) {
   
    that=this
    //  Get elements 
    this.main = document.getElementById('tab')
    // obtain li Parent element of 
    this.ul = this.main.querySelector('.firstnav ul:first-child')
    //  obtain section Parent element of 
    this.fSection = this.main.querySelector('.tabscon')
    this.add = this.main.querySelector('.tabadd')
    this.remove = this.main.querySelectorAll('i')
    this.init()
  }
  // initialization 
  init() {
   
    this.updateNode()
    // init  The initialization operation causes the related elements to bind events 
    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
    }

  }
  // We add elements dynamically , When deleting elements , You need to get the corresponding element again 
  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')
  }
  // Switch function 
  togggleTab() {
   }
  // eliminate li and section Of class, It mainly realizes the switching function with 
  clearClass() {
   
    for(var i = 0; i< this.lis.length; i++) {
   
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }
  // Add functionality 
  addTab() {
   }
  // Delete function 
  removeTab(e) {
   }
  //  Modify the function 
  editTab() {
   }
}
let tab = new Tab('#tab')

Switch function

1. Click on the top tab Title switch function , The following corresponds to section It also shows , Other hidden
2. Realize the idea , First remove the existing selection class,
3. according to li The index of the value , Find what you want to show section, Add corresponding class, Make it show

The main implementation code is ：

that.clearClass()
this.className='liactive'
that.sections[this.index].className='conactive'

Add functions to achieve

1. Click on + You can add new tabs and content
2. First step ： Create a new tab li And new content section
3. The second step ： Add the two created elements to the corresponding parent element
4. Previous practice ： Creating elements dynamically createElement, But there's more in the element , need innerHTML Assignment in appendChild Append to the parent element
5. Now the advanced approach , utilize insertAdjacentHTML() You can add string format elements directly to the parent element ,appendChild Appending child elements of a string is not supported ,insertAdjacentHTML Support appending string elements

The main code to implement the function is ：

// establish li Elements and section Elements 
    that.clearClass()
    let li = ' <li class="liactive" ><span> New tab </span><i>X</i></li>'
    let section = '<section class="conactive"> New content area </setion>'
    that.ul.insertAdjacentHTML('beforeend', li)
    that.fSection.insertAdjacentHTML('beforeend',section)
    that.init()

Delete function

1. Click on X You can delete the current tab and the current section
2. X There is no index number , But its parent element li Index number , This index number is exactly what we want
3. So the core idea is ： Click on x Can delete the index number corresponding to li and section

The main code to implement the function is ：

e.stopPropagation();// To prevent a bubble ,
    let index = this.parentNode.index
    // Delete the corresponding li  and section
    that.lis[index].remove()
    that.sections[index].remove()
    that.init()
    // When we delete elements that are not in the selected state , The original selected state remains unchanged 
    if(document.querySelector('.liactive')) return
    // When we delete   Life in the selected state , Let it be the first li Selected 
    index--
    // Manual call click event , You don't need a mouse to trigger 
    that.li[index] && that.lis[index].click()

Editing function

1. Double click the tab li perhaps section The words inside , You can modify it
2. The double click event is ：ondblclick
3. If you double-click the text , Will default to the selected text , In this case, you need to double-click to disable the selected text
4. window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()
5. The core idea ： When you double-click the text , Generate a text box inside , When you lose focus or press enter and give the value of the text input to the original element

The main code to implement the function is ：

let str = this.innerHTML
    // Double click to disable selected text 
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty()
    this.innerHTML ='<input type="text" value="'+ str +'"/>'
    let input = this.children[0]
    // The text in the text box is selected 
    input.select() 
    // When the mouse leaves the text box, it gives the value of the text box to span
    input.onblur = function() {
   
      this.parentNode.innerHTML=input.value

    }
    //  Press enter to give the value in the text box to span
    input.onkeyup = function(e) {
   
      if(e.keyCode === 13) {
   
        this.blur()
      }
    }

summary

This article is mainly through my learning technology summary, and then shared how to use object-oriented ideas and methods to achieve tab Column switching 、 edit 、 increase 、 Delete function . Used a lot of ES6 Some of the syntax .
Case source address ：https://github.com/qiuqiulanfeng/tab