DEV Community

Altencir Junior
Altencir Junior

Posted on

Entendendo Módulos em JavaScript

Imagine que utilizando um código para gerar um aplicativo de listas com nomes, você precise "chamar" uma outra tela que irá guardar o raciocínio de adicção e exclusão das listagens. Como fazer isso, quando ele está separado em outro arquivo? Para isso, fazemos o uso de Módulos. Veremos o que eles são e exemplos de como são utilizados.

Uma das novidades que surgiu na atualização EcmaScript6 foi a criação dos módulos.

Um módulo é apenas um arquivo. Um script é um módulo. Tão simples como isso.

Os módulos podem carregar uns aos outros e usar diretivas especiais exporte importpara trocar funcionalidade, chamar funções de um módulo de outro. Eles são uma forma de organizar o código em pequenas partes reutilizáveis e encapsuladas.

Exemplo:

// 📁 sayHi.js
export function sayHi(user) {
  alert(`Hello, ${user}!`);
}
Enter fullscreen mode Exit fullscreen mode

Há duas formas principais de se trabalhar com módulos em JavaScript: CommonJS e ECMAScript Modules (ES Modules).

CommonJS -

O CommonJS é um padrão que foi criado para ser usado no desenvolvimento de aplicações server-side com Node.js

// arquivo "module1.js"
const message = "Este é um exemplo de módulo CommonJS";

module.exports = message;

// arquivo "app.js"
const message = require("./module1");

console.log(message);
Enter fullscreen mode Exit fullscreen mode

ECMAScript Modules

Já o Ecma módulo, é utilizado no JavaScript para a maior parte dos navegadores, o foco desse artigo.

// arquivo "module2.js"
export const message = "Este é um exemplo de módulo ES Modules";

// arquivo "app.js"
import { message } from "./module2";

console.log(message);
Enter fullscreen mode Exit fullscreen mode

Com isso, vimos que os módulos em JavaScript são uma ótima maneira de organizar o código em pequenas partes reutilizáveis e mantê-lo limpo e fácil de gerenciar. Além disso, eles permitem que você importe e exporte facilmente funções, objetos e valores entre arquivos, tornando o desenvolvimento mais fácil e eficiente. Se você ainda não está usando módulos em seu código, é uma boa ideia começar a fazê-lo agora.

Top comments (0)