Il existe plusieurs systèmes structurants en javascript. Cependant, mon préféré est celui que j'ai développé en utilisant ajax pour récupérer des templates XML. Les modèles sont des fichiers XML qui le rend facile à intégrer proprement HTML et il ressemble à ceci:
<title>This is optional</title>
<body><![CDATA[
HTML content goes here, the CDATA block prevents XML errors
when using non-xhtml html.
<div id="more">
$CONTENT$ may be substituted using replace() before being
inserted into $DOCUMENT$.
</div>
]]></body>
<script><![CDATA[
/* javascript code to be evaled after template
* is inserted into document. This is to get around
* the fact that this templating system does not
* have its own turing complete programming language.
* Here's an example use:
*/
if ($HIDE_MORE$) {
document.getElementById('more').display = 'none';
}
]]></script>
Et le code javascript pour traiter le modèle ressemble à ceci:
function insertTemplate (url_to_template, insertion_point, substitutions) {
// Ajax call depends on the library you're using, this is my own style:
ajax(url_to_template, function (request) {
var xml = request.responseXML;
var title = xml.getElementsByTagName('title');
if (title) {
insertion_point.innerHTML += substitute_strings(title[0],substitutions);
}
var body = xml.getElementsByTagName('body');
if (body) {
insertion_point.innerHTML += substitute_strings(body[0],substitutions);
}
var script = xml.getElementsByTagName('script');
if (script) {
eval(substitute_strings(script[0],substitutions));
}
});
}
function substitute_strings (str, substitutions) {
for (var n in substitutions) {
str.replace(n,substitutions[n]);
}
return str;
}
La façon de appeler le modèle serait:
insertTemplate('http://path.to.my.template', myDiv, {
'$CONTENT$' : "The template's content",
'$DOCUMENT$' : "the document",
'$HIDE_MORE$' : 0
});
le signe $ pour les chaînes substituées est simplement une convention, vous pouvez utiliser % de # ou quels que soient les délimiteurs que vous préférez. C'est juste là pour rendre le rôle à substituer sans ambiguïté.
Un grand avantage à utiliser des substitutions du côté javascript au lieu du traitement côté serveur du modèle est que cela permet au modèle d'être des fichiers statiques. L'avantage de cela (autre que de ne pas avoir à écrire du code côté serveur) est que vous pouvez ensuite définir la stratégie de mise en cache pour le modèle pour être très agressif afin que le navigateur n'ait besoin de récupérer le modèle que la première fois. L'utilisation ultérieure du modèle proviendrait du cache et serait très rapide.
En outre, ceci est un exemple très simple de l'implémentation pour illustrer le mécanisme. Ce n'est pas ce que j'utilise. Vous pouvez modifier cela pour faire des choses comme la substitution multiple, une meilleure gestion du bloc de script, gérer plusieurs blocs de contenu en utilisant une boucle for au lieu d'utiliser simplement le premier élément retourné, gérer correctement les entités HTML, etc ...
comme ceci est que le HTML est simplement HTML dans un fichier de texte brut.Cela évite de citer des problèmes de performances de concaténation de chaînes et d'enfer horribles que vous trouverez généralement si vous intégrez directement des chaînes HTML en javascript.
Parce qu'il faut du temps pour faire un XHR pour chaque modèle? Ou avez-vous des moyens de contourner cela ou d'autres suggestions? – Tower
À moins que les modèles ne soient énormes, et que le serveur soit extrêmement ralenti, le temps devrait être négligeable (500ms à 2 secondes devrait être la norme) et vous ne le faites que lorsque vous avez besoin du modèle, pas tous en même temps. Après avoir récupéré le modèle, il suffit de le stocker dans une variable javascript pour pouvoir l'utiliser lorsque vous en avez besoin. –
@rFactor: Voir ma réponse pour savoir comment j'ai contourné ce problème. – slebetman