Qu'est-ce que le moteur de modèles javascript

Le moteur de modèles JavaScript est une méthode permettant de séparer la structure HTML du contenu qu'elle contient. Il est produit pour séparer l'interface utilisateur des données commerciales. Il peut générer un document HTML standard ; le moteur de modèles est utilisé pour restituer des pages dynamiques. , quelque chose qui peut être utilisé pour simplifier les opérations de concaténation de chaînes.

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

Qu'est-ce qu'un moteur de modèles javascript ?

Un moteur de modèles (fait ici spécifiquement référence à un moteur de modèles utilisé pour le développement Web) est créé pour séparer l'interface utilisateur des données métier (contenu). utilisation sur les sites Web Le moteur de modèles générera un document HTML standard.

Le moteur de modèles est conçu pour simplifier les opérations d'épissage de chaînes lors du rendu de pages dynamiques.

Les modèles JavaScript sont un moyen de séparer la structure HTML du contenu qu'il contient. Les systèmes de modèles introduisent souvent une nouvelle syntaxe, mais sont généralement très simples à utiliser, surtout si nous avons déjà utilisé un système de modèles ailleurs (comme Twig en PHP). Une chose intéressante à noter est que la substitution de jetons est généralement représentée par des doubles accolades ( {{ ... }} ), dont sont dérivés Moustache et Guidon (astuce : tournez-le sur le côté pour voir la similitude).

Par exemple, nous devons afficher une liste sur la page :

<li>111</li>
<li>222</li>
<li>333</li>

Les données de la liste sont un tableau obtenu dynamiquement data=['111','222','333']. Ensuite, nous l'écrivons directement dans le code, nous devons boucler les données, puis fusionner les données de chaque li. Les étudiants habitués à écrire des pages souhaitent écrire la logique du code directement dans un code HTML. Tant que la source de données est modifiée, différents codes de page peuvent être générés. Par exemple, on peut écrire comme ceci :

for(var i = 0; i < this.list.length; i++){
  <li>this.list[i]</li>
}

Lorsque les données de this.list sont modifiées, différents résultats peuvent être obtenus. Mais avec un tel code, il est impossible de distinguer où se trouve le code logique et où se trouve le code html lui-même. Nous avons donc ajouté quelques balises, ici nous utilisons 72637aecae1027e7d023ac098a170986 pour envelopper le code logique.

<%for(var i = 0; i < this.list.length; i++){%>
  <li><%=this.list[i]%></li>
<%}%>

Nous pouvons ajouter ce code à la balise de script, changer le type en texte/html ou d'autres formats, et obtenir le contenu du texte via le dom si nécessaire. Si js peut comprendre ce code, il peut mettre à jour le contenu du modèle en modifiant la source de données. Nous pouvons capturer tous les codes logiques grâce à une correspondance régulière, puis les analyser. Ici, j'ai pris une astuce et utilisé js pour utiliser new Function pour exécuter le code. J'ai ajouté les parties autres que le code logique dans une chaîne. Après l'exécution, le résultat final de la chaîne a été affiché : var etj = function (str, data) {.

var reg = /^<%.*?%>/,
    reg2 = /^(.*?)<%/,
    str2 = &#39;var str = "";&#39;,
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], &#39;&#39;);
            str2 += (&#39;str +&#39; + match[0].replace(/<%|%>/g, &#39;&#39;));
            str2 += &#39;;&#39;;
        } else {
            str = str.replace(match[0], &#39;&#39;);
            str2 += match[0].replace(/<%|%>/g, &#39;&#39;);
            str2 += &#39;;&#39;;
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], &#39;&#39;);
        str2 += &#39;str +="&#39;;
        str2 += match[0];
        str2 += &#39;";&#39;;
    }
}
str2 += &#39;return str;&#39;
var f = new Function(str2);
return f.call(data);

} C'est un moteur jouet écrit par moi-même, et il contient encore des bugs. Faisons d'abord une démo (la logique est simple après tout). Ici, nous utilisons des règles régulières simples pour transformer le modèle en un morceau de code js pur. Après avoir importé la source de données, le résultat de l'exécution est le code html souhaité. Il suffit d'exécuter :

etj(str, {'list': [1, 2, 3]});

De cette façon, la logique HTML n'a pas besoin d'être intégrée dans le code js.

【Recommandations associées : tutoriel vidéo javascript, front-end 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!