Tag digunakan untuk menentukan templat HTML yang boleh diguna semula yang tidak diberikan dengan serta -merta, dan biasanya digunakan untuk menghasilkan kandungan halaman secara dinamik. Ia tidak dipaparkan secara langsung, tidak menjejaskan prestasi awal, dan merupakan konsep front-end yang tulen. Kegunaannya termasuk mengelakkan kod pendua, meningkatkan prestasi, dan struktur yang jelas dan penyelenggaraan yang mudah. Proses penggunaan dibahagikan kepada tiga langkah: Menentukan tag , mendapatkan kandungan templat melalui JavaScript, dan memasukkan DOM. Contohnya termasuk templat menentukan, kandungan pengklonan, dan mengubah data sebelum memasukkan halaman. Kaedah utama ialah Document.ImportNode () untuk melaksanakan pengklonan yang mendalam. Senario biasa termasuk pembangunan komponen web, paparan senarai dinamik, dan rangka kerja ringan alternatif.

Tag <template></template> dalam HTML sebenarnya agak jelas dengan tujuan tetapi mudah diabaikan. Ringkasnya, ia digunakan untuk menentukan templat kandungan yang boleh digunakan semula yang tidak segera diberikan . Senario yang paling biasa adalah untuk menghasilkan kandungan halaman secara dinamik dengan JavaScript.

Apakah tag <template></template> ?

Anda mungkin mengelirukannya dengan enjin templat backend, tetapi <template></template> HTML> adalah konsep front-end yang tulen. Kandungan HTML di dalamnya tidak akan dipaparkan secara langsung apabila halaman dimuatkan, dan tidak akan menjejaskan prestasi rendering awal. Anda boleh memahaminya sebagai serpihan HTML "tersembunyi" di halaman, dan kemudian mengeluarkannya apabila anda memerlukannya.

Mengapa menggunakan tag <template></template> ?

1. Elakkan kod pendua
   • Jika anda mempunyai struktur yang sering muncul (seperti item senarai, komponen pop timbul), menggunakan <template></template> boleh mengelakkan menulis sekumpulan pendua HTML atau bergantung pada rentetan ejaan JS.
2. Meningkatkan prestasi
   • Apabila halaman dimuatkan, penyemak imbas tidak akan menghuraikan sama ada kandungan dalam <template></template> perlu diberikan, jadi ia tidak akan menyebabkan penyusunan semula dan redrawing yang tidak perlu.
3. Struktur yang jelas dan penyelenggaraan yang mudah
   • Menyimpan templat bersama -sama lebih mudah untuk mengubah suai dan debug daripada bertaburan dalam rentetan JS.

Bagaimana cara menggunakan tag <template></template> ?

Proses asas dapat diringkaskan menjadi tiga langkah:

• Tentukan <template></template> dalam html
• Dapatkan kandungan templat melalui JavaScript
• Masukkan kandungan ke dalam DOM

Contohnya:

 <template id = "pengguna-kad">
  <div class = "card">
    <h3> </h3>
    <p> E -mel: </p>
  </div>
</template>

<script>
  const template = document.getElementById (&#39;user-card&#39;);
  const clone = document.importNode (template.content, true);
  clone.QuerySelector (&#39;H3&#39;). TextContent = &#39;Zhang San&#39;;
  clone.QuerySelector (&#39;P&#39;). TextContent = &#39;Email: zhangsan@example.com&#39;;
  document.body.appendchild (clone);
</script>

Dengan cara ini, anda akan memasukkan kandungan templat secara dinamik.

Petua: document.importNode() adalah kaedah utama untuk kandungan templat kloning. Parameter kedua true mewakili pengklonan yang mendalam, iaitu, ia mengandungi nod kanak -kanak.

Apakah senario penggunaan biasa?

• Pembangunan Komponen Web
  <template></template> sering digunakan dengan elemen tersuai sebagai templat struktur untuk komponen.

• Senarai Dinamik atau Paparan Kad
  Sebagai contoh, selepas mendapatkan data pengguna dari antara muka, kad pengguna diberikan secara kitaran.

• Rangka Kerja Front-End Alternatif
  Jika anda tidak menggunakan REACT, VUE dan rangka kerja lain, JS asli dengan <template></template> adalah kaedah pelaksanaan yang ringan.

Pada dasarnya itu sahaja. Walaupun ia bukan tag yang diperlukan, dalam senario yang betul, <template></template> boleh menjadikan struktur lebih jelas dan pembersih logik. Tidak rumit tetapi mudah diabaikan.

Atas ialah kandungan terperinci Apakah tag yang digunakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!