JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números
Transformando animação de números 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 "tooltip", criada no post JS-0508 - JavaScript Completo ES6 - Animação de Números:
A animação dos números nesta seção é executada pelo script contido no arquivo numbers-animation.js, ativada dentro do numbers-fetch.jsatravés da função "numbersAnimation":
Como numbersAnimation será uma classe, o nome na importação e ativação no arquivo "numbers-fetch.js" passará para NumbersAnimation, seguindo o padrão de nome no formato "Camel Case". O método initserá o ativador do evento, sendo chamado agora através da instanciação da classe em uma constante "animaNumbers", com seus devidos parâmetros que necessários no construtor:
Agora, vamos para o arquivo numbers-animation.js.
Ajustando o nome para o padrão de classes, o primeiro passo é o construtor da classe, que terá como parâmetros o seguinte:
- a seleção dos números ("[data-number]");
- o target para o MutationObserver(classe numbers); e
- a classe para a verificação do MutationObserver ("active).
As funções são transformadas em métodos, com o uso do this. O método addMutationObserver se torna responsável sobre o evento MutationObserver e a propriedade observer agora é propriedade da classe, não necessitando mais de sua inicialização como variável. O método init será o acionador de addMutationObserver, após realizar as verificações da existência dos parâmetros necessários:
Para ajustar a referência do callback dehandleMutation, seu bindserá inserido no construtor:
O agora método initAnimation, devido ao seu tamanho, foi separado por definição de responsabilidades, para facilitar sua leitura e manutenção. O novo método incrementNumbers será responsável pelo incremento dos números e como não necessita de nenhuma propriedade do objeto, será definido com estático ("static"), ativado através de seu método construtor em initAnimation.
Caso tenha observado, não estou utilizando ponto e vírgula. O Eslint está apontando as correções necessárias e o Webpack se encarregará do processo de compatibilidade. São excelentes ferramentas de automação de front-end.
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.