Módulos em JavaScript

Este artigo explica módulos em JavaScript.

YouTube Video

Módulos em JavaScript

Módulos em JavaScript são uma maneira de organizar o código e dividi-lo em componentes reutilizáveis. Ao usar módulos, a legibilidade e a manutenção do código são melhoradas, e a mesma funcionalidade pode ser reutilizada em outros projetos. Aqui explicamos vários sistemas de módulos, desde o conceito de módulos até exemplos específicos de uso.

O Conceito de Módulos em JavaScript

Originalmente, o JavaScript não possuía um sistema modular. No entanto, à medida que as aplicações se tornaram maiores, a modularização tornou-se importante para dividir o código em unidades menores e reutilizáveis. Um módulo é um trecho de código com uma função específica que pode ser gerenciado de forma independente de outro código, permitindo dividi-lo em vários arquivos.

Principais Tipos de Módulos

Existem vários sistemas de módulos no JavaScript. Os mais comuns são ES Modules (ESM) e CommonJS.

• ES Modules é um sistema de módulos introduzido no ECMAScript 2015 (ES6), que define módulos usando as palavras-chave import e export. Este sistema é amplamente utilizado tanto no lado do cliente (navegadores) quanto no lado do servidor (Node.js).

• CommonJS é um sistema de módulos usado principalmente no Node.js. Os módulos são definidos usando require e module.exports para importar e exportar arquivos.

Detalhes sobre ES Modules (ESM)

ES Modules é o sistema de módulo padrão no JavaScript, permitindo uma troca fácil de funcionalidades entre módulos. Nos navegadores e no Node.js, este sistema é usado para definir e importar módulos.

export e import

export é uma palavra-chave usada para expor funcionalidades de um módulo para fora. import é usado para incorporar funcionalidades definidas em outros módulos.

Exemplo: Exportação de Módulo

Módulos podem ser exportados em ES Modules da seguinte maneira.

1// math.mjs
2export function add(a, b) {
3    return a + b;
4}
5export function subtract(a, b) {
6    return a - b;
7}

Neste módulo math.mjs, as funções add e subtract são exportadas. Essas funções podem ser importadas de outros módulos.

Aqui, .mjs é uma extensão de arquivo que indica explicitamente um arquivo JavaScript no formato ES Modules. No Node.js, a extensão do arquivo determina se é CommonJS ou ES Modules. No entanto, se type: "module" estiver especificado no package.json, arquivos com a extensão .js são tratados como ES Modules por padrão.

Exemplo: Importação de Módulo

Módulos podem ser importados em ES Modules da seguinte maneira.

1// main.mjs
2import { add, subtract } from './math.mjs';
3
4console.log(add(3, 5)); // 8
5console.log(subtract(10, 7)); // 3

Dessa forma, usando import, você pode facilmente utilizar funções definidas em outros arquivos.

Exportação Padrão e Exportação Nomeada

Existem dois métodos de exportação para módulos. Um é a exportação nomeada, e o outro é a exportação padrão.

• Exportações nomeadas são usadas ao exportar várias funções ou variáveis de um módulo. Você pode realizar várias exportações, e ao importar, recebê-las com nomes especificados.

1// utils.mjs
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

1// main.mjs
2import { sum, multiply } from './utils.mjs';
3
4console.log(sum(4, 6));       // 10
5console.log(multiply(3, 5));  // 15

• Exportação padrão é usada ao exportar uma única função ou classe de um módulo. Durante a importação, pode ser recebido com qualquer nome.

1// greet.mjs
2export default function greet() {
3    return "Hello, World!";
4}

1// main.mjs
2import greet from './greet.mjs';
3
4console.log(greet()); // "Hello, World!"

Apenas uma exportação padrão é possível, mas exportações nomeadas podem exportar vários elementos simultaneamente.

Exemplo de uso no lado do cliente (navegador).

Exemplo: Exportação de Módulo

Módulos podem ser exportados em ES Modules da seguinte maneira.

1// utils.js
2export function sum(a, b) {
3    return a + b;
4}
5export function multiply(a, b) {
6    return a * b;
7}

Neste módulo utils.js, as funções sum e multiply são exportadas.

