JavaScript Academy · Leçon

Rappels du cycle de vie

Branchez-vous sur les changements de connexion, de déconnexion et d’attributs.

Rappels du cycle de vie est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 4 leçons au total.

Le cycle de vie d’un élément

Les éléments personnalisés ont un cycle de vie défini. Le navigateur appelle des méthodes spéciales de votre classe à des moments clés :

connectedCallback — ajouté au DOM
disconnectedCallback — retiré du DOM
attributeChangedCallback — un attribut observé change
adoptedCallback — déplacé vers un nouveau document

connectedCallback

connectedCallback s’exécute chaque fois que l’élément est inséré dans le document. C’est l’endroit idéal pour afficher du contenu, récupérer des données ou ajouter des écouteurs globaux.

Il peut se déclencher plusieurs fois si l’élément est déplacé.

class StatusBadge extends HTMLElement {
  connectedCallback() {
    this.textContent = 'Online';
    console.log('badge added to page');
  }
}
customElements.define('status-badge', StatusBadge);

disconnectedCallback

disconnectedCallback s’exécute lorsque l’élément est retiré du DOM. Utilisez-le pour effectuer le nettoyage : supprimez les écouteurs globaux, annulez les minuteurs ou fermez les connexions afin d’éviter les fuites de mémoire.

class ClockWidget extends HTMLElement {
  connectedCallback() {
    this.timer = setInterval(() => {
      this.textContent = new Date().toLocaleTimeString();
    }, 1000);
  }
  disconnectedCallback() {
    clearInterval(this.timer); // cleanup
  }
}
customElements.define('clock-widget', ClockWidget);

Observer les attributs

Pour réagir aux changements d’attributs, vous devez déclarer les attributs à surveiller avec un accesseur statique observedAttributes qui renvoie un tableau de noms.

Seuls les attributs répertoriés déclenchent attributeChangedCallback.

class AvatarImage extends HTMLElement {
  static get observedAttributes() {
    return ['src', 'alt'];
  }
}
customElements.define('avatar-image', AvatarImage);

attributeChangedCallback

Lorsqu’un attribut observé est ajouté, supprimé ou modifié, le navigateur appelle attributeChangedCallback(name, oldValue, newValue). Utilisez-le pour maintenir votre contenu affiché en synchronisation avec les attributs.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
      this.innerHTML = '<img src="' + newValue + '">';
    }
  }
}
customElements.define('avatar-image', AvatarImage);

Arguments du rappel

attributeChangedCallback reçoit trois arguments :

name — l’attribut qui a changé
oldValue — la valeur précédente (null s’il vient d’être ajouté)
newValue — la nouvelle valeur (null s’il a été supprimé)

Comparez l’ancienne et la nouvelle valeur pour éviter tout travail inutile.

attributeChangedCallback(name, oldValue, newValue) {
  if (oldValue === newValue) return; // no real change
  console.log(name + ' changed to ' + newValue);
}

Appels initiaux liés aux attributs

Si un élément possède déjà un attribut observé au moment de sa mise à niveau, attributeChangedCallback se déclenche une fois pour chacun d’eux, avant connectedCallback. Cela vous permet d’initialiser automatiquement l’élément à partir du balisage.

// <avatar-image src="a.png"></avatar-image>
// On upgrade: attributeChangedCallback('src', null, 'a.png')
// runs BEFORE connectedCallback.

Réflexion des propriétés vers les attributs

Un schéma courant consiste à exposer une propriété JavaScript qui lit et écrit l’attribut. L’API reste ainsi agréable à utiliser tout en restant synchronisée.

class AvatarImage extends HTMLElement {
  static get observedAttributes() { return ['src']; }
  get src() { return this.getAttribute('src'); }
  set src(value) { this.setAttribute('src', value); }
}
customElements.define('avatar-image', AvatarImage);

adoptedCallback

adoptedCallback s’exécute lorsqu’un élément est déplacé d’un document vers un autre (par exemple, dans un iframe via document.adoptNode). Il est rarement nécessaire, mais complète le cycle de vie.

class PortableWidget extends HTMLElement {
  adoptedCallback() {
    console.log('moved to a new document');
  }
}
customElements.define('portable-widget', PortableWidget);

Ordre du cycle de vie

Pour un élément écrit directement en HTML, l’ordre habituel est le suivant :

constructor
attributeChangedCallback (une fois par attribut observé présent)
connectedCallback

Puis, lors de sa suppression, disconnectedCallback.

Assembler le tout

Un élément complet relie toutes les pièces : observer les attributs, afficher le contenu lors de la connexion, synchroniser lors d’un changement d’attribut et effectuer le nettoyage lors de la déconnexion.

class GreetUser extends HTMLElement {
  static get observedAttributes() { return ['name']; }
  connectedCallback() { this.render(); }
  attributeChangedCallback() { this.render(); }
  render() {
    const name = this.getAttribute('name') || 'Guest';
    this.textContent = 'Hello, ' + name;
  }
}
customElements.define('greet-user', GreetUser);

Vérification rapide

Testez vos connaissances sur les rappels du cycle de vie.

Récapitulatif

Vous avez découvert le cycle de vie des éléments personnalisés :

connectedCallback s’exécute lors de l’insertion — affichez le contenu à cet endroit.
disconnectedCallback s’exécute lors de la suppression — effectuez le nettoyage à cet endroit.
observedAttributes déclare les attributs à surveiller.
attributeChangedCallback(name, old, new) réagit aux changements.
adoptedCallback gère les déplacements entre documents.

Ensuite, nous encapsulerons les styles et le balisage avec le DOM fantôme.

Questions Fréquemment Posées

La leçon « Rappels du cycle de vie » est-elle gratuite ?

Oui — le texte complet de « Rappels du cycle de vie » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Rappels du cycle de vie » ?

Branchez-vous sur les changements de connexion, de déconnexion et d’attributs. Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Rappels du cycle de vie » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à JavaScript Academy