Esiste una procedura ottimale per la generazione di HTML con JavaScript

Question

Sto chiamando un servizio Web che restituisce una matrice di oggetti in JSON. Voglio prendere quegli oggetti e popolare un div con HTML. Supponiamo che ogni oggetto contenga un URL e un nome.

Se volessi generare il seguente HTML per ogni oggetto:

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

Esiste una best practice per questo? Vedo alcuni modi per farlo:

1. Concatena le stringhe
2. Crea elementi
3. Utilizza un plugin di template
4. Genera l'html sul server, quindi pubblica tramite JSON.

Answer 1

Le opzioni n. 1 e n. 2 saranno le opzioni dirette più immediate, tuttavia, per entrambe le opzioni, sentirai l'impatto sulle prestazioni e sulla manutenzione costruendo stringhe o creando oggetti DOM.

Il templating non è poi così immaturo e lo stai vedendo pop-up nella maggior parte dei principali framework Javascript.

Ecco un esempio in Plugin modello JQuery che ti farà risparmiare il rendimento molto, molto semplice:

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

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

Dico che segui la strada giusta (e con prestazioni migliori, più mantenibili) e usa il modello.

Answer 2

Se devi assolutamente concatenare le stringhe, invece del normale:

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

usa un array temporaneo:

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

L'uso di array è molto più veloce, specialmente in IE. Qualche tempo fa ho fatto alcuni test con le stringhe con IE7, Opera e FF. Opera ha impiegato solo 0,4 per eseguire il test, ma IE7 non era terminato dopo 20 MINUTI !!!! (No, non sto scherzando.) Con l'array IE è stato molto veloce.

Answer 3

Ognuna delle prime due opzioni è sia comune che accettabile.

Fornirò esempi di ciascuno in Prototype .

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

Approccio n. 1:

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

Approccio 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

Ecco un esempio, usando i miei Modelli semplici plug-in per 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

Forse un approccio più moderno consiste nell'utilizzare un linguaggio di modello come Moustache , che ha implementazioni in molte lingue, incluso javascript. Ad esempio:

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

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

Ottieni anche un ulteriore vantaggio: puoi riutilizzare gli stessi modelli in altri luoghi, ad esempio sul lato server.

Se hai bisogno di modelli più complicati (se dichiarazioni, loop, ecc.), puoi utilizzare Manubri che ha più funzioni ed è compatibile con Moustache.

Answer 6

Puoi aggiungere il modello HTML alla tua pagina in un div nascosto e quindi utilizzare cloneNode e le strutture di query della tua libreria preferita per popolarlo

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

Divulgazione: sono il manutentore di BOB.

Esiste una libreria javascript che rende questo processo molto più semplice chiamato BOB .

Per il tuo esempio specifico:

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

Questo può essere generato con BOB con il seguente codice.

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

O con la sintassi più breve

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

Questa libreria è abbastanza potente e può essere utilizzata per creare strutture molto complesse con inserimento di dati (simile a d3), ad es .:

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 al momento non supporta l'iniezione dei dati nel DOM. Questo è sul todolist. Per ora puoi semplicemente usare l'output insieme al normale JS o jQuery e metterlo dove vuoi.

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

---

Ho creato questa libreria perché non ero soddisfatto di nessuna delle alternative come jquery e d3. Il codice è molto complicato e difficile da leggere. Lavorare con BOB è secondo me, che è ovviamente di parte, molto più piacevole.

BOB è disponibile su Bower , quindi puoi ottenerlo eseguendo bower installa BOB .

Answer 8

  

Esiste una best practice per questo? Vedo alcuni modi per farlo:

     

  
1. Concatena le stringhe
  
2. Crea elementi
  
3. Utilizza un plug-in per la creazione di modelli
  
4. Genera l'html sul server, quindi pubblica tramite JSON.
  

1) Questa è un'opzione. Costruisci l'html con JavaScript sul lato client e poi iniettalo nel DOM nel suo insieme.

Si noti che esiste un paradigma dietro questo approccio: il server emette solo dati e (in caso di interazione) riceve i dati dal client asincrono con richieste AJAX. Il codice lato client funziona come un'applicazione Web JavaScript autonoma.

L'applicazione web può funzionare, rendere l'interfaccia, anche senza che il server sia attivo (ovviamente non mostrerà alcun dato o offrirà alcun tipo di interazione).

Questo paradigma viene adottato spesso di recente e interi framework sono costruiti attorno a questo approccio (vedi backbone.js per esempio).

2) Per motivi di prestazioni, quando possibile, è meglio creare l'html in una stringa e quindi iniettarlo nel suo insieme nella pagina.

3) Questa è un'altra opzione, oltre all'adozione di un framework per applicazioni Web. Altri utenti hanno pubblicato vari motori di template disponibili. Ho l'impressione che tu abbia le competenze per valutarli e decidere se seguire o meno questo percorso.

4) Un'altra opzione. Ma servilo come un semplice testo / HTML; perché JSON? Non mi piace questo approccio perché mescola PHP (la lingua del tuo server) con HTML. Ma lo adotto spesso come un ragionevole compromesso tra l'opzione 1 e 4 .

---

La mia risposta: stai già guardando nella giusta direzione.

Suggerisco di adottare un approccio tra 1 e 4 come faccio io. Altrimenti adotta un framework web o un motore di template.

Solo la mia opinione basata sulla mia esperienza ...