Como Trabalhar com Código Modular? – ESModules

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.

Código modular em JavaScript é a prática de dividir o programa em arquivos menores e independentes (módulos), cada um com uma responsabilidade. Com os ES Modules, você expõe partes de um arquivo usando export e as usa em outro com import. Isso deixa o código mais organizado, reutilizável e fácil de manter.

Caso prefira esse conteúdo no formato de vídeo-aula, assista ao vídeo abaixo ou acesse o nosso canal do YouTube!

O que você aprende neste vídeo

Resposta rápida: Nesta aula, o instrutor ensina a trabalhar com código modular em JavaScript (ESModules), separar o código em vários arquivos (módulos) e usar um no outro. Ele mostra como exportar informações de um arquivo (export) e importar no outro (import), a diferença entre o export nomeado (com chaves) e o export default (sem chaves), e o que fica privado quando não é exportado.

Neste vídeo (14 min):

• 0:00 - O que é código modular: separar o código em vários arquivos (módulos) reutilizáveis.
• 6:00 - import: importar as informações que você quer de outro arquivo.
• 8:00 - export: exportar (ou não) as informações de um arquivo, o que fica privado.
• 14:00 - A diferença entre o export nomeado (com chaves) e o export default (sem chaves).

Para receber por e-mail o(s) arquivo(s) utilizados na aula, preencha:

Como Trabalhar com Código Modular? – ESModules

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!

Apresentação do Código

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.

Separação de Código – Modularidade de Código

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.

JavaScript Impressionador

Como usar JavaScript em qualquer empresa e qualquer área, com exemplos totalmente aplicados à realidade do Mercado de Trabalho, seja para se tornar um Desenvolvedor Front End, Backend, Full Stack ou Mobile.

Começar agora

<!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.

Gerenciamento de Exportações no JavaScript

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);

Export Default no JavaScript – Exportando o Conteúdo mais Importante

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';

Perguntas frequentes

Conclusão – Como Trabalhar com Código Modular? – ESModules

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.

Hashtag Treinamentos

Para acessar publicações de JavaScript, clique aqui!