0Pricing
JavaScript Academy · Lezione

Callback del ciclo di vita

Si colleghi agli eventi di connessione, disconnessione e modifica degli attributi.

Callback del ciclo di vita è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 4 lezioni in totale.

Il ciclo di vita dell'elemento

Gli elementi personalizzati hanno un ciclo di vita definito. Il browser chiama metodi speciali della classe in momenti importanti:

  • connectedCallback — aggiunto al DOM
  • disconnectedCallback — rimosso dal DOM
  • attributeChangedCallback — cambia un attributo osservato
  • adoptedCallback — spostato in un nuovo documento

connectedCallback

connectedCallback viene eseguito ogni volta che l'elemento viene inserito nel documento. È il punto ideale per eseguire il rendering del contenuto, recuperare dati o associare listener globali.

Può essere eseguito più volte se l'elemento viene spostato.

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

disconnectedCallback

disconnectedCallback viene eseguito quando l'elemento viene rimosso dal DOM. Lo utilizzi per eseguire le operazioni di pulizia: rimuova i listener globali, annulli i timer o chiuda le connessioni per evitare perdite di memoria.

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

Osservazione degli attributi

Per reagire alle modifiche degli attributi, deve dichiarare quali attributi osservare tramite un getter statico observedAttributes che restituisce un array di nomi.

Solo gli attributi elencati attivano attributeChangedCallback.

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

attributeChangedCallback

Quando un attributo osservato viene aggiunto, rimosso o modificato, il browser chiama attributeChangedCallback(name, oldValue, newValue). Lo utilizzi per mantenere sincronizzato l'output visualizzato con gli attributi.

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);

Argomenti del callback

attributeChangedCallback riceve tre argomenti:

  • name — l'attributo che è cambiato
  • oldValue — il valore precedente (null se è stato appena aggiunto)
  • newValue — il nuovo valore (null se è stato rimosso)

Confronti il valore precedente e quello nuovo per evitare operazioni non necessarie.

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

Chiamate iniziali degli attributi

Se un elemento possiede già un attributo osservato quando viene aggiornato, attributeChangedCallback viene eseguito una volta per ciascun attributo, prima di connectedCallback. Questo consente di inizializzare automaticamente l'elemento dal markup.

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

Riflessione delle proprietà negli attributi

Un pattern comune consiste nell'esporre una proprietà JavaScript che legge e scrive l'attributo. In questo modo l'API rimane intuitiva e sincronizzata.

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 viene eseguito quando un elemento viene spostato da un documento a un altro, ad esempio in un iframe tramite document.adoptNode. È raramente necessario, ma completa il ciclo di vita.

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

Ordine del ciclo di vita

Per un elemento scritto direttamente in HTML, l'ordine tipico è:

  • constructor
  • attributeChangedCallback (una volta per ogni attributo osservato presente)
  • connectedCallback

In seguito, quando viene rimosso, viene eseguito disconnectedCallback.

Mettere insieme tutti gli elementi

Un elemento completo collega tutti i componenti: osserva gli attributi, esegue il rendering alla connessione, si sincronizza quando cambia un attributo ed esegue la pulizia alla disconnessione.

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);

Verifica rapida

Verifichi la Sua conoscenza dei callback del ciclo di vita.

Riepilogo

Ha imparato il ciclo di vita degli elementi personalizzati:

  • connectedCallback viene eseguito all'inserimento: esegua qui il rendering.
  • disconnectedCallback viene eseguito alla rimozione: esegua qui la pulizia.
  • observedAttributes dichiara quali attributi osservare.
  • attributeChangedCallback(name, old, new) reagisce alle modifiche.
  • adoptedCallback gestisce gli spostamenti tra documenti.

Ora incapsuleremo stili e markup con Shadow DOM.

Domande Frequenti

La lezione «Callback del ciclo di vita» è gratuita?

Sì — il testo completo di «Callback del ciclo di vita» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 4 lezioni in totale.

Cosa imparerò in «Callback del ciclo di vita»?

Si colleghi agli eventi di connessione, disconnessione e modifica degli attributi. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Callback del ciclo di vita»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Definire Custom Elements
  2. Callback del ciclo di vita
  3. Shadow DOM e incapsulamento
  4. Template e slot
← Torna a JavaScript Academy