Maîtriser le graphe de dépendances

Quand plusieurs fichiers JavaScript se partagent une application, un import placé au mauvais endroit peut créer une boucle entre modules. Le code devient alors plus difficile à comprendre et son initialisation peut produire des résultats inattendus. Vous allez apprendre à lire ces liens et à les orienter sans ajouter de fichier au projet.

Lire les imports comme un graphe

Un graphe de dépendances est une représentation des relations entre les fichiers : chaque module est un sommet, et chaque import forme une flèche vers le module importé. Par exemple, si main.js importe une fonction depuis etat.js, la flèche va de main.js vers etat.js. Les exports définissent ce qu’un module met à disposition ; les imports indiquent de quoi il dépend.

Dans le projet, les fichiers prévus ont des rôles distincts : main.js compose et démarre l’application, tandis que les modules spécialisés réalisent les tâches définies par le contrat. Pour examiner les dépendances, relevez chaque instruction import et notez le fichier qui importe ainsi que celui qui est importé. Ce relevé suffit pour dessiner le graphe ; vous n’avez pas besoin d’un outil ni d’une nouvelle structure de fichiers.

export function nettoyerLibelle(libelle) {
  return libelle.trim();
}

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

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

Préparer le compte rendu

Repérer une dépendance circulaire

Une dépendance circulaire apparaît lorsqu’en suivant les flèches, vous pouvez revenir au module de départ. Par exemple, une flèche de main.js vers etat.js, puis une flèche de etat.js vers main.js, forme le cycle main.js → etat.js → main.js. Un cycle peut aussi passer par plusieurs fichiers avant de revenir au premier.

Les modules ES peuvent exposer des liaisons avant que leur initialisation soit achevée. Dans un cycle, un module peut donc lire une liaison importée trop tôt et provoquer une erreur d’initialisation ; même sans erreur immédiate, le lien rend l’ordre de démarrage plus difficile à raisonner. Une dépendance circulaire est un signal d’organisation à examiner, pas une preuve automatique que l’application échouera.

Orienter les dépendances

Pour éviter les cycles, donnez une direction cohérente au graphe : les modules qui orchestrent l’application peuvent importer les modules spécialisés dont ils ont besoin. Ces derniers ne doivent pas importer main.js en retour. Dans le contrat du projet, les adaptateurs dépendent des modules concernés par l’état et le rendu, mais l’état et le rendu ne remontent pas vers les adaptateurs.

1. Parcourez les imports de chaque fichier modifié et relevez les flèches.
2. Suivez chaque chaîne de flèches ; si elle revient à son point de départ, vous avez repéré un cycle.
3. Cherchez le lien qui remonte vers un module d’orchestration, souvent le signe que la responsabilité est placée au mauvais endroit.
4. Réorganisez l’appel pour que le module de niveau supérieur importe le module spécialisé, puis vérifiez de nouveau les flèches.

Dans l’exemple, gardez main.js → etat.js et ne faites pas importer main.js par etat.js. Si un module spécialisé a besoin d’une opération appartenant à un autre rôle, importez directement le module qui fournit cette opération plutôt que de remonter jusqu’au point d’entrée. Vous conservez ainsi un graphe lisible et évitez d’introduire une dépendance qui contredit les responsabilités déjà réparties.

À retenir

• Un graphe représente les fichiers et les imports orientés entre eux.
• Un cycle existe si une chaîne d’imports revient au module de départ.
• Les modules d’orchestration importent les modules spécialisés ; l’inverse crée un lien à examiner.
• Après une correction, relisez les imports pour confirmer que le cycle a disparu.

Dans la prochaine leçon, vous définirez la forme des données que l’application conserve et la place de cet état dans le graphe de modules.