Moteur de modèles de fonctions JavaScript : un outil puissant pour générer dynamiquement du HTML

Moteur de modèles de fonctions JavaScript : un outil puissant pour générer dynamiquement du HTML

Dans le développement front-end, la génération dynamique de HTML est une exigence courante, par exemple : afficher les résultats de recherche en fonction des informations saisies par l'utilisateur et rendre dynamiquement les pages basé sur les données provenant de l'arrière-plan, etc. Dans le développement front-end traditionnel, nous utilisons généralement la concaténation de chaînes pour générer du code HTML dynamique. Cependant, cette méthode présente de nombreuses limites, telles qu’une mauvaise lisibilité, une maintenance sujette aux erreurs et une maintenance difficile. Le moteur de modèles de fonctions JavaScript peut très bien résoudre ces problèmes. En même temps, comparé à d'autres moteurs de modèles, le moteur de modèles de fonctions JavaScript est plus léger, flexible et facile à utiliser.

Qu'est-ce que le moteur de modèles de fonctions JavaScript ?

Le moteur de modèles de fonctions JavaScript est un outil courant dans le développement front-end. Il utilise des fragments HTML comme paramètres pour générer dynamiquement des chaînes HTML afin de remplir l'objectif de rendu des données vers l'interface. Il adopte une syntaxe de modèle de chaîne similaire à ES6, c'est-à-dire en utilisant des backticks pour entourer la chaîne et en utilisant ${} pour marquer les variables dans la chaîne, similaire à l'exemple suivant :

<div>
  <h1>${title}</h1>
  <p>${content}</p>
</div>

Dans le moteur de modèle, nous pouvons mapper des variables aux fragments HTML en définissant des fonctions pour restituer les données sur la page.

Avantages du moteur de modèle de fonction JavaScript

Le moteur de modèle de fonction JavaScript présente les avantages suivants :

1. Bonne lisibilité : l'utilisation du moteur de modèle de fonction pour générer du code HTML est plus cohérente avec une structure de type HTML, facile à lire et pratique. pour les autres développeurs Effectuer une maintenance de suivi.
2. Forte flexibilité : grâce à l'utilisation de fonctions JavaScript, les développeurs peuvent définir et écrire des fonctions de manière flexible en fonction des besoins spécifiques de l'entreprise.
3. Facile à maintenir : lorsque nous utilisons le moteur de modèles de fonctions pour générer du code HTML, nous pouvons extraire les mêmes fragments HTML et les encapsuler dans des fonctions distinctes pour faciliter la maintenance future.
4. Léger : le moteur de modèles de fonctions JavaScript est très léger et, comme il est implémenté dans JavaScript lui-même, il n'est pas nécessaire d'introduire des bibliothèques tierces, il n'exercera donc pas de pression sur la vitesse de chargement des pages.

Implémentation du moteur de modèle de fonction JavaScript

Ce qui suit est l'implémentation de base du moteur de modèle de fonction JavaScript :

function template(tmpl, data) {
  return tmpl.replace(/${(w+)}/g, function(match, key) {
    return data[key];
  });
}

var data = {
  title: "Hello World",
  content: "This is a demo of JavaScript function template engine"
};

var tmpl = `
  <div>
    <h1>${title}</h1>
    <p>${content}</p>
  </div>
`;

var html = template(tmpl, data);

document.body.innerHTML = html;

Nous définissons l'intégralité du fragment HTML comme une chaîne, utilisons ${} pour remplacer les variables qui doivent être remplies dynamiquement , puis utilisez JavaScript. La méthode replace() de la chaîne remplace les variables de la chaîne et affiche finalement le résultat sur la page.

Il convient de noter que dans les applications réelles, nous pouvons être confrontés à des scénarios plus complexes, tels que la nécessité de boucler les données de rendu, la nécessité d'utiliser des jugements conditionnels, etc. À l'heure actuelle, nous pouvons implémenter des fonctions plus complexes en ajoutant quelques jugements logiques à la fonction.

Ce qui suit est une version étendue de l'exemple de code ci-dessus qui prend en charge le bouclage sur les données de rendu :

function template(tmpl, data) {
  return tmpl.replace(/<%=(w+)%>/g, function(match, key) {
    return data[key];
  }).replace(/<%for +(w+) +in +(w+)((w+))%>((?!
).|
)+<%endfor%>/g, function(match, key, fn, name) {
    var str = "";
    data[name].forEach(function(item) {
      str += fn(item);
    });
    return str;
  });
}

var data = {
  title: "Hello World",
  content: "This is a demo of JavaScript function template engine",
  list: [{
      name: "item1",
      content: "This is item 1"
    },
    {
      name: "item2",
      content: "This is item 2"
    },
    {
      name: "item3",
      content: "This is item 3"
    }
  ]
};

var tmpl = `
  <div>
    <h1><%=title%></h1>
    <p><%=content%></p>
    <%for item in list(function(item){%>
    <div>
      <h2><%=item.name%></h2>
      <p><%=item.content%></p>
    </div>
    <%})%>
  </div>
`;

var html = template(tmpl, data);

document.body.innerHTML = html;

Dans cet exemple, nous définissons la syntaxe d'une boucle for, qui génère une fonction appliquée au tableau items pour chaque élément , et renvoie la chaîne résultante.

Le moteur de modèles de fonctions JavaScript étant si flexible, il peut être facilement étendu pour répondre à des besoins spécifiques. Cependant, dans le développement réel, il est recommandé d'utiliser des moteurs de modèles JavaScript open source, tels que guidons.js, Moustache.js, ejs, etc., qui contiennent un grand nombre de fonctions et d'optimisations, sont plus complets et stables, et également prend en charge la pré-compilation pour de meilleures performances.

Résumé

Le moteur de modèles de fonctions JavaScript est un outil très utile qui peut facilement générer du HTML dynamique et le restituer sur la page. Comparé à d’autres moteurs de modèles, il présente les avantages d’une plus grande flexibilité, d’une taille plus légère et d’une mise en œuvre plus simple. Cependant, afin d'améliorer l'efficacité et la stabilité de la production réelle, il est recommandé d'utiliser un moteur de modèles open source mature.

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!