Heim > Artikel > Web-Frontend > Template-Engines und Datenrenderingtechniken in JavaScript

Template-Engines und Datenrenderingtechniken in JavaScript

王林Original: 2023-06-16 13:40:372029Durchsuche

Mit der Popularität von Webanwendungen ist JavaScript zum Kern der Front-End-Technologie geworden. JavaScript kann dynamischen Webseiten Interaktivität und Komplexität verleihen und die Arbeitsbelastung von Entwicklern durch Vorlagen-Engines und Datenrendering-Techniken verringern. In diesem Artikel erfahren wir mehr über Template-Engines und Datenrenderingtechniken in JavaScript.

1. Template-Engine

Eine Template-Engine ist ein Tool zum Generieren von Dokumenten in HTML, XML oder anderen Formaten. In JavaScript sind die am häufigsten verwendeten Template-Engines Moustache und Handlers. Die beiden Template-Engines sind sich sehr ähnlich, aber Steering ist flexibler als Moustache.

Mustache

Mustache ist eine einfache, aber leistungsstarke Template-Engine. Es kann Daten mithilfe von Platzhaltern rendern und HTML-Code generieren. Platzhalter werden in doppelte geschweifte Klammern eingeschlossen, z. B. {{name}}. Um Moustache verwenden zu können, müssen Sie zuerst Mustache.js herunterladen und in das HTML-Dokument einführen.

Das Folgende ist ein einfaches Mustache-Beispiel:

<!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>

In diesem Beispiel definieren wir ein Datenobjekt „data“ und eine Mustache-Vorlage. Anschließend wird das Datenobjekt über die render()-Methode von Mustache in die Vorlage gerendert, HTML-Code generiert und in das Ausgabeelement auf der Seite eingefügt.

Lenker

Im Vergleich zu Moustache sind Lenker flexibler. Es verfügt über dieselben Vorlagen und Datenstrukturen, Sie können jedoch auch Hilfsfunktionen und Blöcke definieren, um die Vorlagen lesbarer und einfacher zu warten. Lenker können auch die Leistung verbessern, indem sie Vorlagen vorkompilieren.

Das Folgende ist ein einfaches Beispiel für Lenker:

<!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>

In diesem Beispiel definieren wir eine Vorlage für Lenker und Datenobjektdaten. Wir müssen zunächst die Vorlage aus dem HTML-Dokument abrufen und sie an die Handlers.compile()-Methode übergeben, um eine ausführbare Vorlage zu erhalten. Anschließend übergeben wir das Datenobjekt an die kompilierte Vorlage und fügen das Ergebnis in das Ausgabeelement auf der Seite ein.

2. Daten-Rendering-Techniken

Neben der Verwendung von Template-Engines gibt es einige andere JavaScript-Daten-Rendering-Techniken, die uns helfen können, Daten besser darzustellen.

forEach()-Methode

Die forEach()-Methode von JavaScript kann verwendet werden, um über jedes Element in einem Array zu iterieren und denselben Vorgang darauf auszuführen. Beispielsweise können wir die Methode forEach() verwenden, um einen Datensatz in einer Tabelle auf der Seite darzustellen.

Das Folgende ist ein einfaches Beispiel der forEach()-Methode:

<!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>

In diesem Beispiel definieren wir ein Datenobjekt data und ein Tabellenelement. Wir verwenden die Methode forEach(), um das Datenobjekt zu durchlaufen und für jedes Datenelement eine neue Zeile und zwei Zellen zu erstellen. Fügen Sie dann die Zeile in das tbody-Element in der Tabelle ein.

Template Strings

Template Strings wurden in ES6 eingeführt und sind eine neue Syntax zum Erstellen mehrzeiliger Strings und zum Einfügen von Variablen. Die Verwendung von Vorlagenzeichenfolgen erleichtert das Rendern von Daten auf der Seite.

Das Folgende ist ein einfaches Beispiel für eine Vorlagenzeichenfolge:

<!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>

In diesem Beispiel definieren wir Datenobjektdaten und ein Ausgabeelement. Wir verwenden die Vorlagenzeichenfolge, um eine mehrzeilige Zeichenfolge mit den Daten zu erstellen und diese in das Ausgabeelement einzufügen.

Fazit

In JavaScript können uns Vorlagen-Engines und Datenrenderingtechniken eine effizientere Darstellung von Daten ermöglichen und so die Programmierzeit und Fehlerraten reduzieren. Moustache und Handlers sind zwei gängige Template-Engines, während die forEach()-Methode und Template-Strings weitere nützliche Datenrendering-Techniken sind. Diese Technologien können uns nicht nur dabei helfen, die Entwicklungseffizienz zu verbessern, sondern auch die Wartung und Aktualisierung von Webseiten erleichtern.

Das obige ist der detaillierte Inhalt vonTemplate-Engines und Datenrenderingtechniken in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html es6 foreach xml 字符串数据结构 JS 对象 tbody

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementieren Sie Codekomprimierung und Leistungsoptimierung in JavaScriptNächster Artikel：Implementieren Sie Codekomprimierung und Leistungsoptimierung in JavaScript

In Verbindung stehende Artikel

Mehr sehen