JavaScript Academy · leksjon

Livssykluskall

Koble deg til endringer ved tilkobling, frakobling og attributter.

Leksjon 2 av 413 trinn

Livssykluskall er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Elementets livssyklus

Egendefinerte elementer har en definert livssyklus. Nettleseren kaller spesielle metoder på klassen din på bestemte tidspunkter:

connectedCallback — lagt til i DOM-en
disconnectedCallback — fjernet fra DOM-en
attributeChangedCallback — et observert attributt endres
adoptedCallback — flyttet til et nytt dokument

connectedCallback

connectedCallback kjører hver gang elementet settes inn i dokumentet. Dette er det ideelle stedet for å gjengi innhold, hente data eller koble til globale lyttere.

Den kan utløses flere ganger 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 kjører når elementet fjernes fra DOM-en. Bruk den til opprydding: fjern globale lyttere, avbryt tidtakere eller lukk tilkoblinger for å unngå minnelekkasjer.

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

Observere attributter

For å reagere på endringer i attributter må du erklære hvilke attributter som skal overvåkes, med en statisk observedAttributes-getter som returnerer en matrise med navn.

Bare attributter som er oppført, utløser attributeChangedCallback.

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

attributeChangedCallback

Når et observert attributt legges til, fjernes eller endres, kaller nettleseren attributeChangedCallback(name, oldValue, newValue). Bruk den til å holde det gjengitte innholdet synkronisert med attributtene.

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

Callback-argumenter

attributeChangedCallback mottar tre argumenter:

name — hvilket attributt som ble endret
oldValue — den forrige verdien (null hvis attributtet nettopp ble lagt til)
newValue — den nye verdien (null hvis attributtet ble fjernet)

Sammenlign den gamle og den nye verdien for å hoppe over unødvendig arbeid.

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

Innledende attributtkall

Hvis et element allerede har et observert attributt når det oppgraderes, utløses attributeChangedCallback én gang for hvert attributt før connectedCallback. Dette gjør at du automatisk kan initialisere fra oppmerkingen.

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

Reflektere egenskaper til attributter

Et vanlig mønster er å eksponere en JavaScript-egenskap som leser og skriver attributtet. Dette gjør API-et enkelt å bruke, samtidig som det holdes synkronisert.

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 kjører når et element flyttes fra ett dokument til et annet (for eksempel inn i en iframe via document.adoptNode). Den trengs sjelden, men fullfører livssyklusen.

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

Livssyklusens rekkefølge

For et element som er skrevet direkte i HTML, er den typiske rekkefølgen:

constructor
attributeChangedCallback (én gang per observert attributt som finnes)
connectedCallback

Senere, når elementet fjernes, kjører disconnectedCallback.

Sette det hele sammen

Et komplett element kobler sammen alle delene: observer attributter, gjengi ved tilkobling, synkroniser ved attributtendringer og rydd opp ved frakobling.

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

Kort sjekk

Test kunnskapen din om livssyklus-callbacks.

Besvar den i den interaktive leksjonen

Oppsummering

Du har lært livssyklusen til egendefinerte elementer:

connectedCallback kjører når elementet settes inn — gjengi innhold her.
disconnectedCallback kjører når elementet fjernes — rydd opp her.
observedAttributes erklærer hvilke attributter som skal overvåkes.
attributeChangedCallback(name, old, new) reagerer på endringer.
adoptedCallback håndterer flytting mellom dokumenter.

Deretter skal vi kapsle inn stiler og oppmerking med Shadow DOM.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 59
Leksjoner: 200

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Livssykluskall» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Livssykluskall», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Livssykluskall»?

Koble deg til endringer ved tilkobling, frakobling og attributter. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med JavaScript Academy?

Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Livssykluskall»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?

Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til JavaScript Academy