İzlenen Öznitelikler ve attributeChangedCallback
Özel öğelerdeki HTML öznitelik değişikliklerine tepki verin
İzlenen Öznitelikler ve attributeChangedCallback, CoddyKit'te ücretsiz bir HTML Academy dersidir. Bu, 4 dersinin 3. 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.
Öznitelik Değişikliklerine Tepki Verme
HTML öğeleri durumlarını öznitelikler aracılığıyla dışa sunar. <my-card name="A"> öğesi name="B" olduğunda değişikliği algılamak için izlenen öznitelikler listesini bildirin ve sınıf üzerinde attributeChangedCallback uygulayın.
Statik observedAttributes
İlgilendiğiniz öznitelikleri statik bir alıcı aracılığıyla bildirin: static get observedAttributes() { return ["name", "open"]; }. Yalnızca bu listedeki öznitelikler geri çağırmayı tetikler; diğerleri performans için yok sayılır.
class MyCard extends HTMLElement {
static get observedAttributes() { return ["name", "open"]; }
}Geri Çağırmanın İmzası
attributeChangedCallback(name, oldValue, newValue), izlenen her öznitelik değişikliğinde çalışır. Üç parametrenin tümü dizgedir; öznitelik yoksa boş değer olabilir. İç durumu güncellemek ve yeniden görüntü oluşturmak için bunları kullanın.
attributeChangedCallback(name, oldValue, newValue) {
if (oldValue === newValue) return;
if (name === "name") this.render();
if (name === "open") this.toggle(newValue !== null);
}İlk Öznitelikler İçin de Çalışır
Geri çağırma, öğe yükseltildiğinde mevcut olan izlenen her öznitelik için bir kez çalışır. Böylece attributeChangedCallback içindeki bir render, connectedCallback içinde ayrı bir yol gerektirmeden hem ilk hem de sonraki görüntülemeleri yönetebilir.
Özellik-Öznitelik Yansıtması
Boole öznitelikleri için özelliği özniteliğe, özniteliği de özelliğe yansıtın: element.open = true ayarı open özniteliğini oluşturmalı, özniteliğin kaldırılması da özelliği temizlemelidir. Bu, yerleşik öğelerin davranışıyla uyumludur.
get open() { return this.hasAttribute("open"); }
set open(value) {
if (value) this.setAttribute("open", "");
else this.removeAttribute("open");
}Sonsuz Döngülerden Kaçının
attributeChangedCallback izlediği öznitelikleri ayarlarsa sonsuz bir döngüye girebilirsiniz. Geri çağırmanın en başında her zaman if (oldValue === newValue) return; korumasını kullanın ve izlenen öznitelikleri geri çağırmanın içinden değiştirmekten kaçının.
Boole Öznitelikleri
HTML kuralına göre boole öznitelikleri varlıklarıyla "ayarlanır" (disabled, open) ve yokluklarıyla "kapatılır". Değerleri dikkate alınmaz; disabled="false" bile devre dışı bırakılmış anlamına gelir. Varlığı hasAttribute ile kontrol edin, dizgeyi asla karşılaştırmayın.
Özniteliklerde JSON
Öznitelikler dizgedir. Yapılandırılmış veri aktarmak için işaretleme içinde JSON.stringify ile dizgeleştirin ve attributeChangedCallback içinde ayrıştırın: <my-chart data-points='[1,2,3]'>. Büyük veri yükleri için veriyi doğrudan özellik atamasıyla aktarmayı tercih edin.
MutationObserver ile Karşılaştırma
Öznitelik değişikliklerini bir MutationObserver ile izleyebilirsiniz; ancak observedAttributes ve attributeChangedCallback daha hızlıdır (gözlemleyici kurulumu gerektirmez), bildirimseldir (izlenen adlar sınıf üzerinde görünür) ve web bileşenleri için yerleşik kullanımdır.
Performans: Görüntülemeleri Birleştirme
Birkaç öznitelik art arda hızla değişirse birkaç geri çağırma ve birkaç görüntüleme tetiklenir. Gerçek görüntü oluşturma işlemini, kaç öznitelik değişmiş olursa olsun her mikro görevde veya animasyon karesinde bir kez çalıştırmak için queueMicrotask ya da requestAnimationFrame ile bunları birleştirin.
Yaygın Hata
Bir özniteliği observedAttributes listesine eklemeyi unutmak, o öznitelik için geri çağırmayı sessizce devre dışı bırakır. Bileşeniniz bir setAttribute çağrısına tepki vermiyorsa ilk kontrol etmeniz gereken yer statik observedAttributes listesidir.
Bilgi Kontrolü
Geri çağırmanın içinde izlenen bir özniteliği ayarlayarak attributeChangedCallback'i dolaylı biçimde çağırırsanız ne olur?
Özet
İzlenecek öznitelikleri statik observedAttributes alıcısı aracılığıyla bildirin; attributeChangedCallback(name, oldValue, newValue), ilk ayrıştırma da dâhil olmak üzere her değişiklikte çalışır. Boole durumlarında özellikleri özniteliklere yansıtın, sonsuz döngülere karşı koruma ekleyin ve performans için görüntülemeleri requestAnimationFrame ile birleştirin.
Sıkça Sorulan Sorular
“İzlenen Öznitelikler ve attributeChangedCallback” dersi ücretsiz mi?
Evet — “İzlenen Öznitelikler ve attributeChangedCallback” 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.
“İzlenen Öznitelikler ve attributeChangedCallback” dersinde ne öğreneceğim?
Özel öğelerdeki HTML öznitelik değişikliklerine tepki verin 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 3. dersidir.
“İzlenen Öznitelikler ve attributeChangedCallback” 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