क्या जावास्क्रिप्ट के साथ html उत्पन्न करने के लिए एक सर्वोत्तम अभ्यास है

Question

मैं एक वेब सेवा को कॉल कर रहा हूं जो JSON में ऑब्जेक्ट्स की एक सरणी देता है। मैं उन वस्तुओं को लेना चाहता हूं और HTML के साथ एक div पॉपुलेट करता हूं। मान लीजिए कि प्रत्येक वस्तु में एक url और एक नाम है।

यदि मैं प्रत्येक वस्तु के लिए निम्न HTML उत्पन्न करना चाहता था:

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

क्या इसके लिए सबसे अच्छा अभ्यास है? मैं इसे करने के कुछ तरीके देख सकता हूं:

1. संगति तार
2. तत्व बनाएँ
3. टेम्प्लेटिंग प्लगइन का उपयोग करें
4. सर्वर पर HTML उत्पन्न करें, फिर JSON के माध्यम से सेवा करें।

Comments

आप अंडरस्कोर js भी देख सकते हैं: documentcloud.github.com/underscore/#template यह बहुत अच्छी तरह से backbone.js के साथ खेलता है

— luacassus

चुनाव मूंग 1-4: इस बात पर निर्भर करता है कि कितनी सामग्री को इंजेक्ट किया जाना है। (बड़े के लिए 4 को प्राथमिकता दें) कुल कितने html भागों को जोड़ना होगा (3 या 4)। sb से क्या परिचित है। (देव समय में प्रभाव)। अगर आप किसी भी उपकरण को नहीं जानते हैं तो उसका छोटा सा मोडल एक बार इंजेक्ट हो जाएगा, क्योंकि मुझे पता नहीं है कि शुद्ध js की तुलना में बेहतर तरीका है इसे करने के लिए (1-2)

— partizanos

Answer 1

विकल्प # 1 और # 2 आपके सबसे तत्काल सीधे आगे के विकल्प होने जा रहे हैं, हालांकि, दोनों विकल्पों के लिए, आप स्ट्रिंग्स का निर्माण या DOM ऑब्जेक्ट्स बनाकर प्रदर्शन और रखरखाव प्रभाव को महसूस करने जा रहे हैं।

टेंपलेटिंग वह सब अपरिपक्व नहीं है, और आप इसे सबसे प्रमुख जावास्क्रिप्ट फ्रेमवर्क में पॉपअप कर रहे हैं।

यहाँ JQuery टेम्पलेट प्लगइन में एक उदाहरण है जो आपको प्रदर्शन हिट से बचाएगा, और वास्तव में, वास्तव में सीधा है:

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

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

मैं कहता हूं कि शांत मार्ग (और बेहतर प्रदर्शन, अधिक बनाए रखने योग्य) पर जाएं, और टेम्प्लेटिंग का उपयोग करें।

Comments

JQuery के टेम्प्लेटिंग में मृत प्रतीत होता है, देखें stackoverflow.com/questions/7911732/…

— जेम्स मैकमोहन

@ जैम फियोरैटो: लिंक मर चुका है: s

— एड्रियन

लिंक मर चुका है, जैसा कि एड्रियन बताते हैं। : आप शामिल करना आपका जवाब अपडेट करने का सुझाव Mustache.js

— श्री Polywhirl

क्या कोई समझा सकता है, क्यों एक jQuery- आधारित उत्तर को स्वीकार किया जाता है? मुझे संदेह है कि यह सबसे अच्छा अभ्यास है!

— WoIIe

@WoIIe इससे भी बदतर, jQuery प्लगइन मर चुका है, इसलिए यह उत्तर पुराना है।

— फ्रैंकलिन यू

Answer 2

यदि आपको पूरी तरह से सामान्य के बजाय, तारों को जोड़ना है:

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

एक अस्थायी सरणी का उपयोग करें:

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

विशेष रूप से IE में सरणियों का उपयोग करना बहुत तेज है। मैंने IE7, ओपेरा और एफएफ के साथ कुछ समय पहले तार के साथ कुछ परीक्षण किया था। ओपेरा ने परीक्षण करने के लिए केवल 0.4s लिया, लेकिन IE7 20 मिनट के बाद समाप्त नहीं हुआ था !!!! (नहीं, मैं मजाक नहीं कर रहा हूं।) सरणी के साथ IE बहुत तेज था।

Comments

