LayTpl est un moteur de modèle JavaScript perturbateur. Il utilise des méthodes d'implémentation intelligentes pour rendre sa propre taille petite et exquise. Non seulement il a les performances ultimes, mais il a également presque toutes les fonctions d'un moteur frontal traditionnel. Toute magie de transformation est créée par moins de 1 Ko de code, ce qui ressemble à une révolution, ou non, mais il ne fait aucun doute que LayTPL le présente en effet au monde de la manière la plus légère. Si vous n'avez jamais été exposé à cette demande, cela n'a pas d'importance. L'histoire suivante vous rendra incapable d'attendre pour choisir LayTPL, et à partir de là, vous pouvez mieux saisir le rendu de données de la page et atteindre le sommet de votre vie!
Avantage LayTPL
• Excellentes performances, près de 1 fois plus rapides que Artremplate et DOT, qui sont connues comme le roi de la performance, et 20-40 fois plus rapidement que BaiDudemplate, KissyTemplate, etc., plus l'échelle de données et la fréquence de rendu sont importantes, plus elle est évidente.
• Le volume est tout simplement petit à l'extrême, moins de 1 Ko, et il deviendra plus petit à l'avenir.
• Il a des mécanismes de sécurité tels que l'évasion et possède des fonctions de rapport d'erreur relativement scientifiques.
• Le JavaScript natif peut être écrit arbitrairement dans le modèle pour assurer pleinement la flexibilité du modèle
• Prise en charge de l'application sur la plate-forme Node.js
• Soutenez tous les navigateurs traditionnels anciens ou modernes
Comment utiliser
La copie de code est la suivante:
// Étape 1: Écrivez le modèle. Vous pouvez utiliser une balise de script pour stocker des modèles, tels que:
<script id = "démo" type = "text / html">
<h1> {{d.title}} </h1>
<ul>
{{# pour (var i = 0, len = d.list.length; i <len; i ++) {}}
<li>
<span> name: {{d.list [i] .name}} </span>
<span> ville: {{d.list [i] .City}} </span>
</li>
{{#}}}
</ul>
</cript>
// Étape 2: Créez une vue. Utilisé pour rendre les résultats de rendu.
<div id = "View"> </div>
// Étape 3: Rendre le modèle
var data = {
Titre: «Siege front-end»,
Liste: [{name: 'xianxin', ville: 'hangzhou'}, {name: 'xie liang', ville: 'beijing'}, {name: 'Qianqian', ville: 'hangzhou'}, {name: 'dem', ville: 'beijing'}]
};
var gettpl = document.getElementById («démo»). innerHTML;
LayTpl (getTpl) .Render (data, fonction (html) {
document.getElementById ('View'). InnerHtml = html;
});
Description de la documentation
1. Syntaxe du modèle
Sortir un champ normal sans échapper à HTML: {{D.Field}}
Sortir un champ normal et échapper html: {{= d.field}}
Script javascript: {{# instruction javascript}}
2. Méthode intégrée
1): LayTpl (modèle); // fonction de base, renvoyez un objet
var tpl = LayTpl (modèle);
tpl.render (données, rappel); // Méthode de rendu, renvoie les résultats de rendu, prend en charge deux modes: asynchrone et synchrone
a): asynchrone
tpl.render (data, fonction (résultat) {
console.log (résultat);
});
b): synchrone
var result = tpl.render (data);
console.log (résultat);
2): Laytpl.config (Options); // Initialiser la configuration
Les options sont un objet
{Open: 'Start Tag', Close: 'Close Tag'}
3): Laytpl.v // Obtenez le numéro de version
Choses à noter
1. Introduisez simplement Laytpl.js directement, et vous pouvez également utiliser directement les SeaJS et autres charges modulaires.
2. Laytpl peut être utilisé à volonté, à la fois dans les affaires et dans les plateformes personnelles.
3. Assurez-vous de garder la source à toutes occasions et ne supprimez pas les commentaires de l'en-tête LayoutPl.js.
Site officiel: http://sentsin.com/layui/laytpl/
Télécharger: //www.vevb.com/codes/207072.html