Caso de cambio de barra de pestañas orientada a objetos de JS nativo

contenido

1. Darse cuenta del efecto

2. Requisitos funcionales

3. Objetos abstractos

4. Implementación de la función de conmutación

5. Agregar implementación de función

6. Implementación de la función Eliminar

1. Darse cuenta del efecto

2. Requisitos funcionales

Haga clic en la barra de pestañas para cambiar el efecto.
Haga clic en el signo + para agregar elementos de pestañas y elementos de contenido.
Haga clic en el número x para eliminar el elemento de la pestaña actual y el elemento de contenido
Haga doble clic en el texto del elemento de la pestaña o en el texto del elemento de contenido para modificar el contenido del texto que se encuentra dentro.

3. Objetos abstractos

Objeto abstracto: Objeto de pestaña

Este objeto tiene una función de alternar
Este objeto tiene función de agregar
El objeto tiene función de eliminación.
El objeto tiene capacidades de modificación.

4. Implementación de la función de conmutación

En primer lugar, puede echar un vistazo a la estructura html para evitar que no sepa lo que está obteniendo cuando obtiene el elemento y el nombre de la clase:

<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>

En esta sección queremos lograr el efecto:

Código de muestra:

var that;
class tab{
    constructor(id){
        //获取元素
        that = this;
        this.main = document.querySelector(id);
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.init();//自动调用init
    }
    init(){
        //init初始化操作让相关元素绑定事件
        for(let i = 0;i<this.lis.length;i++){
            this.lis[i].setAttribute('index',i);//设置索引值
            this.lis[i].onclick = this.toggleTab;
        }
    }
    toggleTab() {
        //clearClass函数是类的公共函数，所有只能通过that调用
        that.clearClass();
        this.className = 'liactive';
        that.sections[this.getAttribute('index')].className = 'conactive';
    }
    clearClass() {
        for(var i = 0;i<this.lis.length;i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }
}
var newtab = new tab('.tabsbox');

En contrucotr, queremos obtener elementos relacionados, aquí debemos prestar atención al problema de esto, debemos agregar esto, porque esto apunta al objeto instanciado . Después de obtener el elemento, llame a la función init. La función init se usa para vincular eventos al elemento. Por ejemplo, cuando se actualiza la página, la barra de pestañas cambiará y agregará estas funciones, por lo que la función init debe colocarse en el construir El valor del índice se establece de modo que cuando se hace clic en la barra de pestañas, el área de contenido inferior también puede cambiar.

Nota: al llamar a clearClass en toggleTab(), es eso, no esto. Porque this se refiere a la persona que llamó a la función, que se refiere a li aquí, porque la función de alternar se llama cuando se hace clic en li. Pero no hay un método clearClass en li, por lo que debe usarse, que aquí se refiere al objeto instanciado

5. Agregar implementación de función

1. Haga clic en + para agregar nuevas pestañas y contenido
2. Paso 1: cree una nueva pestaña li y una nueva sección de contenido
3. Paso 2: agregue los dos elementos creados al elemento principal correspondiente
4. Use insertAdjacentHTML() para agregar directamente el elemento de formato de cadena al elemento principal

Aquí hay una breve introducción a la sintaxis de insertAdjacentHTML():

position es la posición relativa al elemento y debe ser una de las siguientes cadenas:
'beforebegin' Antes del propio elemento.
'afterbegin' se inserta antes del primer nodo secundario dentro del elemento.
'beforeend' se inserta después del último hijo dentro del elemento.
'afterend' Después del propio elemento.
text es la cadena que se analizará en HTML o XML y se insertará en el árbol DOM.

Primero obtenemos el elemento en el constructor:

this.add = this.main.querySelector('.tabadd');
this.ul = this.main.querySelector('.fisrstnav ul');
this.fsection = this.main.querySelector('.tabscon');

Luego agregue el evento de enlace de botón en la función de inicialización init:

this.add.onclick = this.addTab;

Finalmente crea la función de agregar addTab():

addTab() {
    that.clearClass();
    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>';
    that.ul.insertAdjacentHTML('beforeend',li);
    that.fsection.insertAdjacentHTML('beforeend',section);
}

Al comienzo de la función de agregar, llame a clearClass para borrar el estilo original y seleccionar la pestaña recién agregada. Echemos un vistazo al efecto:

¿Por qué la pestaña recién agregada no puede cambiar, y el li y la sección anteriores no borran la clase, por qué es esto?

Debido a que esto es lo que agregamos más tarde, cuando obtenemos el elemento cuando se carga la página, el elemento agregado más tarde no se adquiere, por lo que no hay un evento de clic vinculante y habrá estos errores.

Por lo tanto, debemos volver a adquirir todos los li y la sección después de hacer clic en el botón más, luego creamos una nueva función de actualización updateNode (), y colocamos las partes de li y la sección en contrucotr, cuando hacemos clic en el botón Agregar cada vez Obtener todo li y la sección de nuevo cada vez, por lo que se resuelve el error

updateNode() {
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
}

Y agregue esta oración al comienzo de init:

this.updateNode();

Luego agregue esta oración al final de addTab:

that.init();

De esta manera, cada vez que agreguemos una nueva pestaña y contenido, volveremos a buscar y vincular el evento recién agregado.

Darse cuenta del efecto:

6. Implementación de la función Eliminar

Haga clic en la x para eliminar la pestaña Ii actual y la sección actual
El número x no tiene un número de índice, pero su padre li tiene un número de índice, que es exactamente el número de índice que queremos
Entonces, la idea central es: haga clic en el número x para eliminar la Ii y la sección correspondiente a este número de índice

En primer lugar, necesitamos obtener todos los botones de cierre, entonces, ¿deberíamos poner la operación de obtener elementos en el constructor o en el nodo de actualización?

De hecho, debemos poner el paso de obtener el botón de cerrar en updateNode, porque li y el botón de cerrar tienen una correspondencia uno a uno, cuando se agrega una nueva pestaña, la cantidad de botones de cierre también debe actualizarse.

Luego ponemos esta oración en updateNode:

this.remove = this.main.querySelectorAll('.icon-guanbi');

Y agregue un evento de clic en el ciclo for de init, removeTab es el método de eliminación:

this.remove[i].onclick = this.removeTab;

Creamos una nueva función de borrado removeTab():

removeTab(e) {
    e.stopPropagation();//阻止冒泡 防止触发他的父亲li的切换点击事件
    var index = this.parentNode.getAttribute('index');
    that.lis[index].remove();
    that.fsection[index].remove();
    that.init();
}

En la función, primero tenemos que evitar el burbujeo, porque cuando se hace clic en el número x, si hay un burbujeo, también activará el evento de clic de su padre li. Luego obtenemos el número de índice del li correspondiente, eliminamos el li y la sección correspondiente a través del método de eliminación, y luego obtenemos el último li y la sección nuevamente.

Darse cuenta del efecto:

Cuando eliminamos este li en el estado seleccionado, debemos hacer su li anterior en el estado seleccionado

Agregamos las siguientes dos oraciones a removeTab:

index--;
that.lis[index] && that.lis[index].click();

Debido a que eliminamos el li actual y queremos que el li anterior esté en el estado seleccionado, tenemos que disminuir el número de índice en uno, que es lo que significa la siguiente declaración &&. Si el li actual es el último, es decir, cuando el índice es 0, entonces index-- es menos uno, por lo que .lis[index] es falso y la última declaración no se ejecutará. La última oración es para llamar manualmente al evento de clic, de modo que el li anterior esté en el estado seleccionado.

También tenemos una última función, es decir, cuando se elimina el li que no está en el estado seleccionado, el estado li seleccionado original permanecerá sin cambios.

Solo necesitamos agregar esta oración antes de index--:

if(document.querySelector('.liactive')) return;

Si eliminamos el li que no está en el estado seleccionado, significa que hay una clase .liactive, entonces el siguiente código no se ejecutará si regresamos directamente. Si se elimina el li en el estado seleccionado, entonces la clase .liactive no existe y se ejecuta el siguiente código

Darse cuenta del efecto:

La función de modificación no se explicará aquí. Aquí está el enlace del código fuente: https://github.com/Vacricticy/JS_Advanced/tree/master/1.%E9%9D%A2%E5%90%91%E5%AF %B9 %E8%B1%A1/07-%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E6%A1%88%E4%BE%8B https:/ /github .com/Vacricticy/JS_Advanced/tree/master/1.%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/07-%E9%9D%A2%E5 %90 %91%E5%AF%B9%E8%B1%A1%E6%A1%88%E4%BE%8B