Existe uma prática recomendada para gerar html com javascript

Question

Eu estou chamando um serviço web que retorna uma matriz de objetos em JSON. Eu quero levar esses objetos e preencher uma div com HTML. Digamos cada objeto contém uma URL e um nome.

Se eu quisesse gerar o seguinte HTML para cada objeto:

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

Existe uma prática recomendada para isso? Eu posso ver algumas maneiras de fazê-lo:

1. concatenar strings
2. Criar elementos
3. Use a modelagem plug-in
4. Gerar o html no servidor, em seguida, servir-se através de JSON.

Answer 1

Opções # 1 e # 2 vão ser sua a maioria das opções para a frente em linha reta imediatos, no entanto, para ambas as opções, você vai sentir o impacto de desempenho e manutenção por strings de construção ou a criação de objetos DOM.

Templating não é tão imaturo, e você está vendo pop-up na maioria dos principais frameworks JavaScript.

Aqui está um exemplo em JQuery Template Plugin que você vai economizar o impacto no desempenho, e é muito, muito simples:

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

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

Eu digo ir a rota legal (e melhor desempenho, mais sustentável), e da utilização de templates.

Answer 2

Se você absolutamente tem que cordas concatenar, em vez do normal:

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

usar uma matriz temporária:

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

O uso de matrizes é muito mais rápido, especialmente no IE. Eu fiz alguns testes com cordas um tempo atrás com o IE7, Opera e FF. Opera levou apenas 0.4s para realizar o teste, mas IE7 não tinha terminado após 20 minutos !!!! (Não, eu não estou brincando.) Com variedade IE foi muito rápido.

Answer 3

Qualquer uma das duas primeiras opções é tanto comum e aceitável.

Vou dar exemplos de cada um em Prototype .

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

Abordagem # 1:

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

Abordagem # 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

Aqui está um exemplo, usando a minha Simples Modelos plug-in para 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

Talvez uma abordagem mais moderna é usar uma linguagem de templates, como Bigode , que tem implementações em muitas línguas, incluindo javascript. Por exemplo:

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

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

Você ainda obter um benefício adicional -. Você pode reutilizar os mesmos modelos em outros lugares, como o lado do servidor

Se precisar de modelos mais complicado (se declarações, loops, etc.), você pode usar Guidão que tem mais características, e é compatível com bigode.

Answer 6

Você pode adicionar o HTML modelo para sua página em um div oculto e, em seguida, usar cloneNode e instalações Consultando da sua biblioteca favorito para preenchê-lo

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

Divulgação: Eu sou o mantenedor do BOB.

Há uma biblioteca JavaScript que torna este processo muito mais fácil chamado BOB .

Para o seu exemplo específico:

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

Isto pode ser gerado com BOB pelo seguinte código.

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

Ou com o menor sintaxe

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

Esta biblioteca é muito potente e pode ser usado para criar estruturas muito complexas com inserção de dados (semelhante a d 3), por exemplo:.

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 faz atualmente não suporta injetar os dados no DOM. Esta é a todolist. Por agora você pode simplesmente usar a saída juntamente com JS normal, ou jQuery, e colocá-lo onde quiser.

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

---

Eu fiz esta biblioteca porque eu não estava satisfeito com nenhuma das alternativas como jQuery e d3. O código muito complicado e difícil de ler. Trabalhando com BOB é na minha opinião, que é obviamente tendenciosa, muito mais agradável.

BOB está disponível em Bower , para que possa obtê-lo, executando bower install BOB.

Answer 8

Existe uma prática recomendada para isso? Eu posso ver algumas maneiras de fazê-lo:

1. concatenar strings
2. Criar elementos
3. Use a modelagem plug-in
4. Gerar o html no servidor, em seguida, servir-se através de JSON.

1) Esta é uma opção. Construir o HTML com JavaScript no lado do cliente e depois injetá-lo no DOM como um todo.

Note que existe um paradigma por trás dessa abordagem: o servidor envia dados apenas e (no caso de interação) recebe dados do asyncronoulsy cliente com solicitações de AJAX. O código operete lado do cliente como uma aplicação web JavaScript stand-alone.

A aplicação web pode operar, tornar a interface, mesmo sem o servidor ser-se (é claro que não irá exibir quaisquer dados ou oferecer qualquer tipo de interação).

Este paradigma está sendo adotada muitas vezes ultimamente, e estruturas inteiras são construídas em torno desta abordagem (ver Backbone.js por exemplo).

2) Por motivos de desempenho, quando possível, é melhor para construir o html em uma corda e depois injetá-lo como um todo dentro da página.

3) Esta é outra opção, bem como a adopção de uma estrutura de aplicativo Web. Outros usuários postaram vários motores de templates disponíveis. Eu tenho a impressão de que você tem as habilidades para avaliá-las e decidir se a seguir este caminho ou não.

4) Outra opção. Mas servi-lo como um texto simples / html; porque JSON? Eu não gosto dessa abordagem porque misturas PHP (seu idioma servidor) com HTML. Mas eu adotá-lo muitas vezes como um compromisso razoável entre a opção 1 e 4 .

---

A minha resposta:. Você já está olhando na direção certa

Eu sugiro a adotar uma aproximação entre 1 e 4 como eu faço. Caso contrário adotar um framework web ou motor de templates.

Apenas a minha opinião baseada na minha experiência ...