Un moteur de modèle HTML simple

Les modèles

utilisés auparavant incluent ejs et jade (renommé plus tard pug). Le premier est conçu pour être facile à utiliser et sa syntaxe est relativement proche du HTML. Ce dernier est intimidant, et si je me souviens bien, jade a des exigences strictes en matière d'indentation, car il juge la relation hiérarchique des balises en fonction de l'indentation. Cette conception rend presque impossible l'écriture de Python, c'était comme marcher. sur de la glace fine (où est mon pied à coulisse ???), donc j'utilisais encore ejs pour le développement à cette époque.

Donc, cette fois, j'ai suivi à peu près les spécifications de syntaxe de ejs pour implémenter Leopard.

Télécharger et utiliser

Voici l'adresse github. Vous êtes invités à proposer des suggestions et des bugs dans le numéro après l'avoir lu. sont également les bienvenus.

Vous pouvez également télécharger Leopard via npm :

<span style="font-size: 14px;">$ npm install leopard-template<br></span>

Fonctionnalités

Actuellement, Leopard implémente les points de fonction suivants :

• Interpolation : y compris l'interpolation de texte et l'interpolation HTML

• Jugement logique : <code><span style="font-size: 14px;">if</span>si et <span style="font-size: 14px;">else</span>

  sinon

• <span style="font-size: 14px;">for</span>Boucle : for

boucle, qui peut être utilisée pour boucler la sortie modèle

• <span style="font-size: 14px;">capitalize</span> Filtre : prend en charge l'ajout de filtres à l'interpolation et les filtres peuvent être utilisés en série. Le moteur dispose de deux filtres intégrés, <code><span style="font-size: 14px;">reverse</span>capitalize et reverse<code><span style="font-size: 14px;">Leopard.filter(filter, handler)</span> . Leopard prend également en charge les filtres personnalisés. Vous pouvez utiliser Leopard.filter(filter, handler) pour enregistrer un filtre globalement. En termes de filtres, Leopard

  peut être différent de
ejs

Vue.

<span style="font-size: 14px;">var Leopard = require('leopard-template')<br>var leo = new Leopard()<br><br>var template = '<% if (isOk) { %>' +<br>  '<span class=\"nickname\"><%= nickname | capitalize %></span>' +<br>  '<% } else { %>' +<br>  '<span class=\"realname\"><%= realname | capitalize %></span>' +<br>  '<% } %>'<br><br>var html = leo.compile(conditions, {<br>  isOk: false,<br>  nickname: 'leo',<br>  realname: 'leopard'<br>})<br><br>// html就是最终编译成功的的html了，可以直接通过document的方法渲染到页面上<br></span>

Donnez-moi un exemple

<span style="font-size: 14px;">li</span> En fait, tout le monde connaît les performances du moteur de modèle de chaîne. Dans les conditions matérielles actuelles, on peut presque dire qu'il est très rapide. (L'enfant qui a souffert des mauvaises performances de rendu du serveur DOM virtuel a pleuré et s'est évanoui dans les toilettes. Mon projet d'entreprise est bloqué ici et ne peut pas être en ligne) J'ai fait un simple benchmark , la boucle de 50 000 <em>li</em> prend environ 60 ms. Bien sûr,

<span style="font-size: 14px;"># benchmark<br>$ npm run benchmark<br></span>

chaîne de modèle en chaîne HTML

Open sourceBien qu'il s'agisse d'un projet de fabrication de roues, il ressemble presque à

<span style="font-size: 14px;"># unit test<br>$ npm run test<br><br># coverage<br>$ npm run coverage<br></span>

Leopard

Leopard Chaque fois que je soumets un commit, j'exécute le test et le réussis avant de le soumettre. J'espère aussi que ce projet ne sera pas trop liquide.

Recommandations associées :

Explication de l'exemple de jade du moteur de modèle Node.js

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!