Enjin templat dan teknik pemaparan data dalam JavaScript-tutorial js-php.cn

Enjin templat dan teknik pemaparan data dalam JavaScript

王林

Lepaskan： 2023-06-16 13:40:37

asal

2042 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!