ResizeObserver
Bir öğenin boyut değişikliklerini gözlemlemeyi öğrenirsin.
ResizeObserver
ResizeObserver bir öğenin boyutlarının ne zaman değiştiğini bildirir. Eskiden window.addEventListener('resize', ...) kullanılırdı; ama bu yalnızca pencere boyutu değişince çalışır, bir öğenin kendisi küçüldüğünde değil. ResizeObserver her öğeyi ayrı ayrı izler.
new ResizeObserver(callback) ile oluşturursun. Callback bir entries dizisi alır; her kayıtta contentRect veya borderBoxSize bulunur. Bir öğeyi observe ile eklersin.
contentRect ve borderBoxSize
Callback her öğe için bir ResizeObserverEntry alır. İçindeki iki temel alan:
contentRect: içerik kutusunun konumu ve boyutu;widthveheighten çok kullanılanlarıborderBoxSize: kenarlık dahil boyut; yeni tarayıcılarda dizi gelir
Eski tarayıcılarda yalnız contentRect bulunur. Yeni kodlarda ikisini birlikte kullanmak iyi bir alışkanlıktır.
disconnect ile temizlik
İşin bitince observer.disconnect() çağrısı izlemeyi durdurur ve belleği serbest bırakır. Bunu yapmazsan, öğe silinse bile gözlemci ona referans tutabilir; bu da çöp toplayıcının çalışmasını engeller.
Özellikle tek sayfa uygulamalarında bileşen kalktığında disconnect çağırmak önemli bir alışkanlıktır. Aynı observer'ı birden çok öğe için kullanabilirsin; hepsini tek çağrıyla durdurursun.
Uygulama box öğesinin genişliğini izle
Bir ResizeObserver oluştur. Callback entries dizisini alır; her entry için entry.contentRect.width değerini konsola yaz. Son olarak observer.observe(box) ile izlemeye başla.
Örnek çözümü göster
1. new ResizeObserver((entries) => {...}) ile oluştur.
2. Her entry için entry.contentRect.width değerini konsola yaz.
3. observer.observe(box) ile izlemeye başla.
Örnek çözüm:
const observer = new ResizeObserver((entries) => {
for (const entry of entries) {
console.log(entry.contentRect.width);
}
});
observer.observe(box);Kendini test et
-
ResizeObserver, window resize olayına göre ne avantaj sağlar?
- Daha az kod yazmayı sağlar
- Tek tek öğelerin boyut değişimini yakalar
- Yalnızca pencereyi izler
- Hiçbir zaman tetiklenmez
Cevabı göster
Tek tek öğelerin boyut değişimini yakalar — Doğru. ResizeObserver her öğeyi ayrı izler; pencere değil öğe küçülünce de çalışır.
-
Genişliği oku
for (const entry of entries) { const w = entry.contentRect.____; }Cevabı göster
for (const entry of entries) { const w = entry.contentRect.width; } -
ResizeObserver terimlerini eşleştir
- contentRect
- İçerik kutusu boyutu
- borderBoxSize
- Kenarlık dahil boyut
- observe
- İzlemeye başla
- disconnect
- İzlemeyi durdur