Séparer le code en modules ES

Le fichier principal du gestionnaire commence à réunir plusieurs responsabilités : charger et enregistrer les tâches, puis réagir au formulaire et mettre à jour la page. Quand tout le code se trouve au même endroit, il devient plus difficile de repérer où modifier une règle sans perturber le reste.

Vous allez déplacer le chargement, l’enregistrement et les opérations sur les tâches dans js/taches.js. Le fichier js/main.js conservera le code lié au formulaire et à l’affichage déjà commencé ; il utilisera les fonctions du module au lieu de contenir lui-même la logique de stockage. La balise de module et les notions de stockage local ont été présentées dans les leçons précédentes.

Déplacer la logique des tâches

Un module peut rendre des fonctions disponibles à d’autres fichiers avec un export. Ici, vous regroupez dans js/taches.js les fonctions qui lisent, enregistrent et modifient le tableau. La clé utilisée dans localStorage reste taches, et chaque tâche garde la forme { libelle, terminee }.

const cleTaches = "taches";

export function chargerTaches() {
  const donneesEnregistrees = localStorage.getItem(cleTaches);

  if (donneesEnregistrees === null) {
    return [];
  }

  return JSON.parse(donneesEnregistrees);
}

export function enregistrerTaches(taches) {
  localStorage.setItem(cleTaches, JSON.stringify(taches));
}

export function ajouterTache(taches, libelle) {
  const nouvelleTache = {
    libelle: libelle,
    terminee: false
  };

  taches.push(nouvelleTache);
  enregistrerTaches(taches);
  return nouvelleTache;
}

Les trois fonctions exportées ont chacune une responsabilité ciblée. chargerTaches renvoie le tableau enregistré ou un tableau vide ; enregistrerTaches sauvegarde le tableau reçu ; ajouterTache construit une tâche non terminée, l’ajoute au tableau, puis enregistre les données. La valeur renvoyée par cette dernière fonction est l’objet créé, que le fichier principal peut utiliser pour conserver son affichage actuel.

Importer les fonctions dans le fichier principal

Dans js/main.js, importez les trois fonctions depuis le module, puis initialisez le tableau avec chargerTaches(). L’écouteur du formulaire peut maintenant appeler ajouterTache à la place de construire et sauvegarder lui-même l’objet. Conservez la sélection des éléments, l’écouteur et la création DOM déjà en place : seul le traitement des données est déplacé.

import {
  ajouterTache,
  chargerTaches,
  enregistrerTaches
} from "./taches.js";

const formulaire = document.querySelector(".taches-formulaire");
const champTache = document.querySelector(".taches-formulaire__champ");
const listeTaches = document.querySelector(".taches-liste");
const taches = chargerTaches();

function formaterLibelle(tache) {
  return `${tache.libelle}${tache.terminee ? " (terminée)" : ""}`;
}

formulaire.addEventListener("submit", function (evenement) {
  evenement.preventDefault();

  const libelle = champTache.value.trim();

  if (libelle === "") {
    return;
  }

  const nouvelleTache = ajouterTache(taches, libelle);
  const element = document.createElement("li");
  const libelleElement = document.createElement("span");

  element.classList.add("taches-liste__element");
  libelleElement.classList.add("taches-liste__libelle");
  libelleElement.textContent = formaterLibelle(nouvelleTache);
  element.append(libelleElement);
  listeTaches.append(element);
  champTache.value = "";
});

Le formulaire conserve ainsi le comportement déjà établi : il empêche le rechargement de la page, récupère le libellé, ajoute la tâche, affiche son nom et vide le champ. Dans cette version, l’ajout et l’enregistrement sont effectués par le module. L’import de enregistrerTaches vous servira directement dans la suite, lorsque des actions modifieront ou supprimeront des tâches ; si votre environnement signale qu’il n’est pas encore utilisé, vous pouvez tout de même le conserver.

Vérifier l’organisation

Rechargez la page, ajoutez une tâche, puis rechargez-la à nouveau. La fonction de chargement doit retrouver les données, et l’ajout doit encore écrire dans le stockage local ; le rendu initial de toutes les tâches enregistrées sera construit dans la prochaine leçon. Dans les outils de développement, une erreur de chargement du module indique généralement un chemin ou un nom d’export incorrect : vérifiez les deux fichiers et leur emplacement.

À retenir

• Un module regroupe du code dans un fichier identifiable et peut rendre des fonctions disponibles avec export.
• Un import nommé reprend exactement les noms exportés et un chemin relatif correct.
• Le module js/taches.js gère le chargement, l’enregistrement et l’ajout des tâches ; js/main.js conserve les interactions de page.
• La séparation ne change ni la clé localStorage, ni la forme des objets tâche, ni le comportement d’ajout.

Dans la prochaine leçon, vous construirez l’affichage initial de la liste à partir des tâches chargées depuis le navigateur.