Maison > Article > interface Web > Moteurs de modèles et techniques de rendu de données en JavaScript
Moteurs de modèles et techniques de rendu de données en JavaScript
- 王林original
- 2023-06-16 13:40:371974parcourir
Avec la popularité des applications Web, JavaScript est devenu le cœur de la technologie front-end. JavaScript peut ajouter de l'interactivité et de la complexité aux pages Web dynamiques et alléger la charge de travail des développeurs grâce à des moteurs de modèles et des techniques de rendu de données. Dans cet article, nous en apprendrons davantage sur les moteurs de modèles et les techniques de rendu de données en JavaScript.
1. Moteur de modèles
Un moteur de modèles est un outil utilisé pour générer des documents au format HTML, XML ou autres. En JavaScript, les moteurs de modèles les plus couramment utilisés sont Moustache et Guidon. Les deux moteurs de modèles sont très similaires, mais Guidon est plus flexible que Moustache.
- Mustache
Mustache est un moteur de modèles simple mais puissant. Il peut restituer les données en utilisant des espaces réservés et générer du code HTML. Les espaces réservés sont entourés de doubles accolades, telles que {{name}}. Pour utiliser Moustache, vous devez d'abord télécharger Moustache.js et l'introduire dans le document HTML.
Ce qui suit est un exemple simple de Moustache :
<!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>Dans cet exemple, nous définissons des données d'objet de données et un modèle de modèle Moustache. Ensuite, l'objet de données est rendu dans le modèle via la méthode render() de Moustache, le code HTML est généré et inséré dans l'élément de sortie de la page.
- Handlebars
Par rapport à Moustache, les guidons sont plus flexibles. Il possède les mêmes modèles et structures de données, mais vous pouvez également définir des fonctions et des blocs d'assistance pour rendre les modèles plus lisibles et plus faciles à maintenir. Les guidons peuvent également améliorer les performances en précompilant des modèles.
Ce qui suit est un exemple simple de guidon :
<!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>Dans cet exemple, nous définissons un modèle de guidon et des données d'objet de données. Nous devons d’abord récupérer le modèle du document HTML et le transmettre à la méthode guidons.compile() pour obtenir un modèle exécutable. Nous transmettons ensuite l'objet de données au modèle compilé et insérons le résultat dans l'élément de sortie de la page.
2. Techniques de rendu des données
En plus d'utiliser des moteurs de modèles, il existe d'autres techniques de rendu des données JavaScript qui peuvent nous aider à mieux présenter les données.
- forEach() méthode
La méthode forEach() de JavaScript peut être utilisée pour parcourir chaque élément d'un tableau et effectuer la même chose dessus opération. Par exemple, nous pouvons utiliser la méthode forEach() pour restituer un ensemble de données dans un tableau sur la page.
Ce qui suit est un exemple simple de la méthode 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>Dans cet exemple, nous définissons un objet de données data et un élément de table. Nous utilisons la méthode forEach() pour parcourir l'objet de données et créer une nouvelle ligne et deux cellules pour chaque élément de données. Ensuite, insérez la ligne dans l’élément tbody du tableau.
- Modèle de chaîne
Introduites dans ES6, les chaînes de modèles sont une méthode permettant de créer des chaînes multilignes et d'insérer des variables. Nouvelle syntaxe. L'utilisation de chaînes de modèles facilite le rendu des données dans la page.
Ce qui suit est un exemple simple de chaîne de modèle :
<!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>Dans cet exemple, nous définissons un objet de données data et un élément de sortie. Nous utilisons la chaîne modèle pour créer une chaîne multiligne contenant les données et l'insérons dans l'élément de sortie.
Conclusion
En JavaScript, les moteurs de modèles et les techniques de rendu des données peuvent nous permettre de présenter les données plus efficacement, réduisant ainsi le temps de codage et les taux d'erreur. Moustache et Handles sont deux moteurs de modèles courants, tandis que la méthode forEach() et les chaînes de modèles sont d'autres techniques de rendu de données utiles. Ces technologies peuvent non seulement nous aider à améliorer l’efficacité du développement, mais également faciliter la maintenance et la mise à niveau des pages Web.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!