जावास्क्रिप्ट को HTML कब उत्पन्न करना चाहिए?

Question

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

हालाँकि, मैंने बहुत सारे जेएस कोड देखे हैं जो HTML के टीले बनाता है, जिसमें संपूर्ण रूप और सामग्री-भारी मोडल संवाद शामिल हैं। सामान्य तौर पर, किस पद्धति को सबसे अच्छा अभ्यास माना जाता है? HTML को उत्पन्न करने के लिए जावास्क्रिप्ट का उपयोग किन परिस्थितियों में किया जाना चाहिए और कब नहीं करना चाहिए?

Comments

आपको क्या लगता है कि मार्कअप को अजाक्स के माध्यम से पढ़ना और ट्रेस करना आसान है?

— Psr

मैं आमतौर पर दो तरीकों में से एक में अजाक्स का उपयोग करता हूं: पूरे प्री-रेंडर किए गए HTML स्निपेट्स को पेज या एक JSON सरणी में लोड करता हूं जिसे मैं पार्स करता हूं और फिर मौजूदा तत्वों में डेटा सम्मिलित करता हूं। बहुत मुश्किल से ही मैं डायनामिक रूप से HTML को अजाक्स डेटा से उत्पन्न करूँगा और इसे पेज में डालूँगा। क्योंकि अजाक्स सामग्री आमतौर पर एचटीएमएल के रूप में पहले से ही प्रस्तुत की जाती है, इसलिए जावास्क्रिप्ट में गतिशील तत्व निर्माण का पालन करने की तुलना में पढ़ना आसान है। मैं जल्दी से इसे देख सकता हूं और संरचना और सामग्री देख सकता हूं।

— पुण्योसोमीडिया

— बेहद

@VirtuosiMedia - लेकिन पहले से रेंडर किए गए HTML स्निपेट में सर्वर-साइड के रूप में रेंडर किए गए जब वे जावास्क्रिप्ट के माध्यम से प्रस्तुत किए जाते हैं तो वही मुद्दे नहीं होते हैं? मैं विवादास्पद होने की कोशिश नहीं कर रहा हूं, मैं वास्तव में यह नहीं समझता कि आपका मुद्दा क्या है।

— Psr

@psr आम तौर पर, नहीं। जेएस फ्रेमवर्क या यहां तक ​​कि सिर्फ वेनिला जावास्क्रिप्ट का उपयोग करते समय, आप अपने HTML को विधि कॉल और फ़ंक्शन की एक श्रृंखला के साथ उत्पन्न करेंगे। यदि यह बड़ी संख्या में तत्वों के साथ किया जाता है, तो यह देखना बहुत मुश्किल हो सकता है कि वास्तविक दस्तावेज़ संरचना क्या है। इसके विपरीत, एचटीएमएल जेनरेट किया गया सर्वर-साइड आमतौर पर एक साफ संरचना बनाए रखेगा और बस सर्वर कोड एक HTML टेम्पलेट में डेटा को गूँज रहा है, बल्कि तत्वों को स्वयं उत्पन्न कर रहा है। इसलिए यदि आप जेएस व्यवहार में परिवर्तन करना चाहते हैं, तो आपको पदानुक्रम को देखने के लिए तत्वों को उत्पन्न करने वाले तरीकों से पता लगाना होगा।

— सदासुमीमीडिया

Answer 1

जब भी मैंने जावास्क्रिप्ट में भारी एचटीएमएल पीढ़ी का सामना किया है, यह लगभग पूरी तरह से एक अकेले यूआई प्लगइन में था। यह समझ में आता है, क्योंकि यह पूरे प्लगइन को एक .js फ़ाइल (+ a .css को कस्टमाइज़्ड स्टाइल) में इनकैप्सुलेट करने की अनुमति देता है, इस प्रकार यह आसानी से पुन: प्रयोज्य, डिस्ट्रीब्यूटेबल और एप्लिकेशन में उपयोग किए गए फ्रेमवर्क से स्वतंत्र हो जाता है।

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

Answer 2

मुझे लगता है कि समस्या यह है कि आप साफ-साफ लिखित सर्वर साइड की तुलना बुरी तरह से लिखे गए तदर्थ ग्राहक की HTML पीढ़ी से कर रहे हैं। बेशक साफ-सुथरा लिखित कोड पढ़ना, रखरखाव और ट्रेस करना आसान है।

आप क्लाइंट साइड कोड "एचटीएमएल के टीले" कहते हैं, लेकिन निश्चित रूप से यह उसी एचटीएमएल है जहां यह उत्पन्न होता है। "टीला" वास्तव में कोड की बड़ी गांठ है।

वहाँ बाहर पुस्तकालय के बहुत सारे ग्राहक पक्ष हैं। वे सर्वर साइड वालों की तरह ही काम करते हैं। जिसके लिए आपको पसंद करना चाहिए, प्रदर्शन ट्रेडऑफ़ जटिल है, लेकिन JSON आमतौर पर HTML की तुलना में अधिक कॉम्पैक्ट होता है और क्लाइंट पर टेम्पलेट होने से कुछ सर्वर कॉल समाप्त हो सकते हैं। दूसरी ओर, ग्राहक जेएस अक्षम हो सकता है, या व्यावहारिक होने के लिए बहुत धीमा हो सकता है, इसलिए यह आपके लक्षित दर्शकों पर भी निर्भर करता है। कुल मिलाकर मुझे लगता है कि दृष्टिकोण काफी तुलनीय हैं, सबसे बड़ा कारक आपके लक्षित दर्शकों की ब्राउज़र क्षमताएं हैं।

लेकिन यह इस बात पर निर्भर करता है कि आप क्या कर रहे हैं, क्या आप जेएस को अपने सर्वर वातावरण में पसंद करते हैं, जो आपके द्वारा पसंद किए जाने वाले समाधान को गति देता है, आदि।

Answer 3

क्लाइंट-साइड टेम्प्लेट का उपयोग करने के लिए एक प्रवृत्ति है, चरम स्थिति में आपके पास सर्वर प्रदान करेगा केवल JSON प्रारूप में उदाहरण के लिए, सभी रेंडरिंग क्लाइंट साइड करते समय। उस दृष्टिकोण का लाभ यह है कि जेएस कोड और टेम्पलेट स्थिर संसाधन हैं जिन्हें सीडीएन के माध्यम से कैश, अनुमानित और वितरित किया जा सकता है। यदि आपके पास सर्वर-साइड जनरेट डायनामिक HTML नहीं है, तो ऐसा नहीं किया जा सकता है। इसके अलावा, हल्के स्वरूप में RESTful API से केवल डेटा वापस करने से बहुत कम सर्वर-साइड संसाधनों का उपयोग होता है, जिससे प्रतिक्रिया तेजी से होती है। इसके अलावा हल्का होने के कारण यह कम नेटवर्क ट्रांसफर है, जो इसे फिर से तेज बनाता है। इस तरह से आपके पास 3G जैसे धीमे कनेक्शन पर भी बहुत ही कम-विलंबता-कम अनुप्रयोग हो सकता है। इस प्रकार यह दृष्टिकोण मोबाइल पृष्ठों और अनुप्रयोगों के लिए लोकप्रिय है।

जे एस टेम्पलेट्स को लागू करने के लिए कई पुस्तकालयों रहे हैं, लोकप्रिय वालों में से एक हैं शुद्ध , मूंछें और dust.js । बाद में लिंक्डइन द्वारा उपयोग किया जाता है, उन्होंने अपने लेख "धूल में जेएसपी को छोड़ना: लिंक्डइन को धूल में बदलना। क्लाइंट-साइड टेम्प्लेट" के फायदे का वर्णन किया है ।

Comments

मैं अपना पहला वेबएप बना रहा हूं (जैसा कि उन्हें इन दिनों कहा जाता है, मेरे पास जावा / सी ++ बैकग्राउंड है)। और जेएस के साथ बहुत सारे एचटीएमएल को उत्पन्न करना मुझे स्वाभाविक लगता है क्योंकि उपयोगकर्ता एक प्रक्रिया से गुजरता है जहां उसे कई अलग-अलग यूआई घटकों की आवश्यकता होती है, और मैं कभी भी पृष्ठ को लोड नहीं करता हूं

— एमिल व्रजैड्स

Answer 4

क्लाइंट पर HTML जनरेट करने का लाभ, क्या आप प्रत्येक क्लाइंट को रेंडरिंग कार्य बंद कर देते हैं, जो आम तौर पर प्रतिक्रिया के इंतजार में बेकार बैठता है। केवल JSON डेटा और स्थिर सामग्री (HTML, JS और CSS) देने के लिए अधिक सर्वर संसाधनों को मुक्त करना।

हम एक वेब ऐप करते हैं जो विशेष रूप से जावास्क्रिप्ट के साथ HTML उत्पन्न करता है। 87% सर्वर हिट JSON डेटा हैं, स्थैतिक सामग्री को आम तौर पर एक बार लोड किया जाता है, फिर ब्राउज़र कैश से।

लेकिन आप इसका उपयोग नहीं कर सकते हैं - कम से कम आसानी से नहीं - यदि आपको एसईओ की आवश्यकता है। या यदि आप एक ऐसी आबादी को लक्षित करते हैं, जिसने जावास्क्रिप्ट को अक्षम कर दिया है, लेकिन मुझे यकीन नहीं है कि यह अभी भी यूट्यूब, ट्विटर, फेसबुक, जीमेल के साथ प्रासंगिक है ... स्वाभाविक रूप से लोगों को इसे सक्षम करने के लिए मजबूर करता है।

Answer 5

डायनेमिक पेज लोड करने के बारे में, किसी को यह एहसास होना चाहिए कि सभी "JQuery AJAX क्लाउड!" जादू, केवल दो संभव चीजें हो रही हैं:

1. एक तत्व का कोड div (खराब), या में इंजेक्ट किया जा रहा है
2. सामग्री एक iframe में लोड की जा रही है (बेहतर है, लेकिन यह सिर्फ एक ही नहीं है ...)

---

मूल प्रश्न के बारे में, मैं जावास्क्रिप्ट के माध्यम से केवल HTML सामग्री बनाता हूं जब मैं किसी तरह का वेब ऐप बनाता हूं जो सर्वर पर संग्रहीत XML या JSON डेटा को पढ़ता है, और यह बहुत बदल जाता है।

यह जावास्क्रिप्ट के साथ एक पृष्ठ पर स्थिर सामग्री को लोड करने के लिए बहुत अधिक समझ में नहीं आएगा, क्योंकि हमेशा संभावना है कि यह सही लोड नहीं होगा, या क्लाइंट इसे अक्षम कर देगा ("उस pesky विज्ञापन ले लो!")। इसके अलावा, यह HTML सामग्री को बदलने के लिए वास्तव में कठिन बनाता है जब यह एक बदसूरत document.write()या श्रृंखला के अंदर सुलगाया जाता है document.createElement()।

तो, आप सही हैं; या तो कच्चे HTML टाइप करें, या यदि डायनामिक-ईश सामग्री आवश्यक है, तो आवश्यक होने के लिए सर्वर-साइड स्क्रिप्ट का उपयोग करें। HTML को केवल तभी इंजेक्ट करने के लिए जावास्क्रिप्ट का उपयोग करें यदि साइट इंटरनेट कनेक्शन या इसी तरह के मामले के बिना काम करने के लिए है।

एक आखिरी नोट, यदि आप एक वेबसाइट में xmlhttprequests, er, AJAX को लागू करना चाहते हैं, तो संभवतः ऐसा करने का सबसे अच्छा / सबसे सुरक्षित तरीका डेटा को डेटा प्रारूप (जैसे XML) में संग्रहीत करना है, इसे लोड करना है, और तदनुसार उत्पादन करना है। ग्राहक पर। document.writeऔर element.innerHTMLवास्तव में सामग्री में हेरफेर करने के लिए जाने का सबसे अच्छा तरीका नहीं है, और भविष्य में संभावित सिरदर्द पैदा करने के लिए बाध्य है (यह स्क्रिप्ट क्यों नहीं चल रही है? मेरा टूटा <i>टैग सब कुछ italicizing है!)।

Comments

