Özet - İleri DOM

JavaScript kursu · İleri seviye · Ders 95/100

IntersectionObserver ve custom elements ile lazy yüklenen bir resim bileşeni yazarsın.

Özet - İleri DOM

Bu grupta dört modern DOM API'sini öğrendin:

MutationObserver: DOM düğüm ve öznitelik değişikliklerini izler
IntersectionObserver: öğenin görüntü alanıyla kesişimini bildirir
ResizeObserver: öğe boyutu değişince haber verir
Custom elements ve Shadow DOM: kendi etiketlerini ve yalıtılmış bileşenlerini oluşturursun

Hepsi callback tabanlıdır ve observe ile başlayıp disconnect ile biter. Shadow DOM ise attachShadow ile başlar.

Uygulama Tembel yükleyici: görünüce bırak

Bir IntersectionObserver oluştur. Callback entries alır; her entry için isIntersecting doğruysa konsola yaz ve observer.unobserve ile o öğeyi izlemeyi bırak. Eşik 0 olsun.

Örnek çözümü göster

1. new IntersectionObserver((entries) => {...}) ile oluştur.
2. Her entry için isIntersecting doğruysa konsola yaz ve observer.unobserve(entry.target) çağır.
3. { threshold: 0 } ayarla.

Örnek çözüm:
const observer = new IntersectionObserver((entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log('yüklendi');
      observer.unobserve(entry.target);
    }
  }
}, { threshold: 0 });

İyi alışkanlıklar

Bu API'leri kullanırken birkaç noktaya dikkat et:

İşin bitince her zaman disconnect çağır; bellek sızıntısını önler.
Birden çok öğe için tek bir observer kullan; her öğe için yenisini oluşturma.
Callback içinde ağır iş yapma; yalnızca DOM'u güncelle.
Shadow DOM'da stilleri :host seçicisiyle bileşene bağla.

Bu alışkanlıklar büyük uygulamalarda fark yaratır.

Uygulama Custom element içinde shadow DOM

my-card adlı bir custom element tanımla. Sınıf HTMLElement'i genişletsin. connectedCallback içinde this.attachShadow ile open modunda bir shadow root ekle. Son olarak customElements.define ile kaydet.

Örnek çözümü göster

1. HTMLElement'i genişleten MyCard sınıfını yaz.
2. connectedCallback içinde this.attachShadow({ mode: 'open' }) ile shadow root ekle.
3. customElements.define ile 'my-card' adıyla kaydet.

Örnek çözüm:
class MyCard extends HTMLElement {
  connectedCallback() {
    const root = this.attachShadow({ mode: 'open' });
    root.innerHTML = '<p>Merhaba</p>';
  }
}
customElements.define('my-card', MyCard);

Kendini test et

API'leri kullanım alanıyla eşleştir

MutationObserver

Düğüm eklenmesi
IntersectionObserver

Görüntü alanına giriş
ResizeObserver

Boyut değişimi
Shadow DOM

Stil yalıtımı
Bir observer'ı durdurmak için hangi metod çağrılır?
- disconnect
- observe
- stop
- remove
Cevabı göster

disconnect — Doğru. disconnect, gözlemi durdurur ve belleği serbest bırakır.

İleri seviye bölümündeki tüm dersler

Özet - İleri DOM