JSON'da bir dizi nesne döndüren bir web hizmetini arıyorum. Bu nesneleri alıp HTML ile bir div oluşturmak istiyorum. Her nesnenin bir url ve bir ad içerdiğini varsayalım.
Her nesne için aşağıdaki HTML'yi oluşturmak istersem:
<div><img src="the url" />the name</div>Bunun için bir en iyi uygulama var mı? Bunu yapmanın birkaç yolunu görebiliyorum:
Yanıtlar:
Seçenekler # 1 ve # 2, en acil ve basit seçenekleriniz olacak, ancak her iki seçenek için de dizeler oluşturarak veya DOM nesneleri oluşturarak performans ve bakım etkisini hissedeceksiniz.
Şablon oluşturma o kadar da olgunlaşmamış değil ve büyük Javascript çerçevelerinin çoğunda açılır pencereyi görüyorsunuz.
İşte JQuery Şablon Eklentisinde sizi performans artışından kurtaracak ve gerçekten çok basit olan bir örnek:
var t = $.template('<div><img src="${url}" />${name}</div>');
$(selector).append( t , {
url: jsonObj.url,
name: jsonObj.name
});Harika rotaya gidin (ve daha iyi performans gösteren, daha sürdürülebilir) ve şablonlama kullanın derim.
Normal yerine dizeleri kesinlikle birleştirmeniz gerekiyorsa:
var s="";
for (var i=0; i < 200; ++i) {s += "testing"; }geçici bir dizi kullanın:
var s=[];
for (var i=0; i < 200; ++i) { s.push("testing"); }
s = s.join("");Dizi kullanmak, özellikle IE'de çok daha hızlıdır. Bir süre önce IE7, Opera ve FF ile dizelerle bazı testler yaptım. Opera testi gerçekleştirmek için yalnızca 0,4 saniye sürdü, ancak IE7 20 DAKİKA sonra bitirmemişti !!!! (Hayır, şaka yapmıyorum.) Dizi ile IE çok hızlıydı.
İlk iki seçenekten biri hem yaygın hem de kabul edilebilir.
Prototip'te her biri için örnekler vereceğim .
// assuming JSON looks like this:
// { 'src': 'foo/bar.jpg', 'name': 'Lorem ipsum' }Yaklaşım 1:
var html = "<div><img src='#{src}' /> #{name}</div>".interpolate(json);
$('container').insert(html); // inserts at bottomYaklaşım # 2:
var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottomBelki daha modern bir yaklaşım gibi bir şablon dili kullanmaktır Bıyık javascript dahil olmak üzere birçok dilde uygulamaları bulunmaktadır. Örneğin:
var view = {
url: "/hello",
name: function () {
return 'Jo' + 'hn';
}
};
var output = Mustache.render('<div><img src="{{url}}" />{{name}}</div>', view);Hatta ek bir avantaj elde edersiniz - aynı şablonları sunucu tarafı gibi başka yerlerde yeniden kullanabilirsiniz.
(İfadeler, döngüler, vb ise), kullanabilirsiniz daha karmaşık şablonlar gerekiyorsa Gidonu fazla özellik vardır ve Bıyık ile uyumlu olan.
JQuery için Simple Templates eklentimi kullanan bir örnek :
var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
classname : 'my-class',
content : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);Şablon HTML'yi sayfanıza gizli bir div'de ekleyebilir ve ardından onu doldurmak için cloneNode'u ve en sevdiğiniz kitaplığın sorgulama olanaklarını kullanabilirsiniz.
/* 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*/})Açıklama: BOB'un geliştiricisiyim.
Size özel örnek için:
<div><img src="the url" />the name</div>Bu, aşağıdaki kodla BOB ile oluşturulabilir.
new BOB("div").insert("img",{"src":"the url"}).up().content("the name").toString()
//=> "<div><img src="the url" />the name</div>"Veya daha kısa sözdizimiyle
new BOB("div").i("img",{"src":"the url"}).up().co("the name").s()
//=> "<div><img src="the url" />the name</div>"Bu kütüphane oldukça güçlüdür ve veri ekleme (d3'e benzer) ile çok karmaşık yapılar oluşturmak için kullanılabilir, örn .:
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 şu anda verilerin DOM'a enjekte edilmesini desteklemiyor. Bu todolist'te. Şimdilik, çıktıyı normal JS veya jQuery ile birlikte kullanabilir ve istediğiniz yere koyabilirsiniz.
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());Bu kütüphaneyi jquery ve d3 gibi alternatiflerin hiçbirinden memnun olmadığım için yaptım. Kod çok karmaşık ve okunması zor. BOB ile çalışmak bence, açıkçası önyargılı, çok daha keyifli.
BOB geçerli Bower çalıştırmakta bunu alabilmesi için, bower install BOB.
Bunun için bir en iyi uygulama var mı? Bunu yapmanın birkaç yolunu görebiliyorum:
- Dizeleri birleştir
- Öğeler oluşturun
- Şablon eklentisi kullanın
- Sunucuda html'yi oluşturun, ardından JSON aracılığıyla sunun.
1) Bu bir seçenektir. İstemci tarafında JavaScript ile html'yi oluşturun ve ardından DOM'a bir bütün olarak enjekte edin.
Bu yaklaşımın arkasında bir paradigma olduğuna dikkat edin: sunucu yalnızca veri çıkarır ve (etkileşim durumunda), AJAX talepleriyle birlikte istemciden eşzamansız veri alır. İstemci tarafı kodu, bağımsız bir JavaScript web uygulaması olarak çalışır.
Web uygulaması, sunucu açıkken bile çalışabilir, arayüzü oluşturabilir (tabii ki herhangi bir veri göstermez veya herhangi bir etkileşim sunmaz).
Bu paradigma son zamanlarda sıklıkla benimseniyor ve tüm çerçeveler bu yaklaşım etrafında inşa ediliyor (örneğin, backbone.js'ye bakın).
2) Performans nedenlerinden ötürü, mümkün olduğunda, html'yi bir dizede oluşturmak ve sonra onu bir bütün olarak sayfaya enjekte etmek daha iyidir.
3) Bu, bir Web Uygulaması çerçevesi benimsemenin yanı sıra başka bir seçenektir. Diğer kullanıcılar çeşitli şablon oluşturma motorları yayınladılar. Onları değerlendirme ve bu yolu takip edip etmeme konusunda karar verme becerisine sahip olduğunuz izlenimini edindim.
4) Başka bir seçenek. Ancak bunu düz metin / html olarak sunun; neden JSON? Bu yaklaşımı sevmiyorum çünkü PHP'yi (sunucu diliniz) Html ile karıştırıyor. Ancak bunu genellikle 1. ve 4. seçenek arasında makul bir uzlaşma olarak kabul ediyorum .
Cevabım: zaten doğru yöne bakıyorsun.
Benim yaptığım gibi 1 ile 4 arasında bir yaklaşım benimsemeyi öneririm . Aksi takdirde bir web çerçevesi veya şablon oluşturma motoru kullanın.
Sadece deneyimlerime dayanan fikrim ...