Tarkkailtavat attribuutit ja attributeChangedCallback
Reagoi HTML-attribuuttien muutoksiin mukautetuissa elementeissä
Tarkkailtavat attribuutit ja attributeChangedCallback on ilmainen HTML Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 HTML Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Reagointi attribuuttien muutoksiin
HTML-elementit paljastavat tilansa attribuuttien kautta. Jotta voitte reagoida, kun <my-card name="A"> muuttuu muotoon name="B", ilmoittakaa seurattavien attribuuttien luettelo ja toteuttakaa attributeChangedCallback luokassa.
Staattinen observedAttributes
Ilmoittakaa kiinnostavat attribuutit staattisella getterillä: static get observedAttributes() { return ["name", "open"]; }. Vain tämän luettelon attribuutit käynnistävät takaisinkutsun – muut ohitetaan suorituskyvyn vuoksi.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}Takaisinkutsun allekirjoitus
attributeChangedCallback(name, oldValue, newValue) suoritetaan jokaisen seurattavan attribuutin muutoksen yhteydessä. Kaikki kolme parametria ovat merkkijonoja (tai null, jos attribuutti puuttuu). Käyttäkää niitä sisäisen tilan päivittämiseen ja uudelleenrenderöintiin.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}Suoritetaan myös alussa määritetyille attribuuteille
Takaisinkutsu suoritetaan kerran jokaiselle seurattavalle attribuutille, joka on olemassa, kun elementti päivitetään mukautetuksi elementiksi. Tämän ansiosta attributeChangedCallbackissa tehtävä renderöinti käsittelee sekä ensimmäisen että myöhemmät renderöinnit ilman erillistä käsittelyhaaraa connectedCallbackissa.
Ominaisuuksien ja attribuuttien peilaus
Peilatkaa totuusarvoattribuuttien ominaisuus attribuuttiin ja päinvastoin: asetuksen element.open = true pitäisi asettaa open-attribuutti, ja attribuutin poistamisen pitäisi tyhjentää ominaisuus. Tämä vastaa sisäänrakennettujen elementtien, kuten <details>, toimintaa.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Välttäkää äärettömiä silmukoita
Jos attributeChangedCallback asettaa attribuutteja, joita se seuraa, voitte joutua äärettömään silmukkaan. Suojatkaa takaisinkutsu aina alussa koodilla if (oldValue === newValue) return; ja välttäkää seurattavien attribuuttien muuttamista sen sisällä.
Totuusarvoattribuutit
HTML-käytännön mukaan totuusarvoattribuutit asetetaan läsnäololla (disabled, open) ja poistetaan puuttumisella. Niiden arvo ohitetaan – disabled="false" tarkoittaa silti, että elementti on poistettu käytöstä. Tarkistakaa läsnäolo hasAttribute-kutsulla, älkää koskaan verratko merkkijonoa.
JSON attribuuteissa
Attribuutit ovat merkkijonoja. Välittääksenne rakenteista dataa muodostakaa JSON.stringifylla arvo merkinnässä ja jäsentäkää se attributeChangedCallbackissa: <my-chart data-points='[1,2,3]'>. Suurten tietomäärien tapauksessa välittäkää data mieluummin JS-ominaisuuden asetuksena.
MutationObserveriin verrattuna
Voisitte tarkkailla attribuuttien muutoksia MutationObserverilla, mutta observedAttributes ja attributeChangedCallback ovat nopeampia (Observerin asetuksia ei tarvita), deklaratiivisia (seurattavien nimien luettelo näkyy luokassa) ja web-komponenttien idiomin mukaisia.
Suorituskyky: yhdistäkää renderöinnit
Useat nopeasti peräkkäiset attribuuttimuutokset käynnistävät useita takaisinkutsuja ja renderöintejä. Yhdistäkää ne queueMicrotask- tai requestAnimationFrame-kutsulla niin, että varsinainen renderöinti suoritetaan kerran mikrotaskia tai kehystä kohden riippumatta muutettujen attribuuttien määrästä.
Yleinen sudenkuoppa
Jos attribuuttia ei lisätä observedAttributes-luetteloon, takaisinkutsu poistuu hiljaisesti käytöstä kyseisen attribuutin osalta. Jos komponenttinne ei reagoi setAttribute-kutsuun, tarkistakaa ensimmäiseksi staattinen observedAttributes-luettelo.
Tietojen tarkistus
Mitä tapahtuu, jos kutsutte attributeChangedCallbackia epäsuorasti asettamalla seurattavan attribuutin takaisinkutsun sisällä?
Yhteenveto
Ilmoittakaa seurattavat attribuutit staattisella observedAttributes-getterillä; attributeChangedCallback(name, oldValue, newValue) suoritetaan jokaisen muutoksen yhteydessä, myös alkujäsennyksen aikana. Peilatkaa ominaisuudet attribuutteihin totuusarvotilan yhteydessä, estäkää äärettömät silmukat ja yhdistäkää renderöinnit requestAnimationFramella suorituskyvyn parantamiseksi.
Opi HTML 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
- 40
- Oppitunnit
- 159
Usein kysytyt kysymykset
Onko oppitunti ”Tarkkailtavat attribuutit ja attributeChangedCallback” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa HTML Academy-oppimispolun 3 oppituntia, myös oppitunnin “Tarkkailtavat attribuutit ja attributeChangedCallback”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. HTML Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Tarkkailtavat attribuutit ja attributeChangedCallback”?
Reagoi HTML-attribuuttien muutoksiin mukautetuissa elementeissä Harjoittelet HTML Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni HTML Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin HTML Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.
Kuinka kauan ”Tarkkailtavat attribuutit ja attributeChangedCallback”-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ä HTML Academy-oppitunnilla?
Kyllä. Jokainen HTML 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
- Elementtien määrittäminen customElements.definellä
- connectedCallback ja disconnectedCallback
- Tarkkailtavat attribuutit ja attributeChangedCallback
- Sisäänrakennettujen elementtien laajentaminen