Cara menggunakan atribut data HTML5 untuk data tersuai.

atribut data HTML5 adalah cara standard untuk menyimpan data tersuai pada elemen halaman. 1. Ia bermula dengan data-, seperti data-user-id. Data tidak dapat dilihat oleh pengguna tetapi boleh diakses melalui JavaScript; 2. Gunakan atribut dataset untuk membaca atau menetapkan data, dan tanda hubung ditukar kepada unta; 3. Sesuai untuk rendering template depan, pengurusan negeri komponen, kawalan interaktif dan senario lain; 4. Nota termasuk mengelakkan menyimpan data sensitif atau besar, mencegah konflik penamaan, memberi perhatian kepada penukaran jenis data, dan penggunaan yang munasabah untuk mengelakkan masalah prestasi. Penggunaan atribut data yang betul boleh membuat logik front-end lebih jelas dan lebih ringkas.

Atribut data HTML5 adalah ciri yang sangat praktikal yang membolehkan anda menyimpan data tersuai pada elemen HTML tanpa memerlukan objek JavaScript tambahan atau pembolehubah global. Bukan sahaja ia mempunyai struktur yang jelas, ia juga menjadikan logik depan lebih mudah.

Apakah atribut data?

Atribut data adalah cara standard dalam HTML5 untuk membenamkan data tersuai pada elemen halaman. Data ini tidak dapat dilihat oleh pengguna, tetapi boleh diakses dengan mudah dan dimanipulasi melalui JavaScript.

Peraturan penamaan bermula dengan data- diikuti dengan nama harta yang anda tentukan, seperti:

 <div data-user-id = "123" data-role = "admin"> </div>

Penyemak imbas secara automatik mengiktiraf sifat -sifat ini sebagai sifat HTML yang sah dan tidak mempengaruhi rendering halaman.

Bagaimana cara membaca dan menetapkan sifat data?

Anda boleh mengakses data melalui harta dataset JavaScript.

Contohnya:

 const element = document.QuerySelector ('div');
console.log (element.dataset.userid); // output: "123"
console.log (element.dataset.role); // output: "admin"

NOTA: Hyphen (seperti data-user-id ) dalam nama atribut akan ditukar kepada unta ( userId ).

Persediaan juga sangat mudah:

 element.dataset.userid = '456';
element.dataset.newkey = 'newValue';

Ini akan mengemas kini secara automatik atau menambah atribut data yang sepadan pada DOM.

Senario mana yang sesuai untuk menggunakan atribut data?

• Rendering template depan : Apabila rendering pada pelayan, beberapa data awal boleh diletakkan dalam atribut data untuk inisialisasi JS front-end.
• Pengurusan Status Komponen : Sebagai contoh, maklumat seperti status butang, sama ada ia telah dimuatkan, boleh buat sementara waktu di DOM.
• Kawalan Interaktif : Sebagai contoh, selepas mengklik item menu, anda perlu lulus parameter tertentu, yang boleh disimpan dan dibaca secara langsung menggunakan data.
• SEO atau Bantuan Kebolehcapaian : Walaupun maklumat sensitif tidak disyorkan, maklumat meta bukan awam boleh disimpan dengan cara ini.

Sudah tentu, elakkan menyimpan jumlah data yang besar atau kandungan sensitif kerana ia terdedah kepada kod sumber.

Nota Menggunakan atribut data

• Hanya gunakan data yang berkaitan dengan konteks halaman semasa : Jangan gunakannya untuk penyimpanan yang berterusan, dan menyegarkan halaman akan hilang.

• Berhati-hati apabila menamakan konflik : Cuba gunakan modul atau awalan fungsional, seperti data-cart-item-id dan bukannya data-id .

• Jenis adalah rentetan : Jika anda memerlukan nombor atau nilai boolean, ingatlah untuk menukarnya secara manual:

   const id = parseInt (element.dataset.userid, 10);
  const isactive = element.dataset.active === 'true';

• Terdapat sedikit masalah prestasi, tetapi tidak menyalahgunakannya : Jika anda mempunyai beribu -ribu elemen dengan sejumlah besar atribut data, ia boleh menjejaskan kelajuan rendering atau jejak memori.

Pada dasarnya itu sahaja. Atribut data mudah digunakan, tetapi ia boleh memainkan peranan tambahan yang baik dalam projek sebenar, terutamanya dalam kerjasama front-end dan komunikasi komponen.

Atas ialah kandungan terperinci Cara menggunakan atribut data HTML5 untuk data tersuai.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!