JavaScript动态生成tab

var that;
class Tab{
    constructor(id){
        that=this;
        // 获取元素
        this.main=document.querySelector(id);
        this.ul=this.main.querySelector('.fisrstnav ul:first-child')
        this.sectiondiv=this.main.querySelector('.tabscon')
        this.add=this.main.querySelector('.tabadd')
        this.init()
    }
    init(){
        this.updateNode()
        // init初始化操作让相关的元素绑定事件
        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;
        }
        this.add.onclick=this.addTab;
    }
    // 获取所有的li和section
    updateNode(){
        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(){
        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.添加功能
    addTab(){
        that.clearClass();
        // (1)创建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>'
        // (2)将创建的元素放入父元素中
        that.ul.insertAdjacentHTML('beforeend',li);
        that.sectiondiv.insertAdjacentHTML('beforeend',section);
        that.init()
    }
    // 3.删除功能
    removeTab(e){
        e.stopPropagation();//阻止冒泡，防止触发li的点击事件
        var index=this.parentNode.index;
        // remove()方法可以直接删除指定元素
        that.lis[index].remove();
        that.sections[index].remove();
        that.init()
        // 删除的不是选中的li,原来选中的li保持不变
        if(document.querySelector('.liactive')) return;
        // 删除是选中的li,前一个li处于选定状态
        index--;
        // 手动调用点击事件，不需要鼠标触发
        that.lis[index]&&that.lis[index].click()
    }
    // 4.修改功能
    editTab(){
        // 双击禁止选择文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        var text=this.innerHTML;
        this.innerHTML='<input type="text" />'
        var input=this.children[0];
        input.value=text;
        // 文字处于选定状态
        input.select();
        // 离开文本框
        input.onblur=function(){
            this.parentNode.innerHTML=this.value
        }
        // 回车
        input.onkeyup=function(e){
            if(e.keyCode==13){
                // 手动调用表单失去焦点事件
                this.blur()
            }
        }
    }
}
new Tab('#tab')

改进后

var that;
class Tab{
    constructor(id){
        // 获取元素
        this.main=document.querySelector(id);
        this.ul=this.main.querySelector('.fisrstnav ul:first-child')
        this.sectiondiv=this.main.querySelector('.tabscon')
        this.add=this.main.querySelector('.tabadd')
        this.init()
    }
    init(){
        this.updateNode()
        // init初始化操作让相关的元素绑定事件
        for(var i=0;i<this.lis.length;i++){
            this.lis[i].index=i;
            this.lis[i].onclick=this.toggleTab.bind(this.lis[i],this);
            this.remove[i].onclick=this.removeTab.bind(this.remove[i],this);
            this.spans[i].ondblclick=this.editTab
            this.sections[i].ondblclick=this.editTab;
        }
        this.add.onclick=this.addTab.bind(this.add,this);;
    }
    // 获取所有的li和section
    updateNode(){
        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(that){
        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.添加功能
    addTab(that){
        that.clearClass();
        // (1)创建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>'
        // (2)将创建的元素放入父元素中
        that.ul.insertAdjacentHTML('beforeend',li);
        that.sectiondiv.insertAdjacentHTML('beforeend',section);
        that.init()
    }
    // 3.删除功能
    removeTab(that,e){
        e.stopPropagation();//阻止冒泡，防止触发li的点击事件
        var index=this.parentNode.index;
        // remove()方法可以直接删除指定元素
        that.lis[index].remove();
        that.sections[index].remove();
        that.init()
        // 删除的不是选中的li,原来选中的li保持不变
        if(document.querySelector('.liactive')) return;
        // 删除是选中的li,前一个li处于选定状态
        index--;
        // 手动调用点击事件，不需要鼠标触发
        that.lis[index]&&that.lis[index].click()
    }
    // 4.修改功能
    editTab(){
        // 双击禁止选择文字
        window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        var text=this.innerHTML;
        this.innerHTML='<input type="text" />'
        var input=this.children[0];
        input.value=text;
        // 文字处于选定状态
        input.select();
        // 离开文本框
        input.onblur=function(){
            this.parentNode.innerHTML=this.value
        }
        // 回车
        input.onkeyup=function(e){
            if(e.keyCode==13){
                // 手动调用表单失去焦点事件
                this.blur()
            }
        }
    }
}
new Tab('#tab')