JS-1102 - JavaScript Completo ES6 - Refatoração Accordion

JS-1102 - JavaScript Completo ES6 - Refatoração Accordion
Publicado em 26/06/2021 18h21
Visualizações: 414

Transformando o accordion em classe

Para este exemplo, será utilizado o conteúdo do projeto prático. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Para baixar o projeto, clique aqui.

Neste post, a função refatorada será a "accordion", criada no post JS-0310 - JavaScript Completo ES6 - Accordion List.

JS-1102 - JavaScript Completo ES6 - Refatoração Accordion

Como no post anterior, está função será transformada em uma classe para permitir sua portabilidade. O primeiro item é o construtor, que receberá como parâmetro a lista, anteriormente recebida na constante "accordionList". A função "activeAccordion" se torna um método da classe, ativado pelo novo método "init". O evento sobre os elementos será de responsabilidade do método "addAccordionEvent". O primeiro elemento da lista será ativado por padrão dentro do init:

JS-1102 - JavaScript Completo ES6 - Refatoração Accordion

O objeto será instanciando no script.js, importando a classe, passando a seleção anterior como parâmetro e utilizando o método "init":

JS-1102 - JavaScript Completo ES6 - Refatoração Accordion

Seguindo o padrão, fica super simples!

No final, foi executado o comando do webpack, para montar o arquivo main.js comprimido:

$ npx webpack --entry ./js/script.js -o ./

Para baixar o projeto, clique aqui.

Para visualizar o projeto, clique aqui.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.