JavaScript Academy · Lektion

Lifecycle-callbacks

Kobl dig på ændringer i connected, disconnected og attributter.

Lektion 2 af 413 trin

Lifecycle-callbacks er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Elementets livscyklus

Brugerdefinerede elementer har en fastlagt livscyklus. Browseren kalder særlige metoder på din klasse på bestemte tidspunkter:

connectedCallback — tilføjet til DOM'en
disconnectedCallback — fjernet fra DOM'en
attributeChangedCallback — en observeret attribut ændres
adoptedCallback — flyttet til et nyt dokument

connectedCallback

connectedCallback køres, hver gang elementet indsættes i dokumentet. Det er det ideelle sted at gengive indhold, hente data eller tilknytte globale hændelseslyttere.

Det kan blive udløst flere gange, hvis elementet flyttes rundt.

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

disconnectedCallback

disconnectedCallback køres, når elementet fjernes fra DOM'en. Brug det til at rydde op: fjern globale hændelseslyttere, annullér timere, eller luk forbindelser for at undgå hukommelseslækager.

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

Overvågning af attributter

Hvis du vil reagere på ændringer i attributter, skal du erklære, hvilke attributter der skal overvåges, med en statisk observedAttributes-getter, der returnerer en array med navne.

Kun de angivne attributter udløser attributeChangedCallback.

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

attributeChangedCallback

Når en observeret attribut tilføjes, fjernes eller ændres, kalder browseren attributeChangedCallback(name, oldValue, newValue). Brug den til at holde det gengivne output synkroniseret med attributterne.

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

Argumenter til tilbagekaldet

attributeChangedCallback modtager tre argumenter:

name — hvilken attribut der blev ændret
oldValue — den tidligere værdi (null hvis den netop blev tilføjet)
newValue — den nye værdi (null hvis den blev fjernet)

Sammenlign den gamle og den nye værdi for at undgå unødvendigt arbejde.

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

Indledende attributkald

Hvis et element allerede har en observeret attribut, når det opgraderes, udløses attributeChangedCallback én gang for hver af dem, før connectedCallback. Det gør det muligt automatisk at initialisere elementet ud fra opmærkningen.

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

Spejling af egenskaber til attributter

Et almindeligt mønster er at udstille en JavaScript-egenskab, der læser og skriver attributten. Det holder API'et nemt at bruge og synkroniseret.

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 køres, når et element flyttes fra ét dokument til et andet, for eksempel ind i en iframe via document.adoptNode. Det er sjældent nødvendigt, men fuldender livscyklussen.

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

Livscyklusordenen

For et element, der er skrevet direkte i HTML, er den typiske rækkefølge:

constructor
attributeChangedCallback (én gang for hver tilstedeværende observeret attribut)
connectedCallback

Og senere, når elementet fjernes, disconnectedCallback.

Sæt det hele sammen

Et komplet element forbinder alle delene: overvåger attributter, gengiver ved tilslutning, synkroniserer ved ændringer i attributter og rydder op ved afkobling.

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

Hurtig test

Test din viden om livscyklus-tilbagekald.

Besvar den i den interaktive lektion

Opsummering

Du har lært livscyklussen for brugerdefinerede elementer:

connectedCallback køres ved indsættelse — gengiv indhold her.
disconnectedCallback køres ved fjernelse — ryd op her.
observedAttributes erklærer, hvilke attributter der skal overvåges.
attributeChangedCallback(name, old, new) reagerer på ændringer.
adoptedCallback håndterer flytninger mellem dokumenter.

Dernæst indkapsler vi stile og opmærkning med Shadow DOM.

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 59
Lektioner: 200

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Lifecycle-callbacks” gratis?

Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Lifecycle-callbacks”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Lifecycle-callbacks”?

Kobl dig på ændringer i connected, disconnected og attributter. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på JavaScript Academy?

Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.

Hvor lang tid tager lektionen “Lifecycle-callbacks”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?

Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til JavaScript Academy