JS 面向对象动态添加和删除数据

案例样式：

HTML结构：

<main>
        <h4>
            Js 面向对象 动态添加标签页
        </h4>
        <div class="tabsbox" id="tab">
            <!-- tab 标签 -->
            <nav class="fisrstnav">
                <ul>
                    <li class="liactive"><span>测试1</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试2</span><span class="iconfont icon-guanbi"></span></li>
                    <li><span>测试3</span><span class="iconfont icon-guanbi"></span></li>
                </ul>
                <div class="tabadd">
                    <span>+</span>
                </div>
            </nav>

            <!-- tab 内容 -->
            <div class="tabscon">
                <section class="conactive">测试1</section>
                <section>测试2</section>
                <section>测试3</section>
            </div>
        </div>
    </main>

JS结构：

var that;
class Tab {
    constructor(name) {
        that = this  // 把实例对象的内容赋值给that
        this.main = document.querySelector(name)    //    获取大盒子
        this.add = this.main.querySelector('.tabadd')   // 获取大盒子里面的添加按钮
        this.ul = this.main.querySelector('.fisrstnav ul:first-child') // li 的父元素,获取ul元素
        this.fsection = this.main.querySelector('.tabscon')          // section 父元素 tabscon

        this.init() // 通过实例化对象调用此函数
    }
    //  initialize  初始化(重新加载)
    init() {
        that.updataNode() // 页面初始化之后开始获取这些元素，做绑定事件
        // 页面初始化之后，给相关的元素的绑定事件
        this.add.onclick = this.addTab; // 给加号按钮添加绑定事件
        for (var i = 0; i < this.lis.length; i++) {
            // 给每一个li添加一个元素和索引号
            this.lis[i].index = i
            // 给所有的小li绑定点击事件; 点击之后才调用此函数
            this.lis[i].onclick = this.toggleTab;
            // 给所有的关闭按钮绑定点击事件
            this.remove[i].onclick = this.removeClass;
            // 双击事件用 dblclick 绑定
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;
        }
    }
    updataNode() {  // 获取动态添加的元素
        this.lis = this.main.querySelectorAll('li')  // 获取大盒子里面的li
        this.sections = this.main.querySelectorAll('section')
        this.remove = this.main.querySelectorAll('.icon-guanbi') // 获取关闭按钮
        this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
        // console.log(spans);
    }
    // 1.切换模块
    toggleTab() { // 这里面的this 指向lis
        // 排他思想，先清除所有样式
        that.clearClassname()
        // 点击哪个li给哪个li添加 类名
        this.className = 'liactive'
        that.sections[this.index].className = 'conactive'
    }
    // 清除样式
    clearClassname() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = ''
            this.sections[i].className = ''
        }
    }
    // 2. 添加模块
    addTab() { // 这里面的this 指向 tabadd
        that.clearClassname()
        // 创建li元素
        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>`
        // 把li元素追加到ul里面
        // insertAdjacentHTML(position,text)
        // 第一个元素是追加元素的位置，第二个元素表示添加的文本内容
        that.ul.insertAdjacentHTML('beforeend', li)
        that.fsection.insertAdjacentHTML('beforeend', section)
        that.init() // 添加完元素后，让页面重新加载一次
    }
    // 3. 删除模块
    removeClass(e) { // this指向关闭按钮
        e.stopPropagation(); // 阻止冒泡，防止触发li的点击事件
        // 获取他父亲的索引号
        var index = this.parentNode.index
        console.log(index);
        // 删除相对应的父元素
        that.lis[index].remove()
        that.sections[index].remove()
        // 删除完之后再重新调用渲染一下页面函数
        that.init()
        // 但我们删除的不是选中状态的按钮时，原来的li保持不变
        if (document.querySelector('.liactive')) return
        // 当我们删除了选中状态时，让前一个li 处于选中状态
        index--
        // 手动做点击事件 ；第一数值为真则调用第二个函数
        that.lis[index] && that.lis[index].click()
    }
    // 4. 修改功能
    editTab() { // this 指向sapn
        // 设置默认文本框样式
        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
        // onblur 失去焦点
        input.onblur = function () { // 这里面的this指向input
            this.parentNode.innerHTML = this.value
        }
        // 按下回车键也可以把文本框里面的值给span
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {
                // 手动调用表单失去焦点事件  不需要鼠标离开
                this.blur();
            }
        }
    }
}
new Tab('#tab')