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}!`);
}
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);
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);
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)