JavaScript Academy · Oppitunti

Elinkaarikutsut

Kytkeytykää connected-, disconnected- ja määreemuutoksiin.

Oppitunti 2/413 vaihetta

Elinkaarikutsut on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Elementin elinkaari

Mukautetuilla elementeillä on määritetty elinkaari. Selain kutsuu luokkasi erityismetodeja tärkeissä vaiheissa:

connectedCallback — lisätään DOMiin
disconnectedCallback — poistetaan DOMista
attributeChangedCallback — tarkkailtu attribuutti muuttuu
adoptedCallback — siirretään uuteen dokumenttiin

connectedCallback

connectedCallback suoritetaan joka kerta, kun elementti lisätään dokumenttiin. Se on ihanteellinen paikka sisällön renderöintiin, tietojen hakemiseen tai globaalien tapahtumankuuntelijoiden liittämiseen.

Se voidaan suorittaa useita kertoja, jos elementtiä siirretään paikasta toiseen.

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

disconnectedCallback

disconnectedCallback suoritetaan, kun elementti poistetaan DOMista. Käytä sitä siivoamiseen: poista globaalit tapahtumankuuntelijat, peruuta ajastimet tai sulje yhteydet muistivuotojen välttämiseksi.

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

Attribuuttien tarkkailu

Jotta voit reagoida attribuuttien muutoksiin, sinun on ilmoitettava tarkkailtavat attribuutit staattisella observedAttributes-getterillä, joka palauttaa nimitaulukon.

Vain luetellut attribuutit käynnistävät attributeChangedCallback-metodin.

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

attributeChangedCallback

Kun tarkkailtu attribuutti lisätään, poistetaan tai sitä muutetaan, selain kutsuu metodia attributeChangedCallback(name, oldValue, newValue). Käytä sitä renderöidyn sisällön pitämiseen synkronoituna attribuuttien kanssa.

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

Kutsun argumentit

attributeChangedCallback saa kolme argumenttia:

name — mikä attribuutti muuttui
oldValue — edellinen arvo (null, jos attribuutti lisättiin juuri)
newValue — uusi arvo (null, jos attribuutti poistettiin)

Vertaa vanhaa ja uutta arvoa tarpeettoman työn välttämiseksi.

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

Alustavat attribuuttikutsut

Jos elementillä on tarkkailtu attribuutti jo silloin, kun se päivitetään, attributeChangedCallback suoritetaan kerran jokaiselle tällaiselle attribuutille ennen connectedCallback-metodia. Näin voit alustaa elementin automaattisesti HTML-merkkausta käyttäen.

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

Ominaisuuksien heijastaminen attribuuteiksi

Yleinen toimintamalli on tarjota JavaScript-ominaisuus, joka lukee attribuutin arvon ja kirjoittaa siihen. Näin API pysyy helppokäyttöisenä ja tiedot synkronoituna.

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 suoritetaan, kun elementti siirretään dokumentista toiseen (esimerkiksi document.adoptNode-metodilla iframe-elementtiin). Sitä tarvitaan harvoin, mutta se täydentää elinkaaren.

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

Elinkaaren järjestys

Suoraan HTML:ään kirjoitetulle elementille tyypillinen järjestys on:

constructor
attributeChangedCallback (kerran kutakin mukana olevaa tarkkailtua attribuuttia kohden)
connectedCallback

Myöhemmin elementtiä poistettaessa suoritetaan disconnectedCallback.

Kaiken kokoaminen yhteen

Täydellinen elementti yhdistää kaikki osat: tarkkailee attribuutteja, renderöi yhdistettäessä, synkronoi attribuutin muuttuessa ja siivoaa poistettaessa.

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

Pikatarkistus

Testaa, mitä tiedät elinkaarikutsuista.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opit mukautetun elementin elinkaaren:

connectedCallback suoritetaan lisättäessä — renderöi tässä metodissa.
disconnectedCallback suoritetaan poistettaessa — siivoa tässä metodissa.
observedAttributes ilmoittaa tarkkailtavat attribuutit.
attributeChangedCallback(name, old, new) reagoi muutoksiin.
adoptedCallback käsittelee siirrot dokumentista toiseen.

Seuraavaksi kapseloimme tyylit ja HTML-rakenteen Shadow DOMilla.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Elinkaarikutsut” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Elinkaarikutsut”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Elinkaarikutsut”?

Kytkeytykää connected-, disconnected- ja määreemuutoksiin. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.

Kuinka kauan ”Elinkaarikutsut”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy