javascript innerhtml - Existe-t-il une meilleure pratique pour générer html avec javascript




4 Answers

Les options # 1 et # 2 vont être vos options directes les plus immédiates, cependant, pour les deux options, vous allez ressentir l'impact sur les performances et la maintenance en construisant des chaînes ou en créant des objets DOM.

Templating n'est pas si immature, et vous le voyez popup dans la plupart des principaux frameworks Javascript.

Voici un exemple dans JQuery Template Plugin qui vous permettra d'économiser l'impact sur les performances, et est vraiment, vraiment simple:

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

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

Je dis aller la route cool (et plus performant, plus maintenable), et utiliser des modèles.

exemple value

J'appelle un service Web qui renvoie un tableau d'objets dans JSON. Je veux prendre ces objets et remplir 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>

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

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



Chacune des deux premières options est à la fois commune et acceptable.

Je vais donner des exemples de chacun 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



Peut-être une approche plus moderne est d'utiliser un langage de modèle tel que Mustache.js , qui a des implémentations dans de nombreuses langues, y compris le javascript. Par exemple:

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

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

Vous obtenez même un avantage supplémentaire - vous pouvez réutiliser les mêmes modèles dans d'autres endroits, tels que le côté serveur.

Si vous avez besoin de modèles plus compliqués (si des instructions, des boucles, etc.), vous pouvez utiliser Handlebars qui a plus de fonctionnalités, et est compatible avec Moustache.




Divulgation: Je suis le mainteneur de BOB.

Il y a une bibliothèque javascript qui rend ce processus beaucoup plus facile appelé BOB .

Pour votre exemple spécifique:

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

Cela peut être généré avec BOB par 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 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 l'instant vous pouvez simplement utiliser la sortie avec JS normal, ou jQuery, et le mettre où vous voulez.

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 fait cette bibliothèque parce que je n'étais pas satisfait de l'une des alternatives comme jquery et d3. Le code est très compliqué et difficile à lire. Travailler avec BOB est selon moi, évidemment biaisé, beaucoup plus agréable.

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




Related

javascript html ajax dynamic dhtml