JavaScript Academy · Lekcja

Callbacki cyklu życia

Proszę reagować na dołączanie, odłączanie i zmiany atrybutów.

Callbacki cyklu życia to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Cykl życia elementu

Elementy niestandardowe mają określony cykl życia. W kluczowych momentach przeglądarka wywołuje specjalne metody w klasie:

connectedCallback — dodanie do DOM
disconnectedCallback — usunięcie z DOM
attributeChangedCallback — zmiana obserwowanego atrybutu
adoptedCallback — przeniesienie do nowego dokumentu

connectedCallback

connectedCallback jest wykonywana za każdym razem, gdy element zostaje wstawiony do dokumentu. To idealne miejsce na renderowanie zawartości, pobieranie danych lub dołączanie globalnych nasłuchiwaczy.

Może zostać wywołana wiele razy, jeśli element jest przenoszony.

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

disconnectedCallback

disconnectedCallback jest wykonywana, gdy element zostaje usunięty z DOM. Należy używać jej do sprzątania: usuwać globalne nasłuchiwacze, anulować zegary lub zamykać połączenia, aby uniknąć wycieków pamięci.

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

Obserwowanie atrybutów

Aby reagować na zmiany atrybutów, należy zadeklarować obserwowane atrybuty za pomocą statycznego gettera observedAttributes, który zwraca tablicę nazw.

Tylko wymienione atrybuty wywołują attributeChangedCallback.

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

attributeChangedCallback

Gdy obserwowany atrybut zostanie dodany, usunięty lub zmieniony, przeglądarka wywołuje attributeChangedCallback(name, oldValue, newValue). Należy używać tej metody, aby zachować zgodność renderowanej zawartości z atrybutami.

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

Argumenty callbacku

attributeChangedCallback otrzymuje trzy argumenty:

name — atrybut, który się zmienił
oldValue — poprzednia wartość (null, jeśli atrybut został dopiero dodany)
newValue — nowa wartość (null, jeśli atrybut został usunięty)

Porównuj stare i nowe wartości, aby pomijać niepotrzebne operacje.

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

Początkowe wywołania dla atrybutów

Jeśli element ma już obserwowany atrybut w chwili uaktywnienia, attributeChangedCallback zostaje wywołana raz dla każdego takiego atrybutu, przed connectedCallback. Dzięki temu można automatycznie zainicjować element na podstawie znaczników.

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

Odzwierciedlanie właściwości w atrybutach

Typowym wzorcem jest udostępnienie właściwości JavaScript, która odczytuje atrybut i zapisuje do niego wartość. Dzięki temu interfejs API jest wygodny, a właściwość pozostaje zsynchronizowana z atrybutem.

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 jest wykonywana, gdy element zostaje przeniesiony z jednego dokumentu do innego (na przykład do elementu iframe za pomocą document.adoptNode). Jest rzadko potrzebna, ale uzupełnia cykl życia.

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

Kolejność cyklu życia

W przypadku elementu umieszczonego bezpośrednio w HTML typowa kolejność jest następująca:

constructor
attributeChangedCallback (raz dla każdego obecnego obserwowanego atrybutu)
connectedCallback

Później, podczas usuwania, wywoływana jest funkcja disconnectedCallback.

Połączenie wszystkiego

Kompletny element łączy wszystkie elementy w całość: obserwuje atrybuty, renderuje podczas podłączania, synchronizuje się przy zmianie atrybutu i sprząta podczas odłączania.

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

Szybkie sprawdzenie

Sprawdź swoją wiedzę na temat callbacków cyklu życia.

Podsumowanie

Poznałeś cykl życia elementu niestandardowego:

connectedCallback jest wykonywana podczas wstawiania — to tutaj należy renderować zawartość.
disconnectedCallback jest wykonywana podczas usuwania — to tutaj należy sprzątać.
observedAttributes określa, które atrybuty należy obserwować.
attributeChangedCallback(name, old, new) reaguje na zmiany.
adoptedCallback obsługuje przenoszenie między dokumentami.

Następnie hermetyzujemy style i znaczniki za pomocą Shadow DOM.

Często zadawane pytania

Czy lekcja „Callbacki cyklu życia” jest bezpłatna?

Tak — pełny tekst „Callbacki cyklu życia” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Callbacki cyklu życia”?

Proszę reagować na dołączanie, odłączanie i zmiany atrybutów. Ćwiczysz JavaScript Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć JavaScript Academy?

Nie wymagamy żadnego doświadczenia. JavaScript Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „Callbacki cyklu życia”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji JavaScript Academy?

Tak. Każda lekcja JavaScript Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do JavaScript Academy