connectedCallback ve disconnectedCallback
Özel bir öğe DOM'a eklendiğinde veya DOM'dan kaldırıldığında kod çalıştırın
connectedCallback ve disconnectedCallback, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 2. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, HTML Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. HTML Academy kursu toplamda 4 dersten oluşur.
Öğe Yaşam Döngüsü Geri Çağırmaları
Özel öğeler dört yaşam döngüsü kancası sunar: connectedCallback, disconnectedCallback, attributeChangedCallback ve adoptedCallback. Bunlar, her bileşen modelindeki iyi bilinen bağlama, ayırma ve güncelleme noktalarını yansıtır.
connectedCallback Eklendiğinde Çalışır
connectedCallback, öğe DOM ağacına her eklendiğinde çalışır. Öznitelikleri okumak, içeriği oluşturmak, olay dinleyicileri eklemek ve zamanlayıcıları ya da abonelikleri başlatmak için doğru yer burasıdır.
class Timer extends HTMLElement {
connectedCallback() {
this.start = Date.now();
this.interval = setInterval(() => this.render(), 1000);
this.render();
}
render() {
this.textContent = Math.floor((Date.now() - this.start) / 1000) + "s";
}
}Birden Fazla Kez Çalışabilir
Öğe kaldırılıp yeniden eklenirse, her eklemede connectedCallback yeniden çalışır. İdempotentlik önemlidir — yalnızca bir kez yapılması gereken başlatmayı bir bayrakla koruyun veya her seferinde kurulumu eksiksiz yapıp sökme işlemini disconnectedCallback içinde gerçekleştirin.
Kaldırıldığında Çalışan disconnectedCallback
disconnectedCallback, öğe DOM'dan kaldırıldığında çalışır. Aralık zamanlayıcılarını durdurmak, veri isteklerini iptal etmek, belge düzeyindeki dinleyicileri kaldırmak ve aksi hâlde sızıntıya yol açacak kaynakları serbest bırakmak için doğru yer burasıdır.
disconnectedCallback() {
clearInterval(this.interval);
window.removeEventListener("resize", this.onResize);
}Çöp Toplama ve Dinleyiciler
Etkin bir aralık zamanlayıcısı, belge dinleyicisi veya çözülmemiş bir vaat taşıyan öğe, bağlantısı kesildikten sonra bile çöp toplayıcı tarafından temizlenmez. connectedCallback içinde oluşturduğunuz her aboneliği disconnectedCallback içinde temizleme işlemiyle mutlaka eşleştirin.
Taşındıktan Sonra Yeniden Bağlanma
parentB.appendChild(element) ile bir öğeyi taşımak, önce onu ilk üst öğesinden kaldırır, ardından ikinci üst öğeye ekler. Tarayıcı önce disconnectedCallback'i, sonra connectedCallback'i çalıştırır. Taşıma sırasında geçici sökme ve kurulum işlemlerinin gerçekleşebileceğini hesaba katın.
İlk Bağlantının Zamanlaması
HTML içine doğrudan yazılmış bir öğe için connectedCallback, kurucudan sonra ilk ayrıştırma sırasında çalışır. Bu noktada öznitelikler zaten ayrıştırılmıştır; dolayısıyla burada this.getAttribute("name") çağrısı işaretlemedeki değeri döndürür.
Alt Öğeler Henüz Ayrıştırılmamış Olabilir
Alt öğeleri HTML içinde tanımlanmış bir öğe için connectedCallback çalıştığında alt öğeler henüz DOM'da olmayabilir; çünkü ayrıştırıcı hâlâ çalışıyor olabilir. Tanımlanmış alt öğelere erişmeniz gerekiyorsa bir MutationObserver kullanın veya alt öğeleri requestAnimationFrame içinde okuyun.
adoptedCallback
adoptedCallback, bir öğe yeni bir belgeye taşındığında (genellikle document.adoptNode aracılığıyla) çalışır. Çoğu uygulama bunu hiç kullanmaz; esas olarak çerçeveler arasında taşınan bileşenler için önemlidir.
AbortController ile Birlikte Kullanım
Temiz bir yaklaşım şudur: connectedCallback içinde bir AbortController oluşturun, her addEventListener ve fetch çağrısına { signal: this.controller.signal } aktarın, ardından hepsini aynı anda kaldırmak için disconnectedCallback içinde this.controller.abort() çağrısını yapın.
Kurucuda Ağır İşlerden Kaçının
Kurucu, öğe document.createElement ile oluşturulup hiç eklenmediğinde bile çalışır. Kurucuyu başlangıç özelliklerini ayarlamakla sınırlayın; görüntü oluşturmayı, veri çekmeyi ve dinleyicileri bağlamayı connectedCallback'e bırakın.
Bilgi Kontrolü
Abonelikler ve zamanlayıcılar neden öğenin kurucusunda değil de connectedCallback içinde kurulmalıdır?
Özet
connectedCallback (ekleme) ve disconnectedCallback (kaldırma), öğenin etkin yaşam süresinin başlangıcını ve bitişini belirler. Sızıntıları önlemek için dinleyicileri, aralık zamanlayıcılarını ve veri isteklerini connectedCallback içinde kurun; disconnectedCallback içinde kaldırın. İkisi de birden çok kez çalışabilir — temiz ve toplu kaldırma için AbortController kullanın.
Sıkça Sorulan Sorular
“connectedCallback ve disconnectedCallback” dersi ücretsiz mi?
Evet — “connectedCallback ve disconnectedCallback” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve HTML Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. HTML Academy kursu toplamda 4 dersten oluşur.
“connectedCallback ve disconnectedCallback” dersinde ne öğreneceğim?
Özel bir öğe DOM'a eklendiğinde veya DOM'dan kaldırıldığında kod çalıştırın HTML Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
HTML Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te HTML Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 2. dersidir.
“connectedCallback ve disconnectedCallback” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu HTML Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her HTML Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- customElements.define ile Öğeleri Tanımlama
- connectedCallback ve disconnectedCallback
- İzlenen Öznitelikler ve attributeChangedCallback
- Yerleşik Öğeleri Genişletme