jQuery - Best practice per la creazione di complessi frammenti HTML

Question

Esiste una best practice generale per la creazione di elementi HTML complessi in jQuery? Ho provato diversi modi.

Per prima cosa ho provato ad utilizzare createElement e concatenamento un sacco di coloro che insieme con appendTo e simili:

var badge = $(document.createElement("div")).attr("class", "wrapper1").appendTo("body"); 
$(document.createElement("div")).attr("class", "wrapper2").appendTo(".wrapper1"); 
$(document.createElement("table")).attr("class", "badgeBody").appendTo(".wrapper2"); 
$(document.createElement("tr")).attr("class", "row1").appendTo(".badgeBody"); 
$(document.createElement("td")).appendTo(".row1"); 
$(document.createElement("span")).attr("class", "badgeUnlocked").text("UNLOCKED! ").appendTo("td"); 
$(document.createElement("td")).attr("class", "badgeTitleText").appendTo(".row1"); 
$(document.createElement("span")).attr("class", "badgeTitle").text(name).appendTo(".badgeTitleText"); 
$(document.createElement("tr")).attr("class", "row2").appendTo(".badgeBody"); 
$(document.createElement("td")).appendTo(".row2"); 
$(document.createElement("img")).attr("src", imgUrl).appendTo(".row2 td"); 
$(document.createElement("td")).attr("class", "badgeText").appendTo(".row2"); 
$(document.createElement("span")).attr("class", "badgeDescription").text(description).appendTo(".badgeText"); 

Questo può essere agitato dal appendTo vuole aggiungere ad ogni elemento corrispondenti in modo tutto deve il proprio nome altrimenti va a finire per essere aggiunto ripetutamente dappertutto.

Poi ho cercato di creare un array e unendo insieme:

var badgeFragment = [ 
'<div><div id="'+ closeId+'" class="closeTab">X</div>', 
'<div id="'+ badgeId+'" class="wrapper1">', 
'<div class="wrapper2">', 
'<div class="badgeBody">', 
'<div class="badgeImage">', 
'<img src="'+ imgUrl +'">', 
'</div>', 
'<div class="badgeContents">', 
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>', 
'<div class="badgeTitle">'+ name +'</div>', 
'<div id="'+ textId+'" class="badgeDescription">'+ description +'</div>', 
'</div>', 
'<div style="clear:both"></div>', 
'</div></div></div></div></div>', 
] 

badgeFragment = $(badgeFragment.join('')); 

Questo sembra funzionare abbastanza bene, anche se in IE quando avrei messo un avviso ($ (badgeFragment) .text()) di solito è tornato vuoto (Questo era parte del debug di un problema più grande). Sono ovviamente un po 'nuova per jQuery (e anche Javascript realmente) in modo da provare e assicurarsi che questo non era il problema che ho provato un terzo metodo - gigante concatenazione di stringhe:

var badgeFragment = 
'<div><div id="'+ closeId+'" class="closeTab">X</div>' + 
'<div id="'+ badgeId+'" class="wrapper1">' + 
'<div class="wrapper2">' + 
'<div class="badgeBody">' + 
'<div class="badgeImage">' + 
'<img src="C:/Users/Ryan/Documents/icons/crystal_project/64x64/apps/chat.png">' + 
'</div>' + 
'<div class="badgeContents">' + 
'<div class="badgeUnlocked">ACHIEVEMENT UNLOCKED: </div>' + 
'<div class="badgeTitle">test</div>' + 
'<div id="'+ textId+'" class="badgeDescription">test</div>' + 
'</div>' + 
'<div style="clear:both"></div>' + 
'</div></div></div></div></div>'; 

è uno di questi metodi in generale considerato migliore degli altri? Non sono molto bravo con i vari profiler, quindi non sono sicuro di come verificarlo da solo. C'è anche la questione di sapere se tutti questi metodi sono compatibili con il cross browser.

Answer 1

con jQuery 1.4, è possibile creare elementi HTML in questo modo:

// create an element with an object literal, defining properties 
var e = $("<a />", { 
    href: "#", 
    "class": "a-class another-class", // you need to quote "class" since it's a reserved keyword 
    title: "..." 
}); 

// add the element to the body 
$("body").append(e); 

Ecco a link to the documentation.

Non sono sicuro che questo approccio sia più veloce rispetto all'utilizzo della funzione html() di jQuery. O più veloce di saltare jQuery tutti insieme e utilizzare la proprietà innerHTML su un elemento. Ma per quanto riguarda la leggibilità va; l'approccio jQuery è il mio preferito. E nella maggior parte dei casi il guadagno di prestazioni nell'uso di innerHTML è marginale.

Answer 2

Personalmente penso che sia più importante che il codice sia leggibile e modificabile di performante. Chiunque trovi più facile guardare e apportare modifiche senza romperlo dovrebbe essere quello che scegli.

Answer 3

Non è necessario chiamare document.createElement:

$('#existingContainer').append(
    $('<div/>') 
    .attr("id", "newDiv1") 
    .addClass("newDiv purple bloated") 
    .append("<span/>") 
     .text("hello world") 
); 