Exemplo: Importação de Módulo

Módulos podem ser importados no lado do cliente da seguinte maneira.

 1<!DOCTYPE html>
 2<html lang="ja">
 3<head>
 4  <meta charset="UTF-8">
 5  <title>ES Modules Sample in HTML</title>
 6</head>
 7<body>
 8  <h1>ES Modules Sample</h1>
 9  <div id="result"></div>
10
11  <script type="module">
12    import { sum, multiply } from './utils.js';
13
14    const result = `
15      <p>sum(3, 5) = ${sum(3, 5)}</p>
16      <p>multiply(10, 7) = ${multiply(10, 7)}</p>
17    `;
18
19    document.getElementById('result').innerHTML = result;
20    console.log(sum(3, 5));      // 8
21    console.log(multiply(10, 7)); // 70
22  </script>
23</body>
24</html>

• Definindo o atributo type da tag <script> como module, a sintaxe de módulos ES como import e export pode ser usada dentro do HTML.
• A instrução import carrega o arquivo externo utils.js e exibe o resultado.

Detalhes do CommonJS

CommonJS é um sistema de módulos principalmente usado no Node.js. Os módulos são exportados e importados usando module.exports e require.

require e module.exports

No CommonJS, module.exports é usado para exportar módulos. Além disso, require é usado para utilizar módulos de outros arquivos.

Exemplo: Exportação de Módulo

Módulos podem ser exportados em CommonJS da seguinte maneira.

1// math.js
2module.exports = {
3    add: function(a, b) {
4        return a + b;
5    },
6    subtract: function(a, b) {
7        return a - b;
8    }
9};

Exemplo: Importação de Módulo

Módulos podem ser importados em CommonJS da seguinte maneira.

1// main.js
2const math = require('./math.js');
3
4console.log(math.add(4, 7));      // 11
5console.log(math.subtract(9, 2)); // 7

No Node.js, CommonJS é usado como o sistema de módulos padrão, mas Módulos ES também são suportados.

Importação Dinâmica

Em JavaScript, os módulos podem ser importados dinamicamente usando import(). Esse método utiliza processamento assíncrono para carregar módulos conforme necessário.

Importações dinâmicas podem ser feitas da seguinte maneira.

1async function loadModule() {
2    const math = await import('./math.js');
3    console.log(math.add(5, 3)); // 8
4}
5
6loadModule();

A importação dinâmica é uma forma de melhorar o desempenho da aplicação. Como você pode carregar módulos conforme necessário ao invés de carregar tudo no carregamento inicial, isso melhora a velocidade de exibição da página.

Vantagens dos Módulos

• Reutilização de Código

  • O código modularizado pode ser reutilizado em outros projetos. Ao criar módulos com funcionalidades comuns e utilizá-los em várias aplicações, a eficiência do desenvolvimento é significativamente melhorada.

• Manutenção Aprimorada

  • Ao dividir o código em módulos, é mais fácil modificar funcionalidades ou partes específicas. Gerenciar o código em pequenas unidades facilita encontrar e corrigir erros.

• Evitar Colisões de Namespace

  • Definir muitas variáveis e funções no escopo global pode causar colisões de nomes, mas a modularização evita isso e ajuda a manter uma base de código mais limpa.

• Gerenciamento de Dependências

  • O uso de módulos permite gerenciar explicitamente as dependências de uma aplicação. Fica claro qual módulo depende de outros, tornando a estrutura do código mais fácil de entender.

Resumo

O sistema de módulos do JavaScript é uma ferramenta poderosa para organizar o código e dividi-lo em componentes reutilizáveis. Ao entender as diferenças entre os Módulos ES e CommonJS e escolher o sistema de módulos apropriado com base no projeto, você pode melhorar a legibilidade e a manutenção do código. Além disso, ao utilizar importações dinâmicas, você pode otimizar o desempenho da aplicação.

Vamos aproveitar o sistema de módulos para criar aplicações JavaScript mais escaláveis e eficientes.

Você pode acompanhar o artigo acima usando o Visual Studio Code em nosso canal do YouTube. Por favor, confira também o canal do YouTube.

YouTube Video