JS高级-面向对象的Tab栏切换

JS高级-面向对象的Tab栏切换

抽象对象：Tab对象，该对象有四个功能

• 点击Tab栏，可进行切换
• 点击+号，可以添加tab项和内容项
• 点击-号，可以删除tab项和内容项
• 双击tab栏中的文字可以对其进行修改

1. 切换功能（toggleTab）
2. 添加功能（addTab）
3. 删除功能（removeTab）
4. 修改功能（editTab）
   先构建一个类，类里面的构造函数接受参数，首先获取元素，获取id为tab的部分，tabadd，ul，section，记住所有的属性都要添加this，this指向函数调用者

获取元素模块

这里要注意的是一定要在main选中的情况下进行选择其他的元素

 constructor(id) {
   
        that = this;
        //获取元素
        //获取大盒子 记住所有的属性要加this 指向函数调用者
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');

        // li的父元素
        this.ul = this.main.querySelector('.firstnav ul');
        //section的父元素
        this.fsection = this.main.querySelector('.tabscon');
        this.init(); //一定不能写成init(),实例化哪个对象 哪个对象就调用这个方法 new一下立即加载页面自动调用
    }

init初始化模块

给每个小li添加索引号，点击小li的时候进行tab栏切换，绑定点击事件调用toggleTab这个方法，点击x号绑定点击事件调用removeTab这个方法，双击两下span调用editTab这个方法，双击两下sections部分调用editTab这个方法，调用的时候一定不要加括号，加上小括号的话一加载页面就会直接调用了

技巧之一：进行初始化操作的时候要调用更新节点updateNode的方法，这个方法里面主要是解决新添加的样式，一般指会变化的样式，比如添加li以及section，关闭会减少li，初始化的时候先更新完这些节点在遍历，否则会出现bug

init() {
   
            // init初始化操作 让相关的元素绑定事件
            //初始化
            // 只要一点击就要重新初始化 先获取元素在绑定
            this.updateNode();
            this.add.onclick = this.addTab;
            for (var i = 0; i < this.lis.length; i++) {
   
                //this指向函数的调用者 给每个小li添加一个索引号
                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;
                //点击完之后在调用  不用加小括号 加上的话页面一加载直接调用了
            }
        }

切换模块

利用排他思想清除所有样式，最后更改成想要的样式，可以把清除样式封装成一个方法，注意调用的时候要声明一个全局变量that，this赋值给that，不能用this指向，因为this指向的是li，然而小li没有section这个属性，section这个属性是constructor的

toggleTab() {
   
            // console.log(this.index);
            //this指向的是每个小li，that指向的是当前的实例对象，所以用that
            that.clearClass();
            //这个this指向的是小li，小li没有section这个属性，section这个是属性是属于constructor 可以声明一个全局变量
            this.className = 'liactive';
            that.sections[this.index].className = 'conactive';
        }
        // 添加一个清除类 清除所有li和section的类
 clearClass() {
   
            //这个this的指向是指向constructor，所以这个用this没问题
            for (var i = 0; i < this.lis.length; i++) {
   
                this.lis[i].className = '';
                this.sections[i].className = '';
            }
        }

添加模块

添加模块之前先清除所有样式，使用insertAdjacentHTML将节点插入dom树中，把li和section的内容赋值给li变量和section变量，创建完元素之后在初始化

技巧之二使用insertAdjacentHTML将节点插入dom树中

insertAdjacentHTML的用法：

element.insertAdjacentHTML(position,test);

position是相对元素的位置，并且必须是以下字符串之一：

• beforebegin：元素自身前面
• afterbegin：插入元素内部的第一个子节点之前
• beforeend：插入元素的最后一个子节点之后
• afterend：元素自身的后面

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。

 addTab() {
   
            // console.log(11);
            that.clearClass();
            // (1) 创建li元素和section元素
            var random = Math.random();
            var li = '<li><span>新选项卡</span><span class="close">x</span></li>';
            //每次生成随机数作为新增内容 
            var section = '<section clas