JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números

JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números
Publicado em 11/07/2021 21h30
Visualizações: 354

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:

JS-1106 - JavaScript Completo ES6 - Refatoração 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.js através da função "numbersAnimation":

JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números

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 init será 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:

JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números

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:

JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números

Para ajustar a referência do callback de handleMutation, seu bind será inserido no construtor:

JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números

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.

JS-1106 - JavaScript Completo ES6 - Refatoração Animação de Números

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.

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.