Introduction à EJS pour développeurs
Traduit par
ScribdTranslationsIntroduction à EJS pour développeurs
Traduit par
ScribdTranslationsEJS - Modèles JavaScript [Link]
html
Home Download GoogleCode Documentation Forum Contact
EJS
<% JavaScript intégré %>
Premiers pas
avec EJS %>
Getting Started with EJS
Êtes-vous déjà confronté à un enchevêtrement de concaténations de chaînes HTML comme
ça?
varhtml = "<h1>"+[Link]+"</h1>"
html += "<ul>"
pour(vari=0; i<[Link]; i++) {
html += "<li><a href='supplies/"+[Link][i]+"'>"
html += [Link][i] + "</a></li>"
}
html += "</ul>"
If you're a web developer,the answer is probably yes. Beyond being
laid, la structure de votre HTML est perdue dans le JavaScript. Ajoutant à
Cette mise en page serait difficile. Comment pouvons-nous l'améliorer ?
Dans ce tutoriel, nous vous montrerons comment améliorer le code ci-dessus que
produit une liste de liens d'approvisionnement. Nous utiliserons JavaScript embarqué (EJS)
ramener ce code à une structure HTML simple et maintenable.
EJS is a JavaScript templating [Link] is commonly used for
building html strings from JSON [Link],EJS works like this:
This tutorial walks you through:
1. Y compris EJS
1 de 5 08-05-2014 20:46
EJS - Modèles JavaScript [Link]
[Link]éer un modèle
[Link] utilisant des helpers de vue
4. Utiliser la gestion des erreurs
5. Quand utiliser EJS
Inclure EJS
Avant de mettre les gants en caoutchouc et de commencer le nettoyage en profondeur,
Mettons-nous en place un peu.
Votre page doit inclure EJS afin que votre JavaScript puisse l'utiliser. Commencez par
téléchargez ejs_production.js depuis Google Code ou le subversion
référentiel.
Ensuite, ajoutez EJS à votre HTML comme ceci :
<script type="text/javascript" src="ejs_production.js"></script>
Créer un modèle
La première étape vers un code plus propre est de séparer votre présentation.
marquage (HTML) de votre logique d'application (JavaScript). Nous allons faire cela
en séparant notre balisage de présentation dans un fichier séparé appelé un
modèle. Créez un fichier appelé [Link] et insérez le suivant
code:
<h1><%= titre %></h1>
<ul>
<% for(vari=0; i<[Link]; i++) { %>
<li>
<a href='supplies/<%= supplies[i] %>'>
<%= fournitures[i] %>
</a>
</li>
<% } %>
</ul>
Vous remarquerez que tout ce qui se trouve à l'intérieur des balises <% %> est exécuté et
tout ce qui se trouve à l'intérieur des balises <%= %> s'insère dans le HTML retourné
chaîne.
Nous devons ajouter JavaScript pour contrôler le chargement et le rendu de la
template. We'll replace the original string concatenation code with the
suivant :
2 de 5 08-05-2014 20:46
EJS - Modèles JavaScript [Link]
// charger le fichier modèle, puis le rendre avec des données
varhtml =newEJS({url:'[Link]'}).render(data);
Cela ne fait pas mieux ? Le code du modèle restaure le HTML à son
la structure prévue et le code JavaScript sont courts et sans ambiguïté.
The dust is clear,now its time to mop.
Aide à la vue
EJS est livré avec des helpers de vue. Les helpers de vue sont des raccourcis pour
code d'affichage couramment utilisé, comme les liens et les formulaires. Semblable à ceux-ci
trouvé dans le framework Ruby on Rails, ils gardent le code de vue aussi court,
simple et aussi direct que possible.
Les liens dans notre modèle sont construits à l'aide de quelque chose
ressemblant à la concaténation de chaînes.
<li>
<a href='fournitures/<%= fournitures[i] %>'>
<%= fournitures[i] %>
</a>
</li>
Ce code est encore assez en désordre. Il y a suffisamment de balises imbriquées pour rendre
tu es étourdi. Organisons cela en utilisant un helper de vue.
<li> </li>
<%= link_to(supplies[i], 'fournitures/'+supplies[i]) %>
</li>
Ce code est beaucoup plus propre et plus direct. N'oubliez pas ce que
À quoi ressemblaient les liens utilisés ?
html += "<li><a href='supplies/" + [Link][i] + "'>"
html += [Link][i] + "</a></li>"
Comparé au JavaScript d'origine, quelqu'un avec peu de connaissances de
votre code aurait beaucoup plus de facilité à comprendre l'EJS
extrait de modèle.
Maintenant, vous pouvez vous détendre et profiter de la sensation de propreté picotante.
Gestion des erreurs
Une bonne femme de ménage admet toujours ses erreurs. Si vous avez une erreur dans un
3 sur 5 08-05-2014 20:46
EJS - Modèles JavaScript [Link]
Modèle EJS, EJS indiquera le numéro de ligne exact où l'erreur se trouve
s'est produit sur. Tout ce que vous avez à faire est d'inclure ejs_jslint.js, que vous pouvez
télécharger sur Google Code. Si vous utilisez Firebug, le Firefox
plugin de débogage JavaScript, l'erreur apparaîtra directement dans votre
console.
Exemple de code de modèle cassé :
<ul>
<%foor(vari=0; i<[Link]; i++) { %>
<li> </li>
<%= link_to(supplies[i], 'fournitures/'+supplies[i]) %>
</li>
<% } %>
</ul>
Console Firebug :
Quand est-il bon de nettoyer ?
Certains diraient que le nettoyage devrait être une habitude quotidienne, mais nous pensons qu'EJS est un
assistant parfait si vous vous trouvez dans l'un de ces dilemmas :
1. Construire des chaînes HTML avec JavaScript.
Comme nous l'avons discuté dans ce tutoriel, le inconvénient de la chaîne HTML
la concaténation en JavaScript est la maintenabilité. Quand vous êtes
adding together HTML in JavaScript strings, its difficult to see
la vue d'ensemble de ce que vous créez - une représentation de
la mise en page de votre page. Utiliser des modèles rend la mise en page
plus facile car vous pouvez voir le HTML et conserver les sauts de ligne
et espacement.
2. Développement web AJAX avec des services web.
EJS accepte des JSON arrivant de manière asynchrone d'un web
service, transmet ces données dans un modèle de votre choix,
et insère le HTML résultant dans la page pour vous. Tout ce que vous
je dois écrire une ligne de code :
4 sur 5 08-05-2014 20:46
EJS - Modèles JavaScript [Link]
newEJS({url:'[Link]'}).update('element_id', '/[Link]')
Assez chouette, hein ?
3. Personnalisation de l'interface de l'application.
Si vous souhaitez donner aux utilisateurs le pouvoir de personnaliser le leur
look and feel, EJS fournit le mécanisme parfait. EJS
les modèles s'exécutent uniquement dans le navigateur, donc il n'y a pas de sécurité
risque pour votre serveur. Autoriser les utilisateurs à télécharger des modèles EJS
et les feuilles de style associées est le moyen le plus simple et le plus rapide de
personnalisez votre site.
Plus de conseils
Cire dessus, cire en dessous. Vous avez appris de bonnes techniques, mais le nettoyage
votre HTML en désordre n'est pas assez simple pour être enseigné en un seul tutoriel. Pour
plus d'infos, consultez ces ressources.
Documentation
Groupe Google EJS
Page de code Google EJS
Dépôt SVN