JavaScript Academy · Ders

Yaşam Döngüsü Geri Çağrıları

Bağlanma, bağlantının kesilmesi ve öznitelik değişikliklerine bağlanın.

Yaşam Döngüsü Geri Çağrıları, CoddyKit'te ücretsiz bir JavaScript 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, JavaScript Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. JavaScript Academy kursu toplamda 4 dersten oluşur.

Öğenin Yaşam Döngüsü

Özel öğelerin belirlenmiş bir yaşam döngüsü vardır. Tarayıcı, önemli anlarda sınıfınızdaki özel yöntemleri çağırır:

connectedCallback — DOM'a eklenir
disconnectedCallback — DOM'dan kaldırılır
attributeChangedCallback — izlenen bir öznitelik değişir
adoptedCallback — yeni bir belgeye taşınır

connectedCallback

connectedCallback, öğe belgeye her eklendiğinde çalışır. İçeriği render etmek, veri almak veya genel dinleyiciler eklemek için ideal yerdir.

Öğe taşınırsa bu işlev birden çok kez tetiklenebilir.

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

disconnectedCallback

disconnectedCallback, öğe DOM'dan kaldırıldığında çalışır. Temizleme yapmak için kullanın: genel dinleyicileri kaldırın, zamanlayıcıları iptal edin veya bellek sızıntılarını önlemek için bağlantıları kapatın.

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

Öznitelikleri İzleme

Öznitelik değişikliklerine tepki vermek için hangi özniteliklerin izleneceğini, adlardan oluşan bir dizi döndüren statik observedAttributes getiricisiyle bildirmelisiniz.

Yalnızca listelenen öznitelikler attributeChangedCallback işlevini tetikler.

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

attributeChangedCallback

İzlenen bir öznitelik eklendiğinde, kaldırıldığında veya değiştirildiğinde tarayıcı attributeChangedCallback(name, oldValue, newValue) işlevini çağırır. Oluşturduğunuz çıktıyı özniteliklerle eş zamanlı tutmak için bunu kullanın.

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

Geri Çağırma İşlevi Bağımsız Değişkenleri

attributeChangedCallback üç bağımsız değişken alır:

name — hangi özniteliğin değiştiği
oldValue — önceki değer (yeni eklendiyse null)
newValue — yeni değer (kaldırıldıysa null)

Gereksiz işlemleri atlamak için eski ve yeni değerleri karşılaştırın.

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

Başlangıç Öznitelik Çağrıları

Bir öğe yükseltilirken zaten izlenen bir özniteliğe sahipse, attributeChangedCallback işlevi connectedCallback işlevinden önce her öznitelik için bir kez çalışır. Bu, işaretlemeden otomatik olarak başlangıç değerleri oluşturmanızı sağlar.

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

Özellikleri Özniteliklere Yansıtma

Yaygın bir yaklaşım, özniteliği okuyup yazan bir JavaScript özelliği sunmaktır. Bu, eşzamanlılığı korurken API'yi kullanışlı tutar.

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, bir öğe bir belgeden diğerine taşındığında çalışır (örneğin document.adoptNode aracılığıyla bir iframe içine). Nadiren gerekir, ancak yaşam döngüsünü tamamlar.

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

Yaşam Döngüsü Sırası

Doğrudan HTML'e yazılmış bir öğe için tipik sıra şöyledir:

constructor
attributeChangedCallback (mevcut her izlenen öznitelik için bir kez)
connectedCallback

Daha sonra öğe kaldırıldığında disconnectedCallback çalışır.

Hepsini Bir Araya Getirme

Eksiksiz bir öğe tüm parçaları birbirine bağlar: öznitelikleri izler, bağlandığında render eder, öznitelik değiştiğinde eşitler ve bağlantı kesildiğinde temizler.

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

Hızlı Kontrol

Yaşam döngüsü geri çağırma işlevleri hakkındaki bilginizi sınayın.

Özet

Özel öğelerin yaşam döngüsünü öğrendiniz:

connectedCallback ekleme sırasında çalışır — burada render edin.
disconnectedCallback kaldırma sırasında çalışır — temizliği burada yapın.
observedAttributes, hangi özniteliklerin izleneceğini bildirir.
attributeChangedCallback(name, old, new) değişikliklere tepki verir.
adoptedCallback, belgeler arasındaki taşımaları yönetir.

Sırada, stilleri ve işaretlemeyi Gölge DOM ile kapsülleyeceğiz.

Sıkça Sorulan Sorular

“Yaşam Döngüsü Geri Çağrıları” dersi ücretsiz mi?

Evet — “Yaşam Döngüsü Geri Çağrıları” 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 JavaScript Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. JavaScript Academy kursu toplamda 4 dersten oluşur.

“Yaşam Döngüsü Geri Çağrıları” dersinde ne öğreneceğim?

Bağlanma, bağlantının kesilmesi ve öznitelik değişikliklerine bağlanın. JavaScript 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.

JavaScript Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te JavaScript 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.

“Yaşam Döngüsü Geri Çağrıları” 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 JavaScript Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her JavaScript 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

← JavaScript Academy Sayfasına Dön