JS-1110 - JavaScript Completo ES6 - Refatoração Dropdown Menu
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:
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:
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 lengthsobre this.dropdownMenus, e retornará a classe por padrão com o uso do this.
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 thisda 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:
A instanciação da classe no script, importando de DropdownMenu, ficou assim:
No final, foi executado o comando do webpack, para montar o arquivo main.js comprimido:
$ npx webpack --entry ./js/script.js -o ./
