Komponen web yang menyedari konteks lebih mudah daripada yang anda fikirkan

Artikel ini meneroka panggilan balik kitaran hayat yang sering diabaikan komponen web, menunjukkan bagaimana mereka membolehkan unsur-unsur konteks yang menyedari. Kami akan membina komponen web yang bertindak balas terhadap persekitarannya, mempamerkan kuasa fungsi ini.

Gambaran Keseluruhan Siri

Artikel ini adalah sebahagian daripada siri untuk memudahkan pembangunan komponen web:

• Komponen Web: lebih mudah daripada yang anda fikirkan
• Komponen web interaktif: lebih mudah daripada yang anda fikirkan
• Menggunakan komponen web di WordPress: lebih mudah daripada yang anda fikirkan
• Elemen terbina dalam supercharging dengan komponen web: lebih mudah daripada yang anda fikirkan
• Komponen web yang menyedari konteks: lebih mudah daripada yang anda fikirkan ( artikel ini )
• Kelas pseudo komponen web dan elemen pseudo: lebih mudah daripada yang anda fikirkan

Panggilan balik kitaran hayat komponen web

Empat panggilan balik utama mengawal kitaran hayat komponen web:

• connectedCallback : Dipecat apabila elemen ditambah ke DOM.
• disconnectedCallback : Dipecat apabila elemen dikeluarkan dari DOM.
• adoptedCallback : Dipecat apabila elemen dipindahkan ke dokumen baru.
• attributeChangedCallback : Dipecat apabila perubahan atribut diperhatikan.

Mari kita gambarkan ini dengan contoh praktikal.

Komponen orang pasca apokaliptik

Kami akan membuat a<postapocalyptic-person></postapocalyptic-person> komponen. Setiap orang adalah .human atau .zombie , yang ditentukan oleh kelas. Komponen akan memaparkan imej yang sesuai menggunakan Dom Shadow.

 customElements.define (
  "Postapocalyptic-Orang",
  Kelas memanjangkan htmlelement {
    pembina () {
      super ();
      this.shadowroot = this.attachshadow ({mod: "buka"});
    }
    // ... panggilan balik kitaran hayat akan ditambah di sini ...
  }
);

HTML awal kami:

<div class="humans">
  <postapocalyptic-person></postapocalyptic-person>
</div>
<div class="zombies">
  <postapocalyptic-person></postapocalyptic-person>
</div>

Menggunakan connectedCallback

connectedCallback dipanggil ketika<postapocalyptic-person></postapocalyptic-person> ditambah ke halaman. Kami akan menggunakannya untuk menambah imej:

 connectedCallback () {
  const image = document.createElement ("img");
  jika (this.parentnode.classlist.contains ("manusia")) {
    image.src = "https://assets.codepen.io/1804713/lady.png";
  } else if (this.parentNode.classlist.contains ("Zombies")) {
    image.src = "https://assets.codepen.io/1804713/ladyz.png";
  }
  this.shadowroot.appendchild (imej);
}

Ini memastikan imej yang betul dipaparkan berdasarkan kelas ibu bapa. Nota: connectedCallback boleh api beberapa kali; Gunakan this.isConnected untuk memeriksa status sambungan.

Mengira orang dengan connectedCallback

Mari tambahkan butang untuk menambah/mengeluarkan orang dan mengira jumlah:

<div>
  <button id="addbtn">Tambah orang</button>
  <button id="rmvbtn">Membuang orang</button>
  <br>Manusia: <span id="human-count">0</span>
  Zombi: <span id="zombie-count">0</span>
</div>

Pendengar acara butang:

 // ... (tambah/keluarkan logik orang) ...

Dikemaskini connectedCallback untuk mengemas kini kiraan:

 connectedCallback () {
  // ... (logik imej) ...
  // Kemas kini kiraan berdasarkan sumber imej
}

Mengemas kini tuduhan dengan disconnectedCallback

disconnectedCallback decrements dikira apabila seseorang dikeluarkan. Kami akan menggunakan sumber imej sebagai proksi untuk jenis:

 disconnectedCallback () {
  const image = this.shadowroot.QuerySelector ('img');
  // Mengira jumlah berdasarkan sumber imej
}

Pengesanan badut dengan adoptedCallback dan attributeChangedCallback

Kami akan memperkenalkan kemungkinan badut tersembunyi, memindahkannya ke<iframe></iframe> Menggunakan adoptedCallback dan mendedahkan mereka dengan attributeChangedCallback . Butiran contoh lanjutan ini ditinggalkan untuk keringkasan, tetapi konsep teras melibatkan penggunaan adoptedCallback untuk mengesan apabila komponen dipindahkan ke dokumen baru dan attributeChangedCallback untuk bertindak balas terhadap perubahan atribut, mengemas kini imej dengan sewajarnya.

Ini menggambarkan bagaimana panggilan balik kitaran menyediakan alat yang kuat untuk mewujudkan komponen web yang dinamik dan konteks, menjadikannya lebih serba boleh dan responsif.

Atas ialah kandungan terperinci Komponen web yang menyedari konteks lebih mudah daripada yang anda fikirkan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!