Je vais vous présenter un peu une petite librairie que j’aime bien utiliser.
Il s’agit de Mustache.
Pour ceux qui aiment les tutos vidéo, en voici un excellent sur Grafikart .
Il ne dure que 6mn en réalité, car il y a des “mauvais” exemple en début de vidéo.
C’est dire la simplicité de la chose librairie.
Donc Mustache, c’est quoi? Un petit moteur de template qui va se contenter d’utiliser des variables dans du HTML.

Avant, on mettait dans en JS, on faisait :


foo+= '<div class="article">';
foo+= '<p>'+contenu+'</p>';
foo+= '</div>';

Puis un bon gros $('.page').html(foo);
Pas très propre. Il y a des solutions +/- propres et maintenables, avec ou sans duplication, c’est là qu’intervient Mustache.
Maintenant, on va écrire:

<div class="bloc">{{contenu}}</div>

puis en JS :

Mustache.render(
    monBloc,
    {
        contenu: "mon contenu<u>HTML</u>"
    }
);

Avec monBloc le contenu HTML. Et … c’est tout!
Pour aller légèrement plus loin, on peut utiliser des conditions if/else etc.

{{#title}} // = si title existe
    <h1>{{{title}}}</h1>
{{/title}} // finSi

{{^title}} // sinon
    Pas de titre
{{/title}} // finSinon

Je n’ai pas trouvé comment faire des && ou || (mais le peut-on ?) Concrètement, je l’utilise pour les modales, pour éviter d’avoir 10 modales différentes déclarées dans ma page.

<div id="modal" aria-hidden="true" role="dialog" tabindex="-1" class="modal fade">
  <div class="modal-dialog modal-xs">
      <div class="modal-header">
        <button aria-label="Close" data-dismiss="modal" class="close" type="button">
            <i aria-hidden="true" class="icons-close">
        </button>
        {{#title}}
            <h1>{{{title}}}</h1>
        {{/title}}
        {{^title}} Modale {{/title}} // mon titre sera "Modale" si je n'ai pas de title
        {{#title2}}
            <h1>{{{title2}}}</h1>
        {{/title2}}
      </div>
      <div class="modal-content">
        {{{content}}} // j'ai utilisé des triples accolades pour échapper les caractères HTML.
        <div class="clear"></div>
      </div>
      <div class="modal-footer">
          {{#cancel}}
              <button type="button" class="btn btn-default" data-dismiss="modal">{{cancel}}
          {{/cancel}}
          {{#valid}}
              <button type="button" class="btn btn-primary">{{valid}}
          {{/valid}}
      </div>
  </div>
</div>
function messageModalError(){
    showModal(
        "Erreur",
        "Vous avez une erreur",
        "Une erreur s'est produite. Veuillez réessayer ultérieurement.",
        "Annuler",
        "Valider"
    );
}
function showModal(titre1, titre2, cont, canc, vali){
    $("#modal").append(Mustache.render(modal, {
        title : titre1,
        title2 : titre2,
        content : cont,
        cancel : canc,
        valid : vali
    }));
    $("#modal").modal("show");
    return false;
}

(modal est ma modal, je la remplace juste avec mon nouveau contenu). Et au tout début de mon JS:

// modales 
var modal = $("#modal").html(); 
//et on la vide 
$('#modal').empty();

Ainsi, dans un appel Ajax par exemple, si je veux afficher un message d’erreur en cas d’echec, on appelle messageModalError() et cela aura pour effet d’afficher directement ma modale avec mon message d’erreur. On peut aussi variabiliser mes noms dans messageModalError() par des variables de i18n, le module d’internationalisation, par exemple.
Pour aller un peu plus loin, on peut aussi s’intéresser à Handlebar, peut-être que je ferais un article dessus si vous êtes sage.

Site officiel: https://mustache.github.io/