मैंने बहुत समय पहले ब्राउज़र स्विच किया था, इसलिए मुझे उतना नुकसान नहीं हुआ। IE एक भयानक ब्राउज़र था लेकिन यह बेहतर हो रहा है। लेकिन मुझे संदेह है कि मैं कभी भी पीछे हटूंगा।

— कुछ

पहली विधि में देखा गया धीमा प्रदर्शन संभव है क्योंकि परिणाम स्ट्रिंग को 200 बार वास्तविक रूप से प्राप्त किया जाना चाहिए, और मेमोरी आवंटन धीमा हो सकता है। दो पुनरावृत्तियों के बाद आप "परीक्षण" कर रहे हैं। तीन पुनरावृत्तियों के बाद, उस स्ट्रिंग को फेंक दिया जाता है और "टेस्टिंगटैस्टिंग" के लिए पर्याप्त जगह के साथ मेमोरी आवंटित की जाती है। और इसलिए धीरे-धीरे बढ़ती लंबाई के साथ 200 बार। हालाँकि s.join () एक नई स्ट्रिंग आवंटित करता है जिसके परिणामस्वरूप उन सभी को फिट करने के लिए काफी लंबा है, फिर हर एक में प्रतियां। एक आवंटन, बहुत तेज।

— एरिकपी

@JoeCoder, सहमत है, इसकी एक Shlemiel पेंटर एल्गोरिथ्म है। joelonsoftware.com/articles/fog0000000319.html

— Jodrell

Answer 3

या तो पहले दो विकल्पों में से आम और स्वीकार्य दोनों हैं।

मैं प्रोटोटाइप में हर एक का उदाहरण दूंगा ।

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

दृष्टिकोण # 1:

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

दृष्टिकोण # 2:

var div = new Element('div');
div.insert( new Element('img', { src: json.src }) );
div.insert(" " + json.name);
$('container').insert(div); // inserts at bottom

Comments

डोम तत्वों के बजाय स्ट्रिंग्स के साथ स्पष्ट रूप से एचटीएमएल का निर्माण करना अधिक प्रदर्शन करने वाला है (यह मानते हुए कि स्ट्रिंग संयोजन एक वास्तविक मुद्दा नहीं है) और पठनीय है।

— रॉड्रिक चैपमैन

IE स्ट्रिंग संयोजन में हमेशा एक मुद्दा होता है। इसके बजाय एक सरणी का उपयोग करें।

— कुछ

Answer 4

शायद अधिक आधुनिक दृष्टिकोण है कि टेंपलेटिंग भाषा का उपयोग करना जैसे कि मूंछें , जिसमें कई भाषाओं में कार्यान्वयन है, जिसमें जावास्क्रिप्ट भी शामिल है। उदाहरण के लिए:

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

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

आपको एक अतिरिक्त लाभ भी मिलता है - आप उसी टेम्पलेट को अन्य स्थानों पर पुनः उपयोग कर सकते हैं, जैसे सर्वर साइड।

यदि आपको अधिक जटिल टेम्प्लेट की आवश्यकता है (यदि स्टेटमेंट, लूप, आदि), तो आप हैंडलबार का उपयोग कर सकते हैं जिसमें अधिक विशेषताएं हैं, और मूंछ के साथ संगत है।

Answer 5

यहाँ एक उदाहरण है, jQuery के लिए मेरे सरल टेम्पलेट प्लग-इन का उपयोग करके :

var tmpl = '<div class="#{classname}">#{content}</div>';
var vals = {
    classname : 'my-class',
    content   : 'This is my content.'
};
var html = $.tmpl(tmpl, vals);

Comments

साफ। मैं कुछ महीने पहले एक बड़ी परियोजना की तरह कुछ का उपयोग कर सकता था।

— रॉड्रिक चैपमैन

हाँ। संक्षिप्त और साफ!

— अंजीतब

Answer 6

आप किसी छुपे हुए div में अपने पेज में टेम्पलेट HTML जोड़ सकते हैं और फिर इसे आबाद करने के लिए क्लोनकोड और अपनी पसंदीदा लाइब्रेरी की क्वेरी सुविधाओं का उपयोग कर सकते हैं।

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

प्रकटीकरण: मैं बीओबी का अनुरक्षक हूं।

एक जावास्क्रिप्ट पुस्तकालय है जो इस प्रक्रिया को बहुत आसान बनाता है जिसे BOB कहा जाता है ।

