Rumah > Artikel > hujung hadapan web > Enjin templat dan teknik pemaparan data dalam JavaScript
Enjin templat dan teknik pemaparan data dalam JavaScript
- 王林asal
- 2023-06-16 13:40:371973semak imbas
Dengan populariti aplikasi web, JavaScript telah menjadi teras teknologi hadapan. JavaScript boleh menambah interaktiviti dan kerumitan pada halaman web dinamik dan memudahkan beban kerja pembangun melalui enjin templat dan teknik pemaparan data. Dalam artikel ini, kami akan mempelajari lebih lanjut tentang enjin templat dan teknik pemaparan data dalam JavaScript.
1. Enjin templat
Enjin templat ialah alat yang digunakan untuk menjana dokumen dalam HTML, XML atau format lain. Dalam JavaScript, enjin templat yang paling biasa digunakan ialah Misai dan Bar Hendal. Kedua-dua enjin templat sangat serupa, tetapi Handlebars lebih fleksibel daripada Misai.
- Mustache
Mustache ialah enjin templat yang ringkas tetapi berkuasa. Ia boleh memberikan data dengan menggunakan ruang letak dan menjana kod HTML. Pemegang tempat disertakan dalam pendakap kerinting berkembar, seperti {{nama}}. Untuk menggunakan Misai, anda perlu memuat turun Mustache.js terlebih dahulu dan memperkenalkannya dalam dokumen HTML.
Berikut ialah contoh Misai mudah:
<!DOCTYPE html>
<html>
<head>
<script src="mustache.js"></script>
</head>
<body>
<div id="output"></div>
<script>
var data = {
"name": "John",
"age": 30
};
var template = "My name is {{name}} and I am {{age}} years old.";
var output = document.getElementById("output");
output.innerHTML = Mustache.render(template, data);
</script>
</body>
</html>Dalam contoh ini, kami mentakrifkan data objek data dan templat templat Misai. Kemudian, objek data diberikan ke dalam templat melalui kaedah render() Misai, kod HTML dijana dan dimasukkan ke dalam elemen output dalam halaman.
- Hendal
Hendal lebih fleksibel daripada Misai. Ia mempunyai templat dan struktur data yang sama, tetapi anda juga boleh menentukan fungsi dan blok pembantu untuk menjadikan templat lebih mudah dibaca dan lebih mudah diselenggara. Bar hendal juga boleh meningkatkan prestasi dengan menyusun templat.
Berikut ialah contoh Handlebar mudah:
<!DOCTYPE html>
<html>
<head>
<script src="handlebars.js"></script>
</head>
<body>
<div id="output"></div>
<script id="template" type="text/x-handlebars-template">
My name is {{name}} and I am {{age}} years old.
</script>
<script>
var data = {
"name": "John",
"age": 30
};
var template = document.getElementById("template").innerHTML;
var compiledTemplate = Handlebars.compile(template);
var output = document.getElementById("output");
output.innerHTML = compiledTemplate(data);
</script>
</body>
</html>Dalam contoh ini, kami mentakrifkan templat Handlebar dan data objek data. Mula-mula kita perlu mendapatkan templat daripada dokumen HTML dan menyerahkannya kepada kaedah Handlebars.compile() untuk mendapatkan templat boleh laku. Kami kemudian menghantar objek data ke templat yang disusun dan memasukkan hasilnya ke dalam elemen output dalam halaman.
2. Teknik pemaparan data
Selain menggunakan enjin templat, terdapat beberapa teknik pemaparan data JavaScript lain yang boleh membantu kami membentangkan data dengan lebih baik.
- kaedah forEach()
Kaedah forEach() JavaScript boleh digunakan untuk mengulang setiap elemen dalam tatasusunan dan melaksanakan operasi yang sama padanya. Sebagai contoh, kita boleh menggunakan kaedah forEach() untuk menjadikan set data ke dalam jadual pada halaman.
Berikut ialah contoh mudah kaedah forEach():
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody id="output"></tbody>
</table>
<script>
var data = [
{ "name": "John", "age": 30 },
{ "name": "Jane", "age": 25 },
{ "name": "Bob", "age": 35 }
];
var output = document.getElementById("output");
data.forEach(function (item) {
var row = document.createElement("tr");
var nameCell = document.createElement("td");
nameCell.innerText = item.name;
row.appendChild(nameCell);
var ageCell = document.createElement("td");
ageCell.innerText = item.age;
row.appendChild(ageCell);
output.appendChild(row);
});
</script>
</body>
</html>Dalam contoh ini, kami mentakrifkan data objek data dan elemen jadual. Kami menggunakan kaedah forEach() untuk lelaran melalui objek data dan mencipta baris baharu dan dua sel untuk setiap item data. Kemudian, masukkan baris ke dalam elemen tbody dalam jadual.
- Rentetan templat
Diperkenalkan dalam ES6, rentetan templat ialah sintaks baharu untuk mencipta rentetan berbilang baris dan memasukkan pembolehubah. Menggunakan rentetan templat menjadikannya lebih mudah untuk memaparkan data ke dalam halaman.
Berikut ialah contoh rentetan templat mudah:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="output"></div>
<script>
var data = {
"name": "John",
"age": 30
};
var output = document.getElementById("output");
output.innerHTML = `
My name is ${data.name} and I am ${data.age} years old.
`;
</script>
</body>
</html>Dalam contoh ini, kami mentakrifkan data objek data dan elemen output. Kami menggunakan rentetan templat untuk mencipta rentetan berbilang baris yang mengandungi data dan memasukkannya ke dalam elemen output.
Kesimpulan
Dalam JavaScript, enjin templat dan teknik pemaparan data boleh membolehkan kami mempersembahkan data dengan lebih cekap, mengurangkan masa pengekodan dan kadar ralat. Misai dan Bar Hendal ialah dua enjin templat biasa, manakala kaedah forEach() dan rentetan templat ialah teknik pemaparan data lain yang berguna. Teknologi ini bukan sahaja dapat membantu kami meningkatkan kecekapan pembangunan, tetapi juga menjadikan halaman web lebih mudah untuk diselenggara dan dinaik taraf.
Atas ialah kandungan terperinci Enjin templat dan teknik pemaparan data dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!