JavaScript Academy · Lektion

Livscykel-callbacks

Koppla in dig på ändringar i connected, disconnected och attribut.

Lektion 2 av 413 steg

Livscykel-callbacks är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Elementets livscykel

Anpassade element har en definierad livscykel. Webbläsaren anropar särskilda metoder i Er klass vid viktiga tidpunkter:

connectedCallback — läggs till i DOM
disconnectedCallback — tas bort från DOM
attributeChangedCallback — ett observerat attribut ändras
adoptedCallback — flyttas till ett nytt dokument

connectedCallback

connectedCallback körs varje gång elementet infogas i dokumentet. Det är den idealiska platsen för att rendera innehåll, hämta data eller lägga till globala lyssnare.

Det kan köras flera gånger om elementet flyttas runt.

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

disconnectedCallback

disconnectedCallback körs när elementet tas bort från DOM. Använd det för att städa upp: ta bort globala lyssnare, avbryt tidsgränser eller stäng anslutningar för att undvika minnesläckor.

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

Observera attribut

För att reagera på attributändringar måste Ni deklarera vilka attribut som ska övervakas med en statisk getter för observedAttributes som returnerar en array med namn.

Endast angivna attribut utlöser attributeChangedCallback.

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

attributeChangedCallback

När ett observerat attribut läggs till, tas bort eller ändras anropar webbläsaren attributeChangedCallback(name, oldValue, newValue). Använd det för att hålla det renderade innehållet synkroniserat med attributen.

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-argument

attributeChangedCallback tar emot tre argument:

name — vilket attribut som ändrades
oldValue — föregående värde (null om det just lades till)
newValue — det nya värdet (null om det togs bort)

Jämför det gamla och det nya värdet för att undvika onödigt arbete.

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

Initiala attributanrop

Om ett element redan har ett observerat attribut när det uppgraderas körs attributeChangedCallback en gång för varje sådant attribut, före connectedCallback. På så sätt kan Ni automatiskt initiera elementet från uppmärkningen.

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

Reflektera egenskaper till attribut

Ett vanligt mönster är att exponera en JavaScript-egenskap som läser och skriver attributet. På så sätt förblir API:t lättanvänt samtidigt som det hålls synkroniserat.

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örs när ett element flyttas från ett dokument till ett annat, till exempel till en iframe via document.adoptNode. Det behövs sällan, men kompletterar livscykeln.

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

Livscykelns ordning

För ett element som deklareras direkt i HTML är den typiska ordningen:

constructor
attributeChangedCallback (en gång per närvarande observerat attribut)
connectedCallback

Senare, när elementet tas bort, körs disconnectedCallback.

Sätt ihop delarna

Ett komplett element kopplar ihop alla delar: observerar attribut, renderar vid anslutning, synkroniserar vid attributändringar och städar upp vid frånkoppling.

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

Snabbtest

Testa Era kunskaper om livscykelns callbacks.

Besvara frågan i den interaktiva lektionen

Sammanfattning

Ni har lärt Er hur anpassade elements livscykel fungerar:

connectedCallback körs vid infogning — rendera här.
disconnectedCallback körs vid borttagning — städa upp här.
observedAttributes anger vilka attribut som ska övervakas.
attributeChangedCallback(name, old, new) reagerar på ändringar.
adoptedCallback hanterar flytt mellan dokument.

Nästa steg är att kapsla in stilar och uppmärkning med Shadow DOM.

Gratis att börja

Lär dig JavaScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 59
Lektioner: 200

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Livscykel-callbacks” gratis?

Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Livscykel-callbacks”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Livscykel-callbacks”?

Koppla in dig på ändringar i connected, disconnected och attribut. Ni övar på JavaScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig JavaScript Academy?

Du behöver inga förkunskaper. Utbildningen i JavaScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Livscykel-callbacks”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här JavaScript Academy-lektionen?

Ja. Varje JavaScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till JavaScript Academy