क्या एचटीएमएल टैग आउटपुट करने के लिए jquery का उपयोग करना गलत है?

Question

बस आश्चर्य हुआ कि जावास्क्रिप्ट के साथ एचटीएमएल टैग आउटपुट करने के लिए यह बुरा अभ्यास है। उदाहरण के लिए कहें कि मेरे पास एक टेबल थी और पृष्ठ लोड पर एक AJAX अनुरोध डेटा को पॉप्युलेट करने के लिए मिलता है। डेटा की प्रत्येक पंक्ति के लिए मुझे दूसरी पंक्ति आउटपुट करने की आवश्यकता होगी, इस तरह कुछ:

$('#results').html('<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>'); 

क्या यह करना बुरा है?

Answer 1

यह बुरा नहीं है। इसे दोबारा करने के लिए आप दो चीजें कर सकते हैं:

मुझे लगता है कि आपके पास प्रत्येक लूप में यह है, ताकि आप इसे HTML के साथ सेट करने से पहले अपनी पूरी तालिका बना सकें। तो आप सिर्फ एक बार .html() ऑपरेशन करते हैं।

var yourTableHTML = "" 

$.each(yourContentArray, function(data,i){ 
    youtTableHTML += '<tr><td>'+data.people[i]['name']+'</td><td>'+data.people[i]['age']+'</td><td>'+data.people[i]['gender']+'</td></tr>' 
}) 

$('#results').html(yourTableHTML); 

दूसरी बात यह है कि आप एक HTML मॉडल के अंदर आप फ़ाइल (एक मॉडल पंक्ति) HTML इस्तेमाल कर सकते हैं कि आप को क्लोन है। तो अगर किसी और को HTML को एक बार बदलना है, तो उसे जावास्क्रिप्ट को बदलने की आवश्यकता नहीं है।

Answer 2

नहीं यह सामान्य बात है। इस प्रकार आप आमतौर पर फ्लाई पर गतिशील रूप से एचटीएमएल जोड़ देंगे।

Answer 3

इस वेब साइट का उपयोग करने के लिए एक वेब सर्वर के रूप में काम करते हैं और डेटा और उसके बाद ग्राहक साइड स्क्रिप्टिंग यूआई बनाने के लिए प्रदान करने के लिए हाल की प्रवृत्ति है।

यह निश्चित रूप से बुरा नहीं है और यह डेटा पारित किया जा रहा की राशि तक सीमित कर देगा और बेहतर ढंग सर्वर/ग्राहक, व्यापार/यूआई जुदाई प्रदान करता है।

चेतावनी यह है कि ग्राहक पर अधिक निर्भर होने से ब्राउज़र पर दबाव डाला जाएगा। यदि ग्राहक एक स्मार्टफोन है, तो यह बहुत अधिक जावास्क्रिप्ट के साथ संघर्ष कर सकता है।

Answer 4

ठीक केवल अगर यह जेएस है एक बाहरी फ़ाइल में है।

वरना, IE तुम पागल ड्राइव कर सकते हैं और अपने HTML मान्य XHTML में और सख्त यदि नहीं होंगे।

Answer 5

मैं यह सिफारिश नहीं होगा, क्योंकि आप में निर्मित कार्यक्षमता छोड़ दे रहे इनपुट से बचने के लिए। मुझे यकीन नहीं है कि यह एक सुरक्षा भेद्यता है लेकिन यादृच्छिक सामान को तारों में इंजेक्ट करने के लिए कभी भी अच्छा अभ्यास नहीं है जो कुछ प्रारूप की अपेक्षा करता है। इसके बजाय jQuery.text() विधि आज़माएं।

Answer 6

सुशील भंवरानी बताते हैं कि यह सामान्य है। हालांकि:

1. पास टैग का उपयोग करना सुनिश्चित करें।
2. सुनिश्चित करें कि डेटा में कोई टैग नहीं है।
3. स्ट्रिंग के आकार को सीमित करें; यदि यह बहुत लंबा है तो ब्राउजर लटका सकता है।

Answer 7

मुझे लगता है कि सबसे पूरा जवाब यह है: jQuery, जावास्क्रिप्ट में एचटीएमएल टैग जोड़ना ठीक है और जब तक आप जो काम करना चाहते हैं उसे पूरा करने के लिए एक अलग तरीका नहीं है। स्पष्टीकरण के लिए - jQuery के साथ एक संपूर्ण स्थिर पृष्ठ बनाना ठीक नहीं है जब आप इसे सामान्य रूप से HTML के साथ बना सकते हैं, तो jQuery के साथ वेबपृष्ठ पर गतिशील सामग्री जोड़ना ठीक है, यह मुख्य कारणों में से एक है।

Answer 8

के बजाय कह क्या सबसे अच्छा अभ्यास मैं बस आपको पेशेवरों और सीधे डालने HTML के विपक्ष देना होगी:

पेशेवरों:

• फास्ट। यह jQuery का उपयोग करके अलग-अलग तत्व बनाने और उन्हें एक समय में जोड़ने से बहुत तेज़ है।

• बेसिक। के बाद से यह सिर्फ एक स्ट्रिंग है, तो आप इस तरह साफ चाल प्रदर्शन कर सकते हैं:

  var lis = ['One', 'Two', 'Three']; 
  var html = '<li>' + lis.join('</li><li>') + '</li>'; 
  

  कई अन्य कार्यों के रूप में समान रूप से लचीला जब तार के साथ प्रत्यक्ष रूप से कार्य कर रहे हैं।

विपक्ष:

• त्रुटि प्रवण। न केवल स्ट्रिंग में गलती करना आसान है, बल्कि डेटा भी। यदि आपके डेटा में HTML वर्णों से अनचाहे है, तो आपकी स्ट्रिंग टूटा जा सकता है।
• पढ़ने के लिए कठिन (बहस योग्य)। स्ट्रिंग्स के बीच इंटरपोलेट किए गए कई चर इसे पढ़ने में कठिन बना सकते हैं। अन्य लोग तर्क दे सकते हैं कि कई .append() एस और .addClass() और .attr() इसे और भी कठिन बनाते हैं।

---

तुलना के लिए, .html() उपयोग किए बिना अपने उदाहरण:

var tr = $('<tr>'); 
$('<td>').text(data.people[i]['name']).appendTo(tr); 
$('<td>').text(data.people[i]['age']).appendTo(tr); 
tr.appendTo('#results'); 

Answer 9

ठीक है, नहीं। जब तक आप इसे छोटी खुराक में रखते हैं, तब तक यह काफी स्वीकार्य अभ्यास है। बहुत अधिक करना वेब पेज पर ध्यान देने योग्य विलंबता जोड़ सकता है। मैं इसे और अधिक संरचनात्मक रखने कि हालांकि सिर्फ एक निजी पसंद है जाएगा:

var tr = $('<tr></tr>'); 

var td = $('<td></td>'); 
td.text(data.people[i]['name']); 
tr.append(td); 

td = $('<td></td>'); 
td.text(data.people[i]['age']); 
tr.append(td); 

$('#results').html(tr); 

कर रहा इस तरह से यह सुनिश्चित करता है कि यह आसान है पढ़ने के लिए (कम से कम मेरी राय में) और इसलिए बहुत आसान ठीक करने के लिए/बाद में करने के लिए जोड़ें।