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. Angenommen, jedes Objekt enthält eine URL und einen Namen.

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

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

Gibt es dafür eine bewährte Methode? Ich kann ein paar Möglichkeiten sehen:

1. Verketten Sie Zeichenfolgen
2. Elemente erstellen
3. Verwenden Sie ein Vorlagen-Plugin
4. Generieren Sie das HTML auf dem Server und stellen Sie es dann über JSON bereit.

Die Optionen 1 und 2 sind Ihre unmittelbarsten Optionen. Bei beiden Optionen werden Sie jedoch die Auswirkungen auf Leistung und Wartung spüren, indem Sie entweder Zeichenfolgen erstellen oder DOM-Objekte erstellen.

Vorlagen sind nicht allzu unausgereift, und Sie sehen, dass sie in den meisten wichtigen Javascript-Frameworks angezeigt werden.

Hier ist ein Beispiel im JQuery Template Plugin , das Ihnen den Leistungseinbruch erspart und wirklich sehr, sehr einfach ist:

var t = $.template('<div><img src="${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 Vorlagen.

Wenn Sie unbedingt Zeichenfolgen anstelle der normalen verketten müssen:

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 durchgeführt. 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 beiden ersten Optionen ist allgemein und akzeptabel.

Ich werde Beispiele für jeden einzelnen in Prototype geben .

// 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

Ein moderner Ansatz besteht möglicherweise darin, eine Vorlagensprache wie Moustache zu verwenden , die in vielen Sprachen implementiert ist, einschließlich Javascript. Beispielsweise:

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

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

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

Wenn Sie kompliziertere Vorlagen benötigen (if-Anweisungen, Schleifen usw.), können Sie Lenker verwenden, die über mehr Funktionen verfügen und mit Moustache kompatibel sind.

Hier ist ein Beispiel für die Verwendung meines Plug-Ins für einfache Vorlagen 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);

Sie können die HTML-Vorlage in einem ausgeblendeten Div zu Ihrer Seite hinzufügen und dann cloneNode und die Abfragefunktionen Ihrer Lieblingsbibliothek 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 namens BOB , die diesen Prozess erheblich vereinfacht .

Für Ihr spezielles Beispiel:

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

Dies kann mit BOB durch den folgenden Code generiert werden.

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

Oder mit der kürzeren Syntax

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

Diese Bibliothek ist sehr leistungsfähig und kann verwendet werden, um sehr komplexe Strukturen mit Dateneinfügung (ähnlich wie d3) zu erstellen, z.

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 Injizieren der Daten in das DOM. Dies ist auf der todolist. Im Moment können Sie die Ausgabe einfach zusammen mit normalem JS oder jQuery verwenden und an einer beliebigen Stelle ablegen.

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());

Ich habe diese Bibliothek erstellt, weil ich mit keiner der Alternativen wie jquery und d3 zufrieden war. Der Code ist sehr kompliziert und schwer zu lesen. Die Arbeit mit BOB ist meiner Meinung nach, was offensichtlich voreingenommen ist, viel angenehmer.

BOB ist auf Bower verfügbar , sodass Sie es durch Ausführen erhalten können bower install BOB.

Gibt es dafür eine bewährte Methode? Ich kann ein paar Möglichkeiten sehen:

1. Verketten Sie Zeichenfolgen
2. Elemente erstellen
3. Verwenden Sie ein Vorlagen-Plugin
4. Generieren Sie das HTML auf dem Server und stellen Sie es dann über JSON bereit.

1) Dies ist eine Option. Erstellen Sie das HTML mit JavaScript auf der Clientseite und fügen Sie es dann in das gesamte DOM ein.

Beachten Sie, dass hinter diesem Ansatz ein Paradigma steckt: Der Server gibt nur Daten aus und empfängt (im Falle einer Interaktion) Daten vom Client asynchron mit AJAX-Anforderungen. Der clientseitige Code wird als eigenständige JavaScript-Webanwendung ausgeführt.

Die Webanwendung kann funktionieren, die Benutzeroberfläche rendern, auch ohne dass der Server aktiv ist (natürlich werden keine Daten angezeigt oder Interaktionen angeboten).

Dieses Paradigma wird in letzter Zeit häufig übernommen, und ganze Frameworks bauen auf diesem Ansatz auf (siehe beispielsweise backbone.js).

2) Aus Leistungsgründen ist es nach Möglichkeit besser, den HTML-Code in einer Zeichenfolge zu erstellen und ihn dann als Ganzes in die Seite einzufügen.

3) Dies ist eine weitere Option sowie die Übernahme eines Webanwendungsframeworks. Andere Benutzer haben verschiedene verfügbare Template-Engines veröffentlicht. Ich habe den Eindruck, dass Sie die Fähigkeiten haben, sie zu bewerten und zu entscheiden, ob Sie diesem Weg folgen oder nicht.

4) Eine weitere Option. Aber dienen Sie es als Klartext / HTML; warum JSON? Ich mag diesen Ansatz nicht, weil er PHP (Ihre Serversprache) mit HTML mischt. Aber ich nehme es oft als vernünftigen Kompromiss zwischen Option 1 und 4 an .

Meine Antwort: Sie schauen bereits in die richtige Richtung.

Ich schlage vor, einen Ansatz zwischen 1 und 4 zu wählen wie ich wählen. Verwenden Sie andernfalls ein Webframework oder eine Template-Engine.

Nur meine Meinung basiert auf meiner Erfahrung ...