Akademi JavaScript · Pelajaran

Panggilan Balik Kitar Hayat

Sambungkan kod kepada perubahan tersambung, terputus dan atribut.

Pelajaran 2 daripada 413 langkah

Panggilan Balik Kitar Hayat ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Kitar Hayat Elemen

Elemen tersuai mempunyai kitar hayat yang ditentukan. Pelayar memanggil kaedah khas pada kelas anda pada saat-saat penting:

connectedCallback — ditambahkan pada DOM
disconnectedCallback — dibuang daripada DOM
attributeChangedCallback — atribut yang diperhati berubah
adoptedCallback — dipindahkan ke dokumen baharu

connectedCallback

connectedCallback berjalan setiap kali elemen dimasukkan ke dalam dokumen. Inilah tempat yang sesuai untuk membuat render kandungan, mendapatkan data atau melampirkan pendengar global.

Panggilan ini boleh berlaku beberapa kali jika elemen dipindahkan dari satu tempat ke tempat lain.

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

disconnectedCallback

disconnectedCallback berjalan apabila elemen dibuang daripada DOM. Gunakannya untuk melakukan pembersihan: buang pendengar global, batalkan pemasa atau tutup sambungan bagi mengelakkan 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);

Memerhati Atribut

Untuk bertindak balas terhadap perubahan atribut, anda mesti mengisytiharkan atribut yang hendak diperhatikan menggunakan pengambil statik observedAttributes yang mengembalikan tatasusunan nama.

Hanya atribut yang disenaraikan akan mencetuskan attributeChangedCallback.

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

attributeChangedCallback

Apabila atribut yang diperhati ditambah, dibuang atau diubah, pelayar memanggil attributeChangedCallback(name, oldValue, newValue). Gunakannya untuk memastikan hasil render anda selaras 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, atau tiada nilai jika baru ditambah
newValue — nilai baharu, atau tiada nilai jika dibuang

Bandingkan nilai lama dan baharu untuk mengelakkan kerja yang tidak diperlukan.

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

Panggilan Atribut Awal

Jika elemen sudah mempunyai atribut yang diperhati ketika dinaik taraf, attributeChangedCallback dicetuskan sekali untuk setiap atribut sebelum connectedCallback. Ini membolehkan anda membuat permulaan secara automatik daripada penandaan.

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

Memantulkan Sifat kepada Atribut

Satu corak yang biasa digunakan ialah mendedahkan sifat JavaScript yang membaca dan menulis atribut. Ini menjadikan antara muka pengaturcaraan aplikasi mudah digunakan sambil mengekalkan penyegerakan.

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 apabila elemen dipindahkan dari satu dokumen ke dokumen lain, contohnya ke dalam iframe melalui document.adoptNode. Ia jarang diperlukan tetapi melengkapkan kitar hayat.

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

Urutan Kitar Hayat

Bagi elemen yang ditulis terus dalam HTML, urutan biasanya ialah:

constructor
attributeChangedCallback sekali bagi setiap atribut yang diperhati dan tersedia
connectedCallback

Kemudian, apabila elemen dibuang, disconnectedCallback akan dipanggil.

Menggabungkan Semuanya

Elemen lengkap menyambungkan semua bahagian: memerhati atribut, membuat render apabila disambungkan, menyegerakkan perubahan atribut dan melakukan pembersihan apabila diputuskan.

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

Semakan Pantas

Uji pengetahuan anda tentang panggilan balik kitar hayat.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari kitar hayat elemen tersuai:

connectedCallback berjalan apabila elemen dimasukkan — lakukan render di sini.
disconnectedCallback berjalan apabila elemen dibuang — lakukan pembersihan di sini.
observedAttributes mengisytiharkan atribut yang hendak diperhatikan.
attributeChangedCallback(name, old, new) bertindak balas terhadap perubahan.
adoptedCallback mengendalikan pemindahan merentas dokumen.

Seterusnya, kita akan mengkapsulkan gaya dan penandaan dengan DOM Bayangan.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Panggilan Balik Kitar Hayat” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Panggilan Balik Kitar Hayat”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Panggilan Balik Kitar Hayat”?

Sambungkan kod kepada perubahan tersambung, terputus dan atribut. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.

Berapa lamakah pelajaran “Panggilan Balik Kitar Hayat” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript