El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem sobre els mòduls en JavaScript, una característica que permet organitzar el codi en unitats reutilitzables i mantenibles. Els mòduls ajuden a dividir el codi en diferents fitxers, facilitant la seva gestió i manteniment.

Què són els Mòduls?

Els mòduls són blocs de codi que encapsulen funcionalitats específiques i es poden importar i exportar entre diferents parts d'una aplicació. Això permet una millor organització del codi i facilita la reutilització de components.

Avantatges dels Mòduls

Encapsulació: Manté el codi organitzat i evita conflictes de noms.
Reutilització: Permet reutilitzar codi en diferents parts de l'aplicació.
Mantenibilitat: Facilita la gestió i actualització del codi.

Exportació de Mòduls

Per exportar funcionalitats d'un mòdul, utilitzem la paraula clau export. Hi ha dues maneres principals d'exportar: exportació anomenada i exportació per defecte.

Exportació Anomenada

Permet exportar múltiples elements des d'un mateix mòdul.

// math.js
export const pi = 3.14159;

export function sum(a, b) {
  return a + b;
}

export class Circle {
  constructor(radius) {
    this.radius = radius;
  }

  area() {
    return pi * this.radius * this.radius;
  }
}

Exportació per Defecte

Permet exportar un únic valor o funció com a exportació principal del mòdul.

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Importació de Mòduls

Per importar funcionalitats d'un mòdul, utilitzem la paraula clau import.

Importació Anomenada

Importa elements específics d'un mòdul.

// main.js
import { pi, sum, Circle } from './math.js';

console.log(pi); // 3.14159
console.log(sum(2, 3)); // 5

const circle = new Circle(5);
console.log(circle.area()); // 78.53975

Importació per Defecte

Importa l'exportació per defecte d'un mòdul.

// main.js
import greet from './greet.js';

console.log(greet('World')); // Hello, World!

Importació Combinada

Es poden combinar importacions anomenades i per defecte.

// main.js
import greet, { pi, sum, Circle } from './math.js';

console.log(greet('World')); // Hello, World!
console.log(pi); // 3.14159
console.log(sum(2, 3)); // 5

const circle = new Circle(5);
console.log(circle.area()); // 78.53975

Exercicis Pràctics

Exercici 1: Exportació i Importació Anomenada

Crea un fitxer utils.js amb les següents exportacions anomenades:
- Una constant MAX_VALUE amb el valor 100.
- Una funció isEven que comprova si un nombre és parell.
- Una classe Rectangle amb un constructor que accepta l'amplada i l'alçada, i un mètode area que retorna l'àrea del rectangle.
Importa aquestes exportacions en un fitxer main.js i utilitza-les.

// utils.js
export const MAX_VALUE = 100;

export function isEven(num) {
  return num % 2 === 0;
}

export class Rectangle {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }

  area() {
    return this.width * this.height;
  }
}

// main.js
import { MAX_VALUE, isEven, Rectangle } from './utils.js';

console.log(MAX_VALUE); // 100
console.log(isEven(4)); // true
console.log(isEven(5)); // false

const rect = new Rectangle(10, 5);
console.log(rect.area()); // 50

Exercici 2: Exportació i Importació per Defecte

Crea un fitxer message.js amb una exportació per defecte d'una funció showMessage que accepta un missatge i el mostra per consola.
Importa aquesta funció en un fitxer main.js i utilitza-la.

// message.js
export default function showMessage(message) {
  console.log(message);
}

// main.js
import showMessage from './message.js';

showMessage('Hello, JavaScript Modules!'); // Hello, JavaScript Modules!

Resum

En aquesta secció, hem après sobre els mòduls en JavaScript i com utilitzar les exportacions i importacions per organitzar el codi de manera eficient. Els mòduls permeten encapsular funcionalitats, reutilitzar codi i mantenir-lo de manera més fàcil. Hem vist exemples pràctics d'exportació anomenada i per defecte, així com la seva importació corresponent. Amb aquests coneixements, estem preparats per estructurar millor les nostres aplicacions JavaScript.

Mòduls i Importació/Exportació

Què són els Mòduls?

Avantatges dels Mòduls

Exportació de Mòduls

Exportació Anomenada

Exportació per Defecte

Importació de Mòduls

Importació Anomenada

Importació per Defecte

Importació Combinada

Exercicis Pràctics

Exercici 1: Exportació i Importació Anomenada

Exercici 2: Exportació i Importació per Defecte

Resum

JavaScript: De Principiant a Avançat

Mòdul 1: Introducció a JavaScript

Mòdul 2: Estructures de Control

Mòdul 3: Funcions

Mòdul 4: Objectes i Arrays

Mòdul 5: Objectes i Funcions Avançades

Mòdul 6: El Model d'Objectes del Document (DOM)

Mòdul 7: APIs del Navegador i Temes Avançats

Mòdul 8: Proves i Depuració

Mòdul 9: Rendiment i Optimització

Mòdul 10: Frameworks i Llibreries de JavaScript

Mòdul 11: Projecte Final