Les Modules JavaScript

Les modules permettent de séparer le code dans plusieurs fichiers.

Cette approche aide à :

• Organiser un projet
• Réutiliser du code
• Éviter les fichiers géants
• Créer une architecture plus propre

Les modules sont une partie très importante du JavaScript moderne.

1. Pourquoi utiliser des modules

Sans modules, tout le code se retrouve souvent dans un seul fichier.

script.js

Dans un vrai projet, cela devient rapidement difficile à maintenir.

Les modules permettent de séparer les responsabilités.

2. Exemple de structure

project/
│
├── math.js
├── cart.js
├── user.js
└── main.js

Chaque fichier possède sa propre responsabilité.

3. export

Le mot-clé export permet de rendre une valeur accessible depuis un autre fichier.

// math.js

export function add(a, b) {

    return a + b;

}

Ici, la fonction add() devient exportée.

4. import

Le mot-clé import permet d’utiliser un élément exporté.

// main.js

import { add } from "./math.js";

console.log(add(2, 3));

Ici, main.js importe la fonction add().

5. Comment lire import

import { add } from "./math.js";

6. Export multiple

Un fichier peut exporter plusieurs éléments.

// math.js

export function add(a, b) {

    return a + b;

}

export function multiply(a, b) {

    return a * b;

}

Puis :

import { add, multiply } from "./math.js";

7. Export default

Un module peut aussi posséder un export principal.

// user.js

export default function login() {

    console.log("Connexion");

}

Importation :

import login from "./user.js";

Ici, les accolades ne sont pas nécessaires.

8. Différence entre export et export default

9. Renommer un import

Un élément importé peut être renommé.

import { add as addition } from "./math.js";

console.log(addition(2, 3));

10. Importer tout un module

import * as math from "./math.js";

console.log(math.add(2, 3));

console.log(math.multiply(2, 3));

Tous les exports sont regroupés dans un objet.

11. Modules dans le navigateur

Pour utiliser les modules dans un navigateur, le script doit utiliser :

type="module"

<script type="module" src="main.js"></script>

12. Les chemins relatifs

Les imports utilisent souvent des chemins relatifs.

./

Signifie :

"dans le dossier actuel"

../

Signifie :

"remonter d’un dossier"

13. CommonJS

Avant les modules modernes, Node.js utilisait principalement :

CommonJS

Exemple :

// math.js

function add(a, b) {

    return a + b;

}

module.exports = add;

// main.js

const add = require("./math");

console.log(add(2, 3));

14. ES Modules vs CommonJS

15. Modules et architecture

Les modules améliorent énormément l’architecture d’un projet.

Chaque fichier peut :

• Gérer une responsabilité
• Être testé séparément
• Être réutilisé ailleurs
• Être maintenu plus facilement

16. Exemple concret

Fichier :

// cart.js

export function createCartMessage(cart) {

    if (cart.size === 0) {

        return "Votre panier est vide";

    }

    return "Votre panier contient des articles";

}

Utilisation :

// main.js

import { createCartMessage } from "./cart.js";

const cart = new Map();

console.log(createCartMessage(cart));

17. Bonnes pratiques

• Créer un fichier par responsabilité
• Éviter les fichiers géants
• Utiliser des noms clairs
• Préférer ES Modules dans les projets modernes
• Garder une architecture simple
• Exporter seulement ce qui est nécessaire

Résumé rapide