एक बार लिखें, कहीं भी रेंडर करें - क्लाइंट और सर्वर पर एक टेम्पलेट इंजन का उपयोग करें

परिचय

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

स्पष्ट रूप से मामले का उपयोग करें

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

कम स्पष्ट उपयोग का मामला

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

<html> <head> <script type="text/javascript" src="mustache.js"></script> <script type="text/javascript" src="jquery.js"></script> <script> var data = { "newsCategory": "IT", "news": [ { "id": 1, "title": "Write once, render anywhere", "preview": "bla bla bla", "date": "01.01.2012" }, { "id": 2, "title": "Mustache in action", "preview": "bla bla bla", "date": "02.02.2012" } ] } $(function(){ $("body").html(Mustache.render($("body").html(), data)); }); </script> </head> <body> <h1>{{newsCategory}}</h1> <ul class="news"> {{#news}} <li> <h2>{{title}}</h2> <p>{{preview}}</p> <a class="readMore" href="/news/{{id}}">...</a> <div>{{date}}</div> </li> {{/news}} </ul> </body> </html> 

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

निष्कर्ष

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