JavaScript Academy · Pelajaran

Callback Siklus Hidup

Hubungkan kode ke perubahan terhubung, terputus, dan atribut.

Callback Siklus Hidup adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Siklus Hidup Elemen

Elemen khusus memiliki siklus hidup yang telah ditentukan. Peramban memanggil metode khusus pada kelas Anda pada saat-saat penting:

connectedCallback — ditambahkan ke DOM
disconnectedCallback — dihapus dari DOM
attributeChangedCallback — atribut yang diamati berubah
adoptedCallback — dipindahkan ke dokumen baru

connectedCallback

connectedCallback berjalan setiap kali elemen disisipkan ke dalam dokumen. Ini adalah tempat ideal untuk melakukan render konten, mengambil data, atau memasang pendengar global.

Callback ini dapat berjalan beberapa kali jika elemen dipindahkan.

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

disconnectedCallback

disconnectedCallback berjalan saat elemen dihapus dari DOM. Gunakan ini untuk melakukan pembersihan: hapus pendengar global, batalkan pewaktu, atau tutup koneksi agar tidak terjadi kebocoran memori.

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

Mengamati Atribut

Untuk merespons perubahan atribut, Anda harus menyatakan atribut mana yang akan dipantau dengan pengambil statis observedAttributes yang mengembalikan sebuah larik nama.

Hanya atribut yang tercantum yang memicu attributeChangedCallback.

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

attributeChangedCallback

Saat atribut yang diamati ditambahkan, dihapus, atau diubah, peramban memanggil attributeChangedCallback(name, oldValue, newValue). Gunakan ini untuk menjaga keluaran render tetap sinkron dengan atribut.

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

Argumen Panggilan Balik

attributeChangedCallback menerima tiga argumen:

name — atribut yang berubah
oldValue — nilai sebelumnya (null jika baru ditambahkan)
newValue — nilai baru (null jika dihapus)

Bandingkan nilai lama dan baru untuk melewati pekerjaan yang tidak diperlukan.

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

Pemanggilan Atribut Awal

Jika sebuah elemen sudah memiliki atribut yang diamati saat ditingkatkan, attributeChangedCallback dijalankan sekali untuk setiap atribut tersebut sebelum connectedCallback. Dengan demikian, Anda dapat secara otomatis melakukan inisialisasi dari markah.

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

Merefleksikan Properti ke Atribut

Pola yang umum adalah menyediakan properti JavaScript yang membaca dan menulis atribut. Dengan begitu, API tetap mudah digunakan sekaligus selalu sinkron.

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 berjalan saat elemen dipindahkan dari satu dokumen ke dokumen lain (misalnya, ke dalam iframe melalui document.adoptNode). Callback ini jarang diperlukan, tetapi melengkapi siklus hidup.

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

Urutan Siklus Hidup

Untuk elemen yang ditulis langsung dalam HTML, urutan biasanya adalah:

constructor
attributeChangedCallback (sekali untuk setiap atribut yang diamati dan sudah ada)
connectedCallback

Kemudian, saat elemen dihapus, disconnectedCallback dijalankan.

Menyatukan Semuanya

Elemen yang lengkap merangkai semua bagian: mengamati atribut, melakukan render saat terhubung, menyinkronkan saat atribut berubah, dan melakukan pembersihan saat terputus.

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

Pemeriksaan Singkat

Uji pengetahuan Anda tentang callback siklus hidup.

Rangkuman

Anda telah mempelajari siklus hidup elemen khusus:

connectedCallback berjalan saat penyisipan — lakukan render di sini.
disconnectedCallback berjalan saat penghapusan — lakukan pembersihan di sini.
observedAttributes menyatakan atribut mana yang akan dipantau.
attributeChangedCallback(name, old, new) merespons perubahan.
adoptedCallback menangani pemindahan lintas dokumen.

Selanjutnya, kita akan mengenkapsulasi gaya dan markah dengan DOM bayangan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Callback Siklus Hidup” gratis?

Ya — teks lengkap “Callback Siklus Hidup” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Callback Siklus Hidup”?

Hubungkan kode ke perubahan terhubung, terputus, dan atribut. Kamu berlatih JavaScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Callback Siklus Hidup” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke JavaScript Academy