उन सबसे निश्चित रूप से केवल वही चीजें नहीं हैं जो हो सकती हैं। जावास्क्रिप्ट का डोम तक पूरी पहुंच है, और AJAX प्रतिक्रिया को हैंडल करते समय आप डोम ट्री को जोड़ सकते हैं जैसा कि आप फिट देखते हैं।

— tdammers

क्यों सामग्री को एक div बुरे में इंजेक्ट किया जा रहा है?

— पीटर टेलर

@PeterTaylor इंजेक्शन सामग्री खराब नहीं है, का उपयोग कर रहा innerHTMLहै।

— रेयनोस

@PeterTaylor यदि एक तत्व या दो को document.appendChildकुछ या कुछ के साथ जोड़ा जाता है, तो शायद कोई समस्या नहीं होगी। मुद्दा कोड के साथ है जो दिखता है कि कुछ इस तरह दिखता है-और यह div.innerHTML="<table cellpadding='0'><tr><td><label>Val:</label></td><td><input type='text' /></td></tr></table>एक बुरा सपना है।

— जेफरी स्वीनी

लेकिन इसका "JQuery AJAX क्लाउड" के साथ क्या करना है! जादू'? वहाँ आपका उदाहरण इसके प्रतिशोध की तरह दिखता है।

— पीटर टेलर

Answer 6

उस पर मेरा मंत्र है: जब इसका आसान और कोई भी मार्कअप की परवाह नहीं करता है।

आप दोनों का लाभ भी उठा सकते हैं और एक सीमा को परिभाषित कर सकते हैं जहां इसके मार्कअप की परवाह करना बहुत मुश्किल है और आप डोम ट्री पर ध्यान केंद्रित करेंगे। उदाहरण के लिए, एक रूप जिसमें गतिशील पंक्तियाँ हैं (उदाहरण के लिए "एक और अनुलग्नक जोड़ें"), आप शायद HTML में फ़ॉर्म चाहते हैं, "पंक्ति जोड़ें" बटन, और सबमिट बटन ... आप शायद उत्पन्न नहीं करना चाहते हैं। आपकी सर्वर-साइड भाषा या कुछ के साथ HTML।

अंगूठे का एक और नियम पुन: प्रयोज्य हो सकता है। यदि आपका समाधान क्लाइंट की ओर से अन्य समस्याओं के लिए लागू किया जा सकता है, तो इसे js में एन्क्रिप्ट करें।

Answer 7

हम सिंगल-पेज ऐप (गूगल मेल) का निर्माण करते हैं और हमारे ऐप्स में HTML का कोई सर्वर-साइड जेनरेशन नहीं है। इसके बजाय हम अपने JSON को टेम्प्लेट में प्रस्तुत करने के लिए Backbone.js का उपयोग कर रहे हैं ताकि हमारे JSON को टेम्प्लेट में प्रस्तुत किया जा सके। यह वास्तव में बहुत अच्छी तरह से काम करता है और हम अपने पहले ऐप के करीब आ रहे हैं जो इसका उपयोग करता है और हम भविष्य में इससे भी बड़े प्रोजेक्ट से निपटेंगे।

किसी भी प्रकार का मोटा ग्राहक जहां सर्वर का उपयोग केवल डेटा को जारी रखने के लिए किया जाता है और क्वेरी परिणाम वापस करने के लिए एक पोस्टर बच्चे के लिए होता है जहां आप HTML उत्पन्न करने के लिए जावास्क्रिप्ट चाहते हैं। बस इसे साफ और आसान बनाने के लिए एक अच्छे टेम्पलेट इंजन का उपयोग करना सुनिश्चित करें।

Answer 8

मैं jquery में html कोड जनरेट कर रहा हूं क्योंकि मैं एक पोर्टलेट का उपयोग कर रहा हूं और jsp कोड के निष्पादन के बाद, मुझे html कोड के साथ एक लूप बनाने की आवश्यकता है, जो कि मुझे कुछ जावास्क्रिप्ट कोड के साथ लूप के लिए जावा में नहीं मिल सकता है। इसलिए मैं jav arraylist को javascript array और html उत्पन्न करने के लिए स्ट्रिंग्स का उपयोग कर रहा हूं।