JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu

JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu
Publicado em 10/08/2021 20h20
Visualizações: 347

Transformando o dropdown menu 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 função "dropdownMenu", ativada ao clique no item "SOBRE" do menu, criada no post JS-0505 - JavaScript Completo ES6 - Dropdown Menu e Event Bubbling. O código inicial é o seguinte:

JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu

A função "outsideclick" não necessitará de alteração.

O primeiro passo é transformar a função em classe, implementar o construtor desta classe recebendo os elementos selecionados através do dataset e os eventos de ativação (toque ou clique definidos como padrão mas alteráveis). A classe "active" também foi deslocada para o construtor, para permitir sua alteração em ponto único caso necessário:

JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu

O método "addDropDownMenusEvent" será o responsável por acionar os eventos em cada item iterado. O método "init" ativará o método anterior somente diante da existência dos elementos, utilizando a função length sobre this.dropdownMenus, e retornará a classe por padrão com o uso do this.

JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu

A função "handleClick" será renomeada para "activeDropDownMenu", e como é ativada no EventListener, como callback, necessitará da realização de seu bind no construtor da classe. Outro detalhe importante é que o this da antiga função "handleClick" agora referencia a classe, portanto, necessita ser alterada para o evento do currentTarget, passado pela constante "el" (elemento), pois era uma referência ao elemento. O código final, com o bind ficou da seguinte forma:

JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu

A instanciação da classe no script, importando de DropdownMenu, ficou assim:

JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu

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.