JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch
Publicado em 16/07/2021 19h44
Visualizações: 344

Otimizando o fetch de números

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 "numbersFetch", criada no post JS-0607 - JavaScript Completo ES6 - Números Fetch, que realiza um fetch para o arquivo numbers-api.json, simulando uma chamada de api:

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

Esta função, por ser muito específica à necessidade deste projeto, será mantida como função, contudo, ela pode ser otimizada.

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

Uma das possibilidades é a passagem da url como um parâmetro da função, bem como a adição do target. Desta forma, a importação permanecerá da forma que está e a chamada da função numbersFetch no script.js receberá os parâmetros necessários em sua ativação. Como o arquivo numbers-api.json está no mesmo nível do main.js (resultado final da excução da compactação via webpack), a ativação da função numbersFetch receberá os parâmetros da seguinte forma:

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

A seleção do número de grids, numbersGrid, pode ficar fora da função apiFetch. Uma nova função, insertData, substituirá o código anterior da iteração anterior dentro da função assíncrona apiFetch. No momento, o código completo está da seguinte forma:

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

O objeto NumbersAnimation também pode ser utilizado em uma função específica, para deixar a função apiFetch mais enxuta e com a responsabilidade estrita ao fetch:

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

Assim com feito nesta função, podemos fazer na função bitcoinFetch criada no post JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch.

Código anterior:

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

Ajustando a ativação no script.js:

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

Substituindo os parâmtros na função:

JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch

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.