Ci sono tutti i tipi di strumenti utili a jQuery per l'estensione/ammending DOM. Guarda i vari metodi "avvolgere" per esempio.

Un'altra possibilità: per grandi quantità di nuovi contenuti, potrebbe essere meglio avere i server che li preparano (utilizzando il sistema di templating sul lato server, qualunque cosa sia per voi) e recuperare quelli con $.load() o qualche altro approccio ajax .

Answer 4

sarei propenso a guardare uno dei motori di template per jQuery come jQote

Answer 5

John Resig (creatore di jQuery) ha suggerito di utilizzare questo metodo di template nel 2008. E 'in realtà ha alcune caratteristiche piuttosto interessanti:

<script type="text/html" id="item_tmpl"> 

    <div id="<%=id%>" class="<%=(i % 2 == 1 ? " even" : "")%>"> 
    <div class="grid_1 alpha right"> 
     <img class="righted" src="<%=profile_image_url%>"/> 
    </div> 
    <div class="grid_6 omega contents"> 
     <p><b><a href="/<%=from_user%>"><%=from_user%></a>:</b> <%=text%></p> 
    </div> 
    </div> 

</script> 

quindi il recupero utilizzando ...

var results = document.getElementById("results"); 
results.innerHTML = tmpl("item_tmpl", dataObject); 

Vedi qui per maggiori dettagli:
http://ejohn.org/blog/javascript-micro-templating/

Answer 6

Il modo in cui sto facendo è mostrato sotto. Non sono sicuro che dovresti creare così tanti div, ma ha funzionato molto bene con me.

var div1 = $('<div class="colwrap_fof"></div>');  //THE COMPLEX DIV ITSELF 
var div2 = $('<div class="homeimg"></div>');     
var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>'); 
var div22 = $('<div id="frontImageDiv'+fof_index+'" class="frontDiv"></div>'); 
div2.append(div21); 
div2.append(div22); 
div1.append(div2); 
$("#df_background").append(div1);  // ADDING the complex div to the right place  

Cheers,

Answer 7

mi piace il linguaggio di template Handlebars.js

Answer 8

E 'più leggibile e gestibile se il codice JavaScript assomiglia alla struttura dei tag HTML. Puoi usare il percorso jQuery ufficiale usando $ ('div', {'classe': 'etc'}) ...

Ecco un approccio leggermente diverso usando una funzione $$ per rendere ogni elemento un oggetto jQuery modificabile . Dovrebbe essere piuttosto veloce in quanto non vi è alcuna analisi html in atto.

$$('div', {'id':'container'}, 
    $$('div', {'id':'my_div'}, 
     $$('h1',{'class':'my_header'}, 
      $$('a',{'href':'/test/', 'class':'my_a_class'}, 'teststring')))); 

Questo rende l'approccio più flessibile e si può aggiungere gestori di eventi, dati ecc per gli oggetti nidificati jQuery utilizzando il concatenamento abbastanza facilmente per esempio

$$('div', {'id':'container'}, 
    $$('div', {'id':'my_div'}, 
     $$('h1',{'class':'my_header'}, 
      $$('a', { 'href': '/test/', 'class': 'my_a_class' }, 'teststring') 
     ).click(function() { alert('clicking on the header'); }) 
    ).data('data for the div') 
).hide(); 

il codice è più leggibile rispetto se si dovesse utilizzare l'approccio ufficiale jQuery di farlo con chiamate separate per .Append(), .text(), .html(), ecc o alimentando il jQuery $ una stringa HTML concatenata.

funzione Riferimento $$:

function $$(tagName, attrTextOrElems) { 
    // Get the arguments coming after the params argument 
    var children = []; 
    for (var _i = 0; _i < (arguments.length - 2) ; _i++) { 
     children[_i] = arguments[_i + 2]; 
    } 

    // Quick way of creating a javascript element without JQuery parsing a string and creating the element 
    var elem = document.createElement(tagName); 
    var $elem = $(elem); 

    // Add any text, nested jQuery elements or attributes 
    if (attrTextOrElems) { 
     if (typeof attrTextOrElems === "string") { // text 
      var text = document.createTextNode(attrTextOrElems); 
      elem.appendChild(text); 
     } 
     else if (attrTextOrElems instanceof jQuery) { // JQuery elem 
      $elem.append(attrTextOrElems); 
     } 
     else // Otherwise an object specifying attributes e.g. { 'class': 'someClass' } 
     { 
      for (var key in attrTextOrElems) { 
       var val = attrTextOrElems[key]; 
       if (val) { 
        elem.setAttribute(key, val); 
       } 
      } 
     } 
    } 

    // Add any further child elements or text  
    if (children) { 
     for (var i = 0; i < children.length; i++) { 
      var child = children[i]; 
      if (typeof child === "string") { // text 
       var text = document.createTextNode(child); 
       elem.appendChild(text); 
      } else { // JQuery elem 
       $elem.append(child); 
      } 
     } 
    } 
    return $elem; 
}