अपने विशिष्ट उदाहरण के लिए:

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

यह निम्नलिखित कोड द्वारा BOB के साथ उत्पन्न किया जा सकता है।

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

या छोटे वाक्य रचना के साथ

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

यह लाइब्रेरी काफी शक्तिशाली है और इसका उपयोग डेटा प्रविष्टि (d3 के समान) के साथ बहुत जटिल संरचनाएं बनाने के लिए किया जा सकता है, उदाहरण के लिए:

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 वर्तमान में DOM में डेटा इंजेक्ट करने का समर्थन नहीं करता है। यह तांत्रिक पर है। अभी के लिए आप सामान्य जेएस, या jQuery के साथ एक साथ आउटपुट का उपयोग कर सकते हैं, और जहां चाहें वहां डाल सकते हैं।

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

---

मैंने इस लाइब्रेरी को बनाया क्योंकि मैं jquery और d3 जैसे किसी भी विकल्प से खुश नहीं था। कोड बहुत जटिल और पढ़ने में कठिन। बीओबी के साथ काम करना मेरी राय में है, जो जाहिर है कि पक्षपाती है, बहुत अधिक सुखद है।

BOB Bower पर उपलब्ध है , इसलिए आप इसे चलाकर प्राप्त कर सकते हैं bower install BOB।

Answer 8

क्या इसके लिए सबसे अच्छा अभ्यास है? मैं इसे करने के कुछ तरीके देख सकता हूं:

1. संगति तार
2. तत्व बनाएँ
3. टेम्प्लेटिंग प्लगइन का उपयोग करें
4. सर्वर पर HTML उत्पन्न करें, फिर JSON के माध्यम से सेवा करें।

1) यह एक विकल्प है। क्लाइंट साइड पर जावास्क्रिप्ट के साथ html बनाएँ और फिर इसे समग्र रूप में DOM में इंजेक्ट करें।

ध्यान दें कि इस दृष्टिकोण के पीछे एक प्रतिमान है: सर्वर सिर्फ डेटा आउटपुट करता है और (इंटरैक्शन के मामले में) AJAX अनुरोधों के साथ क्लाइंट asyncronoulsy से डेटा प्राप्त करता है। क्लाइंट साइड कोड एक स्टैंड-अलोन जावास्क्रिप्ट वेब एप्लिकेशन के रूप में संचालित होता है।

वेब एप्लिकेशन सर्वर को संचालित कर सकता है, भले ही सर्वर के बिना (निश्चित रूप से यह किसी भी डेटा को प्रदर्शित नहीं करेगा या किसी भी प्रकार की बातचीत की पेशकश नहीं करेगा)।

यह प्रतिमान हाल ही में अपनाया जा रहा है, और इस दृष्टिकोण के आसपास पूरे ढांचे का निर्माण किया गया है (उदाहरण के लिए backbone.js देखें)।

2) प्रदर्शन कारणों के लिए, जब संभव हो, एक स्ट्रिंग में html बनाने के लिए बेहतर है और फिर इसे पूरे पृष्ठ में इंजेक्ट करें।

3) यह एक अन्य विकल्प है, साथ ही एक वेब अनुप्रयोग रूपरेखा को अपनाना। अन्य उपयोगकर्ताओं ने विभिन्न अस्थायी इंजन उपलब्ध हैं। मुझे आभास है कि आपके पास उनका मूल्यांकन करने का कौशल है और यह तय करना है कि इस रास्ते पर चलना है या नहीं।

4) एक और विकल्प। लेकिन इसे एक सादे पाठ / html के रूप में परोसें; क्यों JSON? मुझे यह तरीका पसंद नहीं है क्योंकि Html के साथ PHP (आपकी सर्वर भाषा) को मिलाया जाता है। लेकिन मैं इसे अक्सर विकल्प 1 और 4 के बीच एक उचित समझौते के रूप में अपनाता हूं ।

---

मेरा जवाब: आप पहले से ही सही दिशा में देख रहे हैं।

मैं 1 और 4 के बीच एक दृष्टिकोण अपनाने का सुझाव देता हूं जैसे मैं करता हूं। अन्यथा वेब फ्रेमवर्क या टेम्प्लेटिंग इंजन को अपनाएं।

मेरे अनुभव के आधार पर सिर्फ मेरी राय ...