Créer des modules ES réutilisables

Quand une application grandit, regrouper tout le JavaScript dans un seul fichier rend les responsabilités difficiles à retrouver et les changements risqués. Les modules ES vous permettent de répartir le code entre plusieurs fichiers tout en choisissant explicitement ce que chaque fichier rend accessible aux autres. Vous allez mettre en place ce mécanisme dans le gestionnaire de tâches, sans encore définir son état ni ses transitions.

Déclarer une fonction exportée

Un module ES est un fichier JavaScript qui peut rendre certains de ses éléments accessibles à d’autres fichiers. Un export nommé expose une fonction ou une constante sous son nom déclaré. Pour cet exemple, vous ajoutez à etat.js une fonction utilitaire qui nettoie le texte saisi ; elle ne lit ni ne modifie l’interface.

// js/etat.js
export function nettoyerLibelle(texte) {
  return texte.trim();
}

La déclaration nommée nettoyerLibelle est maintenant exportée. Le nom fait partie de l’interface du module : les autres fichiers devront l’importer exactement sous cette forme, sauf s’ils choisissent explicitement un alias. Gardez des noms précis, car ils rendent le rôle de chaque dépendance visible à la lecture.

Importer depuis un chemin relatif

Dans main.js, vous pouvez importer cette fonction avec un import statique. Il est dit statique parce que le navigateur connaît le module à charger dès l’analyse du fichier, avant l’exécution du code. Le chemin est relatif au fichier qui contient l’import : depuis js/main.js, le fichier voisin s’écrit ./etat.js.

// js/main.js
import { nettoyerLibelle } from "./etat.js";

const exemple = nettoyerLibelle("  Préparer le compte rendu  ");
console.log(exemple);

Préparer le compte rendu

Les accolades indiquent que vous importez un export nommé, et l’orthographe doit correspondre à celle de la déclaration. Le préfixe ./ désigne le même dossier ; ../ remonterait d’un dossier. Dans un navigateur, indiquez l’extension .js dans le chemin afin que la ressource puisse être résolue directement.

Activer les modules dans la page

Le navigateur traite le fichier d’entrée comme un module grâce à l’attribut type="module". Le squelette du projet le déclare déjà sur la balise qui charge js/main.js : conservez cette balise. Les modules sont chargés avec les règles de sécurité du navigateur ; ouvrez le projet depuis un serveur HTTP de développement plutôt qu’en ouvrant directement le fichier HTML avec une URL file://.

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

Vous pouvez exporter plusieurs éléments nommés depuis un fichier, puis en importer seulement ceux dont un autre module a besoin. Évitez de réexporter systématiquement tout le contenu : un import explicite indique précisément le contrat utilisé par le fichier appelant. La répartition des responsabilités a été définie dans la leçon précédente ; ici, vous établissez le mécanisme qui permet aux fichiers d’échanger leurs fonctions.

À retenir

Dans la prochaine leçon, vous examinerez les liens entre ces imports pour comprendre et maîtriser le graphe de dépendances du projet.