Un mini-moteur de template en Javascript, Part 1

Javascript est un langage fascinant par son côté tout objet. Quand je dis tout objet c'est réellement tout objet, le moindre tableau ou la moindre chaine de caractères est un objet que l'on peut facilement modifier et enrichir.

J'ai récemment joué avec ce qu'on appelle les prototypes d'objets en Javascript. Pour me simplifier la vie avec mes manipulations de DOM, j'ai étendu l'objet String pour lui ajouter un simple mais efficace système de templatisation de données JSON.

C'est l'occasion de partager ici cette méthode et d'aborder la théorie et la pratique dans deux petits articles sur le sujet.

En théorie

Tout d'abord qu'est-ce qu'un prototype ? Voyons ce que nous dit Wikipédia sur le sujet :

La programmation orientée prototype est une forme de programmation orientée objet sans classe, basée sur la notion de prototype. Un prototype est un objet à partir duquel on crée de nouveaux objets par clonage. En programmation orientée prototype, les membres d'un objet, attributs et méthodes, sont appelés slots ; il n'y a pas la distinction entre les slots de données et les slots de code qu'on a avec les classes. La grande différence avec la programmation objet à classes est qu'on peut remplacer le contenu des slots, en ajouter d'autres ou changer la hiérarchie d'héritage que cela soit prévu dans l'objet original ou pas.

En exemple

Soit ! Et en pratique ça donne quoi ? Ça donne qu'on peut bêtement ajouter, modifier ou supprimer des méthodes d'un objet original. Passons à quelques exemples :

Exemple 1 : Objet String

String.prototype.hurleFort = function() {
    return 'Youpi !!! '+ this + ' !!!';
}

Dorénavant, n'importe quelle chaine de caractères peut utiliser la méthode hurleFort().

var myString = "J'suis content"
alert(myString.hurleFort()); // retournera "Youpi !!! J'suis content !!!" 

Ou directement sous cette forme :

alert("J'suis content".hurleFort()); 

L'utilité de cette fonction est discutable je l'admets ;) Passons à quelque chose de plus concret. Un tableau de données est également un objet. Il peut donc être étendu. Créons une méthode qui enrichira les possibilités d'un Array.

Exemple 2 : Objet Array

Array.prototype.tireAuHasard = function() {
    rand = Math.round(Math.random() * this.length-1);
    return this[rand];
}

On pourra maintenant extraire une entrée au hasard de n'importe quel tableau.

var myArray = ['un', 'deux', 'trois', 'quatre'];
alert(myArray.tireAuHasard()); // retourne un élément au hasard 

Ou encore :

alert(['un', 'deux', 'trois', 'quatre'].tireAuHasard()); 

Assez d'exemples, passons maintenant à la pratique.

En pratique

Avec la démocratisation de la manipulation de DOM en Javascript, il est très fréquent d'avoir à insérer de longues portions de code HTML dans le document. Si cette portion de HTML est créée dynamiquement à partir d'une suite de variables ou d'un objet JSON ça devient vite fastidieux à gérer. On se retrouve très rapidement avec une cauchemardesque suite de boucles, de châines HTML et de variables.

J'aimerais me simplifier la vie en ayant la possibilité d'inclure des balises de type {myVar} dans du code HTML afin qu'elles soient remplacées par différentes valeurs au fil de l'application.

Sur le même principe que les exemples ci-dessus, j'améliore le prototype de l'objet String et lui ajoute une méthode template() qui remplace les balises par le contenu d'un objet JSON.

Fonction de template simple

/**
 * Un mini-moteur de template en Javascript, Part I
 * par Jay Salvat - http://blog.jaysalvat.com/
 */
String.prototype.template = function(values) {
    // récupération de la chaine
    var string = this.toString();
    // remplacement des tags {tag}
    for (tag in values) {    
        regexp = new RegExp('{'+ tag +'}', 'g');
        string = string.replace(regexp, values[tag]);
    }
    return string;
}

De cette manière on peut facilement mettre en forme un objet de données simple.

Exemple d'usage

<script type="text/javascript" src="template.js"></script>
<script type="text/javascript">
window.onload = function() {
    var someData = { name:'Pitt', firstname:'Brad' };
    var someHtml = "<p>{firstname} <b>{name}</b></p>";

    document.getElementById('test').innerHTML = someHtml.template( someData );
}
</script>
<div id="test"></div>

Vous l'aurez compris, cet exemple remplacera la contenu du div#test par :

<p>Brad <b>Pitt</b></p>

Fin de la première partie

Terminons ici la première partie de cet article. Cette fonction template() est bien sympathique mais trop simple pour être réellement utile. L'idéal serait de pouvoir lui passer directement des tableaux de données entiers et que les boucles soient également gérées par la méthode. Ainsi, on pourrait passer un objet JSON à n'importe quelle chaîne de HTML formatée pour le voir prendre la mise en forme voulue. C'est ce que nous réaliserons dans la suite de cet article disponible dès maintenant.

J'espère vous avoir éclairé sur les prototypes et la manière dont ils peuvent changer la vie avec les objets natifs.