Existe-t-il une bonne pratique pour générer du HTML avec JavaScript?

Question

J'appelle un service Web qui renvoie un tableau d'objets en JSON. Je veux prendre ces objets et peupler une div avec HTML. Disons que chaque objet contient une URL et un nom.

Si je voulais générer le code HTML suivant pour chaque objet:

<div><img src="the url" />the name</div>

Existe-t-il une meilleure pratique pour cela? Je peux voir quelques façons de le faire:

1. Concaténer des chaînes
2. Créer des éléments
3. Utiliser un plugin de template
4. Générez le code HTML sur le serveur, puis diffusez-le via JSON.

Answer 1

Les options 1 et 2 seront vos options les plus directes, mais vous ressentirez l’impact sur les performances et la maintenance de la construction de chaînes ou de la création d’objets DOM.

Les modèles ne sont pas si immatures et vous le voyez apparaître dans la plupart des principaux frameworks Javascript.

Voici un exemple de plug-in de modèle JQuery qui vous évitera de perdre des performances. vraiment, vraiment simple:

var t = $.template('<div><img src="${url}" />${name}</div>');

$(selector).append( t , {
     url: jsonObj.url,
     name: jsonObj.name
});

Je vous conseille de choisir la bonne voie (plus performante, plus facile à maintenir) et d’utiliser des modèles.

Answer 2

Si vous devez absolument concaténer des chaînes, au lieu de la normale:

var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }

utiliser un tableau temporaire:

var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");

L'utilisation de tableaux est beaucoup plus rapide, en particulier dans IE. J'ai fait des tests avec des chaînes il y a quelque temps avec IE7, Opera et FF. Opera n'a pris que 0,4 secondes pour effectuer le test, mais IE7 n'avait pas fini au bout de 20 minutes !!!! (Non, je ne plaisante pas.) Avec le tableau IE était très rapide.

Answer 3

L'une ou l'autre des deux premières options est commune et acceptable.

Je vais donner des exemples de chacun d'entre eux dans Prototype .

// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }

Approche n ° 1:

var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottom

Approche n ° 2:

var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom

Answer 4

Voici un exemple d'utilisation de mes modèles simples plug-in pour jQuery:

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);

Answer 5

Une approche plus moderne consisterait peut-être à utiliser un langage de modélisation tel que Moustache , qui possède des implémentations. dans de nombreuses langues, y compris javascript. Par exemple:

var view = {
  url: "/hello",
  name: function () {
    return 'Jo' + 'hn';
  }
};

var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);

Vous bénéficiez même d'un avantage supplémentaire: vous pouvez réutiliser les mêmes modèles ailleurs, par exemple sur le serveur.

Si vous avez besoin de modèles plus complexes (instructions, boucles, etc.), vous pouvez utiliser Guidons , qui contient d'autres éléments. fonctionnalités, et est compatible avec Moustache.

Answer 6

Vous pouvez ajouter le modèle HTML à votre page dans une div masquée, puis utiliser cloneNode et les fonctions d'interrogation de votre bibliothèque préférée pour le remplir

/* CSS */
.template {display:none;}

<!--HTML-->
<div class="template">
  <div class="container">
    <h1></h1>
    <img src="" alt="" />
  </div>
</div>

/*Javascript (using Prototype)*/
var copy = $(".template .container")[0].cloneNode(true);
myElement.appendChild(copy);
$(copy).select("h1").each(function(e) {/*do stuff to h1*/})
$(copy).select("img").each(function(e) {/*do stuff to img*/})

Answer 7

Divulgation: Je suis le mainteneur de BOB.

Il existe une bibliothèque JavaScript facilitant ce processus, appelée BOB .

Pour votre exemple spécifique:

<div><img src="the url" />the name</div>

Ceci peut être généré avec BOB avec le code suivant.

new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"

Ou avec la syntaxe la plus courte

new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"

Cette bibliothèque est assez puissante et peut être utilisée pour créer des structures très complexes avec insertion de données (similaire à d3), par exemple:

data = [1,2,3,4,5,6,7]
new BOB("div").i("ul#count").do(data).i("li.number").co(BOB.d).up().up().a("a",{"href": "www.google.com"}).s()
//=> "<div><ul id="count"><li class="number">1</li><li class="number">2</li><li class="number">3</li><li class="number">4</li><li class="number">5</li><li class="number">6</li><li class="number">7</li></ul></div><a href="www.google.com"></a>"

BOB ne prend actuellement pas en charge l’injection des données dans le DOM. C'est sur le todolist. Pour le moment, vous pouvez simplement utiliser la sortie avec JS ou jQuery normal et la placer où vous le souhaitez.

document.getElementById("parent").innerHTML = new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s();
//Or jquery:
$("#parent").append(new BOB("div").insert("img",{"src":"the url"}).up().content("the name").s());

J'ai créé cette bibliothèque parce que je n'étais pas satisfait des alternatives comme jquery et d3. Le code très compliqué et difficile à lire. Travailler avec BOB est à mon avis, ce qui est évidemment partial, beaucoup plus agréable.

BOB est disponible sur Bower . Vous pouvez donc l'obtenir en exécutant bower install BOB .

Answer 8

  

Existe-t-il une meilleure pratique pour cela? Je peux voir quelques façons de le faire:

     

  
1. Concaténer des chaînes
  
2. Créer des éléments
  
3. Utiliser un plugin de template
  
4. Générez le code HTML sur le serveur, puis diffusez-le via JSON.
  

1) Il s'agit d'une option. Construisez le code HTML avec JavaScript côté client, puis injectez-le dans le DOM dans son ensemble.

Notez qu’il existe un paradigme derrière cette approche: le serveur n’émet que des données et (en cas d’interaction) reçoit les données du client en asyncronoulsy avec des requêtes AJAX. Le code côté client est utilisé comme une application Web JavaScript autonome.

L'application Web peut fonctionner, afficher l'interface, même si le serveur n'est pas activé (bien sûr, aucune information ne sera affichée ni aucune interaction).

Ce paradigme est en train d'être adopté souvent récemment, et des cadres entiers sont construits autour de cette approche (voir backbone.js par exemple).

2) Pour des raisons de performances, dans la mesure du possible, il est préférable de créer le code HTML dans une chaîne, puis de l'injecter globalement dans la page.

3) : il s'agit d'une autre option, ainsi que l'adoption d'un framework d'application Web. D'autres utilisateurs ont publié divers moteurs de modèles disponibles. J'ai l'impression que vous avez les compétences pour les évaluer et décider de suivre cette voie ou non.

4) Une autre option. Mais servez-le en tant que texte brut / html; pourquoi JSON? Je n'aime pas cette approche car mélange PHP (votre langue de serveur) avec HTML. Mais je l’adopte souvent comme un compromis raisonnable entre l’option 1 et 4 .

Ma réponse: vous regardez déjà dans la bonne direction.

Je suggère d'adopter une approche entre 1 et 4 comme je le fais. Sinon, adoptez un framework Web ou un moteur de templates.

Juste mon opinion basée sur mon expérience ...