Récemment, mon contenu de travail aborde progressivement mon idéalisation (Web front-end), donc je prête plus d'attention aux performances frontales! Un collègue en arrière-plan a introduit l'utilisation du moteur de modèle Ajax pour améliorer la vitesse de rendu!
Voici quelques moteurs de modèle JavaScript
1. Moustache
Un moteur de modèle basé sur JavaScript, similaire au plugin de modèle JQuery de Microsoft, mais est plus simple et plus facile à utiliser!
2. Dot.js
dot.js contient un moteur de modèle JavaScript pour les navigateurs et Node.js.
3. JSMART
JSMART est une version portée JavaScript du célèbre moteur de modèle PHP Smarty.
4. Dom.js
Dom.js est un moteur de modèle JavaScript qui peut être utilisé à la fois sur le client et le côté serveur.
5. Jade
Jade est un moteur de modèle haute performance pour les nœuds influencés par HAML en JavaScript.
6. Hogan.js
Moteur de modèle javascript de Twitter.
7. guidon
Le guidon est une bibliothèque de modèles de page JavaScript
8. ArtTEmplate
Artemplate est une nouvelle génération de moteur de modèle JavaScript. Son efficacité de rendu dans le V8 peut être proche de la limite de performance de JavaScript. Dans le test d'efficacité de rendu sous Chrome, il est 25 et 32 fois celui des moteurs bien connus de la moustache et du micro TMPL respectivement. Le moteur prend en charge le débogage. Si une erreur est rencontrée lors du rendu, le débogueur peut localiser avec précision l'énoncé du modèle qui produit une exception, en résolvant le problème que les modèles frontaux sont difficiles à déboguer.
L'outil de compilation de modèles unique peut compiler les modèles frontaux dans des fichiers JS qui ne comptent pas sur le moteur de modèle pour s'exécuter, permettant aux modèles frontaux de percer les restrictions du navigateur et de réaliser l'organisation des fichiers et des répertoires de la même manière que les modèles back-end, le chargement à la demande, l'inclusion, etc.
Peut-être que vous penserez que le nom de ce plugin semble familier, c'est vrai! Ceci est également l'auteur d'ArtDialog.
Adresse du blog: http://www.planeart.cn/
Citer le moteur
La copie de code est la suivante:
<script src = "js / template.js"> </ script>
Écrire un modèle
La copie de code est la suivante:
<script id = "test" type = "text / html">
// Utilisez une balise de script avec type = "text / html" pour stocker le modèle:
<h1> <% = title%> </h1>
<ul>
<%
pour (i = 0; i <list.length; i ++) {%>
<li> iteml <% = i + 1%>: <% = list [i]%> </li>
<%}%>
</ul>
// Les symboles de définition pour le début et la fin de la syntaxe logique du modèle sont <% et%>. Si <% est suivi par le Sign =, le contenu variable sera sorti.
</cript>
Modèle de rendu
La copie de code est la suivante:
var data = {
Titre: «Tag»,
Liste: [«littéraire», «blog», «photographie», «film», «folk», «voyage», «guitare»]
};
var html = template.render ("test", data);
document.getElementById ('Content'). InnerHtml = html;