Gibt es eine bewährte Methode html mit Javascript zum Erzeugen

Question

Ich rufe einen Web-Service, der ein Array von Objekten in JSON zurückgibt. Ich mag diese Objekte nehmen und ein div mit HTML zu füllen. Sagen wir jedes Objekt eine URL und einen Namen enthält.

Wenn ich wollte den folgenden HTML für jedes Objekt erzeugen:

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

Gibt es eine bewährte Methode für das? Ich kann ein paar Möglichkeiten, es zu tun sehen:

1. Concatenate Strings
2. Erstellen Elemente
3. Verwenden Sie eine Templating-Plugin
4. Generieren Sie die HTML-Datei auf dem Server, dann über JSON dienen werden.

Answer 1

Optionen # 1 und # 2 werden Ihre unmittelbarste geradeaus Optionen sein, aber für beide Optionen, Sie gehen die Leistung und Wartung Auswirkungen entweder durch Gebäude Strings oder das Erstellen von DOM-Objekte fühlen.

Templating ist gar nicht so unreif, und Sie sehen, es Pop-up in den meisten großen Javascript-Frameworks.

Hier ist ein Beispiel in JQuery Template Plugin , dass Sie die Performance-Einbußen sparen, und ist wirklich, wirklich einfach:

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

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

Ich sage die kühlen Weg gehen (und eine bessere Leistung, mehr wartbar), und verwenden Sie Templating.

Answer 2

Wenn Sie unbedingt Strings verketten müssen, statt der normalen:

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

ein temporäres Array verwenden:

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

Arrays zu verwenden ist viel schneller, vor allem im Internet Explorer. Ich habe einige Tests mit Streichern vor einer Weile mit IE7, Opera und FF. Opera nahm 0,4s nur den Test durchzuführen, aber IE7 hatte nach 20 Minuten noch nicht fertig !!!! (Nein, ich bin kein Scherz). Mit Array IE war sehr schnell.

Answer 3

Eine der ersten beiden Optionen ist sowohl gemeinsame als auch akzeptabel.

Ich gebe Beispiele für jedes in Prototype .

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

Answer 4

Hier ist ein Beispiel, mit meinem Einfache Vorlagen Plug-in 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);

Answer 5

Vielleicht ein moderner Ansatz ist es, eine Template-Sprache zu verwenden, wie zum Beispiel Schnurrbart , die Implementierungen hat in vielen Sprachen, einschließlich Javascript. Zum Beispiel:

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

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

Sie noch einen zusätzlichen Vorteil erhalten - Sie die gleichen Vorlagen in anderen Orten wiederverwendet werden können, wie die Server-Seite

.

Wenn Sie kompliziertere Vorlagen müssen (wenn Anweisungen, Schleifen, etc.), können Sie Lenker denen mehr Features und ist kompatibel mit dem Schnurrbart.

Answer 6

Sie können die Vorlage in HTML zu Ihrer Seite in einer versteckten div hinzufügen und verwenden Sie dann cloneNode und Ihre Lieblings-Bibliothek anfragende Einrichtungen um es 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*/})

Answer 7

Disclosure: Ich bin der Maintainer von BOB.

Es ist eine JavaScript-Bibliothek, die diesen Prozess macht viel einfacher namens BOB .

Für Ihr konkretes Beispiel:

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

Dies kann mit BOB durch den folgenden Code erzeugt 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 sehr mächtig ist und verwendet werden kann, mit Einfügen von Daten (ähnlich d3), zB sehr komplexe Strukturen zu schaffen.

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 derzeit nicht unterstützt, die Daten in das DOM zu injizieren. Dies ist auf dem todolist. Denn jetzt können Sie einfach die Ausgabe zusammen mit dem normalen JS verwenden oder jQuery, und legen Sie sie, wo immer Sie wollen.

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, weil ich mit einem der Alternativen wie jquery und d3 nicht zufrieden war. Der Code ist sehr kompliziert und schwer zu lesen. Arbeiten mit BOB ist meiner Meinung nach, die offensichtlich voreingenommen ist, viel angenehmer.

BOB ist auf Bower , damit Sie es, indem Sie bower install BOB bekommen kann.

Answer 8

  

Gibt es eine bewährte Methode für das? Ich kann ein paar Möglichkeiten, es zu tun sehen:

     

  
1. Concatenate Strings
  
2. Erstellen Elemente
  
3. Verwenden Sie eine Templating-Plugin
  
4. Generieren Sie die HTML-Datei auf dem Server, dann über JSON dienen werden.
  

1) Dies ist eine Option. Bauen Sie die HTML mit JavaScript auf der Clientseite und dann injizieren es im DOM als Ganze.

Beachten Sie, dass ein Paradigma hinter diesem Ansatz ist: die Server gibt nur Daten und (im Fall der Interaktion) empfängt Daten vom Client asyncronoulsy mit AJAX-Anforderungen. Die Client-Seite Code operete als Stand-alone-JavaScript-Web-Anwendung.

Die Web-Anwendung arbeiten kann, macht die Schnittstelle, auch ohne dass der Server ist auf (natürlich wird es keine Daten angezeigt werden oder irgendeine Art von Interaktion bieten).

Dieses Paradigma wird immer oft in letzter Zeit angenommen und ganze Gerüste werden, um dieses Konzept bauen (siehe Backbone.js zum Beispiel).

2) Aus Gründen der Performance, wenn möglich, besser ist es, die html in einem String zu bauen und sie dann als Ganze in der Seite injizieren.

3) Dies ist eine weitere Option, sowie ein Web Application Framework übernehmen. Andere Benutzer haben verschiedene Templating Engines verfügbar geschrieben. Ich habe den Eindruck, dass Sie die Fähigkeiten haben, um sie zu bewerten und zu entscheiden, ob auf diesem Weg folgen oder nicht.

4) Eine weitere Option. Aber dienen sie oben als reinen text / html; warum JSON? Ich mag diesen Ansatz nicht, weil mischt PHP (Server Sprache) mit HTML. Aber ich es annehmen oft als vernünftigen Kompromiss zwischen Option 1 und 4 .

---

Meine Antwort. Sie suchen bereits in der richtigen Richtung

Ich schlage vor, eine Annäherung zwischen 1 und 4 zu übernehmen, wie ich tue. Andernfalls bitte einen Motor Web-Framework oder Templating nehmen.

Nur meine Meinung auf Grund meiner Erfahrung ...