Introduction aux compétences des moteurs de modèles JavaScript couramment utilisés_javascript

Récemment, le contenu de mon travail se rapproche progressivement de mon idéal (web front-end), je fais donc plus attention aux performances front-end ! Des collègues en arrière-plan ont présenté l'utilisation du moteur de modèles ajax pour améliorer la vitesse de rendu !

Ce qui suit présente plusieurs moteurs de modèles JavaScript

1. Moustache

Un moteur de template basé sur javascript, similaire au plugin de template jQuery de Microsoft, mais plus simple et plus facile à utiliser !

2.doT.js

doT.js contient un moteur de modèles JavaScript pour les navigateurs et Node.js.

3.jSmart

jSmart est une version JavaScript portée du célèbre moteur de modèles PHP Smarty.

4.dom.js

dom.js est un moteur de modèles JavaScript qui peut être utilisé à la fois côté client et côté serveur

5. jade

Jade est un moteur de modèles hautes performances pour nœuds implémenté en JavaScript influencé par Haml.

6.Hogan.js

Moteur de modèles JavaScript de Twitter.

7. Guidon

Handlebars est une bibliothèque de modèles de pages JavaScript

8. Modèle d'art

artTemplate est une nouvelle génération de moteur de template javascript. Son efficacité de rendu en v8 peut être proche de la limite de performances de javascript, dans le test d'efficacité de rendu sous chrome, elle est 25 et 32 ​​fois supérieure à celle des moteurs bien connus Moustache. et micro tmpl respectivement. Le moteur prend en charge le débogage. Si une erreur survient lors du rendu, le débogueur peut identifier l'instruction de modèle qui a généré l'exception, résolvant ainsi le problème du débogage difficile des modèles frontaux.

L'outil unique de compilation de modèles peut compiler le modèle frontal dans un fichier JS qui ne dépend pas du moteur de modèle pour s'exécuter, de sorte que le modèle frontal puisse dépasser les limitations du navigateur et être organisé par fichiers. et des répertoires comme le modèle back-end doivent être chargés, inclure l'imbrication, etc. Tout cela en 2 Ko (gzip) !

Peut-être pensez-vous que ce nom de plug-in vous semble familier, oui ! C'est aussi l'auteur de artDialog Sugar Cookie

Adresse du blog : http://www.planeart.cn/

Moteur de cotation

Copier le code Le code est le suivant :

Modèle d'écriture

Copier le code Le code est le suivant :

Modèle de rendu

Copier le code Le code est le suivant :

données var = {
Titre : 'Étiquette',
liste : ['Art', 'Blog', 'Photographie', 'Film', 'Folk', 'Voyage', 'Guitare']
};
var html=template.render("test",data);
document.getElementById('content').innerHTML = html;