Rodrigo Brito

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.

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:

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

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.