Módulos: Organizar a Casa 📂
⚠️ Importante: Para os módulos funcionarem, este ficheiro tem de ser aberto através de um servidor local (ex: Laragon, Live Server). Se abrires direto com duplo-clique, o navegador pode bloquear por segurança (CORS).
O que vais aprender nesta aula:
- Dividir código em vários ficheiros.
exporteexport default.importetype="module".
🧠 Teoria (com Analogia)
🧩 Analogia do LEGO
Até agora, escrevemos todo o código num único ficheiro gigante (como uma caixa de LEGO misturada).
Módulos são caixinhas separadas onde guardas peças específicas (ex: "Peças de Rodas", "Peças de Janelas"). Quando precisas de uma roda, vais à caixa das rodas e tiras (Import).
💻 Estrutura de Ficheiros
Imagina que temos 3 ficheiros no projeto:
math.js
export const PI = 3.1415;
export function somar(a, b) {
return a + b;
}
user.js
export default class User {
constructor(nome) {
this.nome = nome;
}
}
main.js (Principal)
import { somar, PI } from './math.js';
import User from './user.js';
console.log(somar(10, 20)); // 30
const eu = new User("Sandro");
🧪 Demonstração Real
O resultado abaixo vem de módulos JavaScript reais a correr nesta página (vê a consola F12 também):
A carregar módulos...