Gibt es eine bewährte Methode zum Generieren von HTML mit Javascript?

Ich rufe einen Webdienst auf, der ein Array von Objekten in JSON zurückgibt. Ich möchte diese Objekte nehmen und ein Div mit HTML füllen. Nehmen wir an, jedes Objekt enthält eine URL und einen Namen.

Wenn ich für jedes Objekt folgenden HTML-Code generieren wollte:

<div><img src="https://stackoverflow.com/questions/220603/the%20url" />the name</div>

Gibt es dafür eine Best Practice? Ich sehe ein paar Möglichkeiten, dies zu tun:

1. Strings verketten
2. Elemente erstellen
3. Verwenden Sie ein Vorlagen-Plugin
4. Generieren Sie den HTML-Code auf dem Server und stellen Sie ihn dann über JSON bereit.

Die Optionen 1 und 2 werden Ihre direktesten Optionen sein, jedoch werden Sie bei beiden Optionen die Auswirkungen auf Leistung und Wartung spüren, indem Sie entweder Strings erstellen oder DOM-Objekte erstellen.

Das Erstellen von Vorlagen ist nicht so unausgereift, und Sie sehen es in den meisten großen Javascript-Frameworks als Popup.

Hier ist ein Beispiel in JQuery-Vorlagen-Plugin Das erspart Ihnen den Leistungseinbruch und ist wirklich, wirklich einfach:

var t = $.template('<div><img src="https://stackoverflow.com/questions/220603/${url}" />${name}</div>');

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

Ich sage, gehen Sie den coolen Weg (und leistungsfähiger, wartbarer) und verwenden Sie Templating.

Wenn Sie unbedingt Strings verketten müssen, statt wie üblich:

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

Verwenden Sie ein temporäres Array:

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

Die Verwendung von Arrays ist viel schneller, insbesondere im IE. Ich habe vor einiger Zeit einige Tests mit Strings mit IE7, Opera und FF gemacht. Opera brauchte nur 0,4 Sekunden, um den Test durchzuführen, aber IE7 war nach 20 MINUTEN noch nicht fertig !!!! (Nein, ich mache keine Witze.) Mit Array war IE sehr schnell.

Jede der ersten beiden Optionen ist sowohl üblich als auch akzeptabel.

Ich werde Beispiele für jeden geben in Prototyp.

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

Ansatz #1:

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

Ansatz #2:

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

Hier ist ein Beispiel mit my Einfache Vorlagen Plugin für jQuery:

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

Ein modernerer Ansatz ist vielleicht die Verwendung einer Vorlagensprache wie z Schnurrbart, das Implementierungen in vielen Sprachen hat, einschließlich Javascript. Beispielsweise:

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

var output = Mustache.render('<div><img src="https://stackoverflow.com/questions/220603/{{url}}" />{{name}}</div>', view);

Sie erhalten sogar einen zusätzlichen Vorteil – Sie können dieselben Vorlagen an anderen Stellen wiederverwenden, beispielsweise auf der Serverseite.

Wenn Sie kompliziertere Vorlagen benötigen (if-Anweisungen, Schleifen usw.), können Sie Lenker die mehr Funktionen hat und mit Moustache kompatibel ist.

Sie können die HTML-Vorlage zu Ihrer Seite in einem versteckten Div hinzufügen und dann cloneNode und die Abfragefunktionen Ihrer bevorzugten Bibliothek verwenden, um sie zu füllen.

/* 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*/})

Offenlegung: Ich bin der Betreuer von BOB.

Es gibt eine Javascript-Bibliothek, die diesen Prozess viel einfacher macht namens BOB.

Für Ihr konkretes Beispiel:

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

Dies kann mit BOB durch den folgenden Code generiert werden.

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

Oder mit der kürzeren Syntax

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

Diese Bibliothek ist sehr mächtig und kann verwendet werden, um sehr komplexe Strukturen mit Dateneinfügung zu erstellen (ähnlich wie d3), zB:

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 unterstützt derzeit nicht das Einfügen der Daten in das DOM. Das steht auf der Todoliste. Im Moment können Sie die Ausgabe einfach zusammen mit normalem JS oder jQuery verwenden und an einer beliebigen Stelle platzieren.

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

Ich habe diese Bibliothek erstellt, weil mir keine der Alternativen wie jquery und d3 gefallen hat. Der Code sehr kompliziert und schwer zu lesen. Die Arbeit mit BOB ist meiner Meinung nach, die offensichtlich voreingenommen ist, viel angenehmer.

BOB ist verfügbar auf Laube, damit du es bekommen kannst, indem du läufst bower install BOB.