JS-1107 - JavaScript Completo ES6 - Refatoração Números Fetch
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:
Esta função, por ser muito específica à necessidade deste projeto, será mantida como função, contudo, ela pode ser otimizada.
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:
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:
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:
Assim com feito nesta função, podemos fazer na função bitcoinFetchcriada no post JS-0608 - JavaScript Completo ES6 - Bitcoin Fetch.
Código anterior:
Ajustando a ativação no script.js:
Substituindo os parâmtros na função:
No final, foi executado o comando do webpack, para montar o arquivo main.js comprimido:
$ npx webpack --entry ./js/script.js -o ./
