Aprenda a trabalhar com código modular no JavaScript! Ou seja, como usar a técnica da modularidade para melhorar e organizar o seu código.
Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!
Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:
Na aula de hoje, quero te mostrar como trabalhar com código modular no JavaScript! Você será capaz de usar a técnica da modularidade para melhorar e organizar seu código.
É muito comum nos depararmos com alguns códigos que são difíceis de ler e entender. Você mesmo já deve ter passado por isso ou se deparado com um código assim. No entanto, aplicando técnicas de organização de código, você pode tornar seu código muito mais legível.
Pensando nisso, na aula de hoje, vou te mostrar o ESModules no JavaScript, que é a técnica da modularidade: a separação do código para facilitar a leitura e o entendimento dele.
Então, faça o download do material disponível e venha comigo aprender como trabalhar com código modular!
Na aula de hoje, utilizaremos como base o código que desenvolvemos na aula passada, que gerava uma tabela da Fórmula 1 de 2023.
Dentro desse código, encontramos um array com vários objetos referentes aos pilotos da Fórmula 1 e suas informações. Somente após percorrer mais de 100 linhas desse array é que chegamos à função que utilizaríamos para popular a tabela.
Observe como tivemos que percorrer mais de 100 linhas de dados para chegar à essência do código, que é a função.
Imagine como seria mais prático se pudéssemos ter o array com os dados em um arquivo separado da função em outro. Isso tornaria muito mais fácil compreender e organizar o nosso código.
Para alcançar esse objetivo, utilizaremos a técnica de modularidade de código, tornando-o mais organizado e legível.
A modularidade de código é uma técnica empregada para organizar e melhorar a legibilidade do seu código, separando-o em módulos menores. Além de tornar a leitura mais fácil e objetiva, essa técnica também auxilia na manutenção do código.
Para começar esse processo, vamos recortar o nosso array com as informações dos pilotos da Fórmula 1 e colá-lo em um novo arquivo chamado tabelaFormula1.js.
Dessa forma, a legibilidade do nosso arquivo script.js ficará muito mais clara, pois teremos logo no início a função popularTabelaComDadosLista, que é a parte principal do código.
No entanto, o array é argumento necessário para que a nossa função possa ser executada corretamente.
O objetivo da função popularTabelaComDadosLista era justamente ler o array tabelaPilotos e popular a nossa página com as informações referentes a eles. Se executarmos o código dessa forma, nossa tabela ficará em branco.
Ao trabalhar com código modular, precisamos seguir alguns procedimentos para que o código seja executado corretamente.
O primeiro passo é comunicar dentro do arquivo HTML que nosso arquivo script.js será do tipo modular. Definimos essa informação dentro da tag <script> que fica na <head> do arquivo HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="./style.css" />
<title>f1-2023-standings</title>
<script defer src="./script.js" type="module"></script>
</head>Em seguida, precisamos adicionar a palavra-chave export antes da declaração do nosso array no arquivo tabelaFormula1.js.
export const tabelaPilotos = [Esse comando é usado para exportar e disponibilizar informações de um determinado arquivo JavaScript para outro. Você pode utilizá-lo antes de arrays, funções, variáveis, entre outras estruturas.
Feito isso, podemos importar essa informação dentro do nosso arquivo script.js. Para isso, vamos adicionar no início do código a seguinte linha:
import { tabelaPilotos } from './tabelaFormula1.js';Dessa forma, estamos importando, a partir do arquivo tabelaFormula1.js, o array tabelaPilotos. Se executarmos nosso código agora, a tabela estará novamente preenchida.
Perceba como o código, com os arquivos separados, tornou-se muito mais fácil de ser lido e compreendido.
import { tabelaPilotos, senhaSecreta } from './tabelaFormula1.js';
function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
const corpoTabela = document.getElementById(idCorpoTabela);
listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
const novaLinhaTabela = `<tr class='${
numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
}'>
<td class="text-center py-4">${numeroElemento + 1}</td>
<td class="text-center py-4">${dadosPiloto.name}</td>
<td class="text-center py-4">${dadosPiloto.team}</td>
<td class="text-center py-4">${dadosPiloto.points}</td>
</tr>`;
corpoTabela.innerHTML += novaLinhaTabela;
});
}
popularTabelaComDadosLista(tabelaPilotos, 'corpo-tabela');Essa redução de linhas, além de facilitar a leitura, ajuda na manutenção e atualização que esse código venha a ter.
Dentro de um mesmo arquivo, podemos gerenciar quais estruturas queremos exportar e quais não queremos exportar. Por exemplo, podemos ter outras informações dentro do nosso arquivo tabelaFormula1.js que não queremos exportar para outros arquivos.
Para isso, basta não definirmos o export antes dessas informações. Vamos adicionar logo após o array tabelaPilotos uma variável senhaSecreta, que não será exportada, e uma variável numeroPilotos que será exportada.
const senhaSecreta = 'senha123';
export const numeroPilotos = 22;Feito isso, se voltarmos para o arquivo script.js e tentarmos importar a variável senhaSecreta e depois executar o arquivo, nossa página com a tabela da Fórmula 1 ficará em branco.
import { tabelaPilotos, senhaSecreta } from './tabelaFormula1.js';
function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
const corpoTabela = document.getElementById(idCorpoTabela);
listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
const novaLinhaTabela = `<tr class='${
numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
}'>
<td class="text-center py-4">${numeroElemento + 1}</td>
<td class="text-center py-4">${dadosPiloto.name}</td>
<td class="text-center py-4">${dadosPiloto.team}</td>
<td class="text-center py-4">${dadosPiloto.points}</td>
</tr>`;
corpoTabela.innerHTML += novaLinhaTabela;
});
}
popularTabelaComDadosLista(tabelaPilotos, 'corpo-tabela');
Isso ocorre porque tentamos importar uma variável que não está disponível, o que ocasiona um erro e quebra o nosso código.
Por outro lado, se importarmos a outra informação, numeroPilotos, nossa página voltará a funcionar normalmente, e ainda poderemos utilizar essa variável dentro do script.js.
import { tabelaPilotos, numeroPilotos } from './tabelaFormula1.js';
function popularTabelaComDadosLista(listaDeDadosPilotos, idCorpoTabela) {
const corpoTabela = document.getElementById(idCorpoTabela);
listaDeDadosPilotos.forEach((dadosPiloto, numeroElemento) => {
const novaLinhaTabela = `<tr class='${
numeroElemento % 2 === 0 ? 'bg-slate-100' : ''
}'>
<td class="text-center py-4">${numeroElemento + 1}</td>
<td class="text-center py-4">${dadosPiloto.name}</td>
<td class="text-center py-4">${dadosPiloto.team}</td>
<td class="text-center py-4">${dadosPiloto.points}</td>
</tr>`;
corpoTabela.innerHTML += novaLinhaTabela;
});
}
popularTabelaComDadosLista(tabelaPilotos, 'corpo-tabela');
alert(numeroPilotos);De volta ao arquivo tabelaFormula1.js, podemos apagar a variável senhaSecreta. Mas agora quero te mostrar uma segunda aplicação do export, que é o export default.
Repare que dentro desse arquivo, atualmente, temos duas informações que são exportadas: tabelaPilotos e numeroPilotos.
Essa é uma situação comum em que temos mais de uma informação sendo exportada de um arquivo. No entanto, é importante definirmos quais informações têm prioridade no processo de exportação.
Para identificar essa informação, podemos utilizar o export default. Então, dentro do nosso código, podemos remover o export antes do array e definir ao final, junto com o numeroPilotos, um export default.
export const numeroPilotos = 22;
export default tabelaPilotos;Isso indica o export principal do arquivo. Logo, dentro do arquivo script.js podemos fazer a importação da seguinte forma:
import tabelaPilotos, { numeroPilotos } from './tabelaFormula1.js';Por ser o export default, a tabelaPilotos não precisa estar entre chaves. Já a variável numeroPilotos precisa ser importada dentro de chaves.
Com isso, podemos executar nosso código e teremos primeiro o alerta com o número de pilotos e, em seguida, a tabela preenchida.
Por fim, se tivéssemos um único elemento sendo exportado, no caso a tabelaPilotos, poderíamos apenas manter o array com as informações e um export default.
export default tabelaPilotos;Em seguida, poderíamos importá-la sem a utilização de chaves.
import tabelaPilotos from './tabelaFormula1.js';Na aula de hoje, eu te ensinei como trabalhar com código modular no JavaScript! Com essa técnica de organização e divisão do código em diversos módulos, seu código JavaScript ficará muito mais claro, legível e compreensível.
Para acessar publicações de JavaScript, clique aqui!
Expert em conteúdos da Hashtag Treinamentos. Auxilia na criação de conteúdos de variados temas voltados para aqueles que acompanham nossos canais.
Quer sair do zero no Python e virar uma referência na sua empresa? Inscreva-se agora mesmo no Python Impressionador