Manipuler les modules

En JavaScript, comme dans la plupart des langages de programmation, on finit par avoir beaucoup de code. Pour faciliter l'organisation de ce code nous avons besoin de pouvoir le séparer en fichiers différents. Et nous avons besoin de pouvoir appeler un fichier depuis un autre.

Pour faire cela, on a créé un système de modules.

Les modules

En JavaScript, un module est un fichier qui contient du code (variables, fonctions, objets) qui peut être utilisé par d'autres fichiers.

Imaginons que vous avez un formulaire HTML avec lequel vous voulez faire deux choses différentes :

vous voulez pouvoir vérifier les valeurs avant de l'envoyer en ligne
vous voulez utiliser fetch pour l'envoyer au serveur, comme dans l'exercice 3 d'hier

Vous allez donc organiser une structure de fichier qui pourrait ressembler à ça :

- index.html
- style.css
- index.js
- modules/
  - checkForm.js
  - submitForm.js

Dans cette structure, votre fichier principal index.js va appeler des fonctions contenues dans checkForm.js sur les events change de vos inputs et des fonctions contenues dans submitForm.js lors de l'event submit du formulaire.

Travailler avec les modules

Pour utiliser les modules, vous allez devoir changer un peu la façon dont vous appelez votre fichier javascript depuis le HTML. Votre balise <script> va devoir avoir l'attribut type="module" pour que le navigateur puisse comprendre que vous utilisez des modules.

Rendre son code disponible pour un autre fichier

Pour que votre code soit disponible dans un autre fichier, vous allez devoir utiliser le mot clé export.

On peut exporter à peu près ce qu'on veut tant qu'on lui a donné un nom :

une variable primitive
une fonction
un objet
un tableau
...

En termes de code cela ressemble à ça :

export let myVar = 'une valeur'; // j'exporte une variable simple

export const answer = 42; // j'exporte une constante

export function myFunction() { // j'exporte une fonction
  console.log('Hello World');
}

export let myObject = { // j'exporte un objet
  name: 'John',
  age: 30,
};

export let myArray = [1, 2, 3]; // j'exporte un tableau

Utiliser le code d'un autre fichier

Pour récupérer du code dans un autre fichier, on utilise le mot clé import. On peut importer tout ce qu'on peut exporter, c'est-à-dire à peu près tout.

Le code ressemble à ça :

import { myVar } from "./file.js"; // j'importe une variable

import { myFunction } from "./file.js"; // j'importe une fonction

import { answer } from "./file.js"; // j'importe une constante

// je peux importer plusieurs choses en une seule fois
import { myObject, myArray } from "./file.js"; // j'importe l'objet et le tableau

16 January 2026