💨 🐕 🐭 बस - जावास्क्रिप्ट टेम्पलेट इंजन 👇🏿 🍮 🏦

Node.JS पर मेरी प्रयोगात्मक WEB- परियोजना के विकास के दौरान, जो मैंने पिछले दो लेखों में वर्णित किया था , मुझे एक टेम्पलेट इंजन चुनने की समस्या का सामना करना पड़ा। इस तथ्य के बावजूद कि कुछ तैयार किए गए समाधान हैं, मुझे ऐसा कोई नहीं मिला जो मुझे 100% संतुष्ट करे। तो जस्ट पैदा हुआ था।

प्रतियोगियों

जेड

github.com/visionmedia/jade

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

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

EJS

github.com/visionmedia/ejs

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

TwigJS

github.com/fadrizul/twigjs

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

सरल, तेज, सुविधाजनक

इन तीन गुणों ने JUST का आधार बनाया। एक टेम्पलेट इंजन किसी भी WEB परियोजना के सबसे महत्वपूर्ण विवरणों में से एक है। पूरी तरह से कैश्ड पृष्ठों को छोड़कर, यह हर अनुरोध के साथ काम करता है। प्रोजेक्ट के विकास के किसी भी चरण में खुशी लाने के लिए टेम्प्लेट के साथ काम करने के लिए, टेम्पलेट इंजन शुरू में ऐसा होना चाहिए कि इसे चाटना ही वांछनीय हो।

बस यह

HTML मार्कअप के लिए
तर्क के लिए जावास्क्रिप्ट
पैटर्न कैशिंग
स्वचालित रूप से संशोधित टेम्प्लेट पुनः लोड करें (केवल Node.JS संस्करण के लिए)
बहुत सरल वाक्यविन्यास, लेकिन गंभीर कार्यक्षमता
वंशानुक्रम, इंजेक्शन, ब्लॉक परिभाषा
Node.JS और ब्राउज़र दोनों में काम करने की क्षमता
उच्च गति

बिंदु पर पहुँचो

JUST टेम्प्लेट का एक सरल उदाहरण:

page.html

<%! layout %> <p>Page content</p>

layout.html

 <html> <head> <title><%= title %></title> </head> <body><%*%></body> </html>

इन टेम्पलेटों से अंतिम HTML उत्पन्न करने वाला कोड और स्थानांतरित डेटा इस तरह दिखता है:

 var JUST = require('just'); var just = new JUST({ root : __dirname + '/view' }); just.render('page', { title: 'Hello, World!' }, function(error, html) { console.log(error); console.log(html); });

एक अधिक पूर्ण उदाहरण गुथुब पर भंडार में पाया जा सकता है।
क्लाइंट पर, सब कुछ उसी तरह से काम करता है। सबसे पहले आपको JUST को पेज से जोड़ना होगा:

 <script src="https://raw.github.com/baryshev/just/master/just.min.js" type="text/javascript"></script>

अब JUST का उपयोग उसी तरह से किया जा सकता है जैसे Node.JS में:

 var just = new JUST({ root : '/view' }); just.render('page', { title: 'Hello, World!' }, function(error, html) { console.log(error); console.log(html); });

क्योंकि क्लाइंट संस्करण में, AJAX का उपयोग करके टेम्प्लेट लोड किए जाते हैं, उन्हें स्क्रिप्ट के साथ पृष्ठ के समान डोमेन पर होना चाहिए।

JUST रूट के रूप में एक जावास्क्रिप्ट ऑब्जेक्ट का उपयोग कर सकता है। कभी-कभी यह सुविधा काम आ सकती है।

 var just = new JUST({ root : { layout: '<html><head><title><%= title %></title></head><body><%*%></body></html>', page: '<%! layout %><p>Page content</p>' } });

यह कैसे काम करता है

टेम्पलेट को एक सरल एल्गोरिथ्म द्वारा भागों में डिसाइड किया जाता है और एक फ़ंक्शन में बदल जाता है जो स्ट्रिंग कॉन्फैनेटेशन करता है, और परिणाम बनाने के लिए डेटा को मापदंडों के रूप में स्वीकार करता है। यह फ़ंक्शन कैश किया गया है, और इसके साथ ही आगे काम करते हैं। री-पार्सिंग केवल तब होता है जब एप्लिकेशन को पुनरारंभ किया जाता है या जब टेम्पलेट फ़ाइल को बदल दिया जाता है (यदि watchForChanges विकल्प सही पर सेट है)। यह दृष्टिकोण उत्कृष्ट प्रदर्शन प्रदान करता है। “ क्या करना है? »पार्सिंग टेम्पलेट वाले पृष्ठ 20-60ms उत्पन्न हुए। 1-2ms के लिए टेम्पलेट (कैश्ड फ़ंक्शन से) को पार्स किए बिना। यह देखते हुए कि प्रत्येक टेम्पलेट के लिए पार्सिंग केवल 1 बार होता है, और एप्लिकेशन लंबे समय तक रहता है - टेम्पलेट को पार्स करने का समय उपेक्षित हो सकता है।

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

JUST क्या कर सकता है

डेटा आउटपुट

टेम्प्लेट का डेटा आउटपुट एक साधारण डिज़ाइन का उपयोग करके किया जाता है:

 <%= varName %>

डेटा को टेम्प्लेट में डाला जाता है, जैसे कि वे टेम्पलेट इंजन में किसी भी पूर्व प्रसंस्करण से नहीं गुजरते हैं।

जावास्क्रिप्ट तर्क

टेम्प्लेट में, आप पूर्ण-जावास्क्रिप्ट जावास्क्रिप्ट कोड का उपयोग कर सकते हैं। उदाहरण के लिए:

 <% for (var i = 0; i < articles.length; i++) { %> <% this.partial('article', { article: articles[i] }); %> <% } %>

या

 <% if (user.authenticated) { %> <%@ partials/user %> <% } else { %> <%@ partials/auth %> <% } %>

या

 <%= new Date().toString() %>

टेम्प्लेट इनहेरिटेंस

जैसा कि अभ्यास ने दिखाया है, विरासत एक बहुत ही सुविधाजनक उपकरण है जो आपको नीचे से ऊपर एक पृष्ठ बनाने की अनुमति देता है। JUST में इनहेरिटेंस ऑपरेशन निम्नानुसार है:

 <%! layout %>

या

 <% this.extend('layout', { customVar: 'Hello, World!' }); %>

यदि आपको पैरेंट टेम्पलेट में अतिरिक्त पैरामीटर पास करने की आवश्यकता है। इनहेरिटेंस ऑपरेशन टेम्प्लेट में कहीं भी स्थित हो सकता है, लेकिन इसे ऊपर या नीचे सम्मिलित करना अधिक सुविधाजनक है।

माता-पिता टेम्पलेट में, बच्चे के सम्मिलन बिंदु पर, आपको निम्नलिखित निर्माण सम्मिलित करने की आवश्यकता है:

 <%*%>

या

 <% this.child(); %>

पैटर्न इंजेक्शन

यह ऑपरेशन आपको आवश्यक होने पर, आवश्यक पैरामीटर देते हुए, कॉल स्थान पर एक बाहरी टेम्पलेट कनेक्ट करने की अनुमति देता है।

 <%@ partial %>

या

 <% this.partial('partial', { customVar: 'Hello, World!' }); %>

यदि आपको प्लग-इन टेम्पलेट में अतिरिक्त पैरामीटर पास करने की आवश्यकता है।

पुनर्वितरण ब्लॉक करें

यह तंत्र कुछ हद तक विरासत के समान है। माता-पिता के टेम्पलेट्स में, बच्चे को सम्मिलित करने के स्थान के अलावा, आप ब्लॉक डालने के लिए स्थानों की घोषणा कर सकते हैं। इन ब्लॉकों की सामग्री को बाल टेम्पलेट्स में परिभाषित किया गया है। विरासत के विपरीत, ब्लॉक पुनर्वितरण बहुत ऊपर तक काम करता है, अर्थात। किसी भी टेम्पलेट से उसके माता-पिता में से किसी के ब्लॉक की सामग्री को निर्धारित किया जा सकता है, न कि केवल तत्काल। ब्लॉक का निर्धारण करने के लिए, निम्नलिखित निर्माण का उपयोग किया जाता है:

 <%[ blockName %> <p>This is block content</p> <%]%>

या

 <% this.blockStart('blockName'); %> <p>This is block content</p> <% this.blockEnd(); %>

किसी भी मूल टेम्पलेट में, आपको निम्नलिखित निर्माण का उपयोग करके ब्लॉक के लिए प्रविष्टि स्थान निर्धारित करने की आवश्यकता है:

 <%* blockName %>

या

 <% this.child('blockName'); %>

ब्लॉक को फिर से परिभाषित किया जा सकता है। परिणाम न्यूनतम स्तर पर परिभाषित एक ब्लॉक है।

JUST में क्या है और क्या नहीं होगा

डेटा फ़िल्टर

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

“यह दृष्टिकोण एमवीसी के अनुरूप नहीं है, इस विषय पर टिप्पणियों में दिखाई देगा। एस्केपिंग टैग केवल HTML / XML के रूप में डेटा की प्रस्तुति को संदर्भित करता है, और हम उन्हें एक ऐसे प्रारूप में प्रदर्शित करना चाह सकते हैं जहां से बचना आवश्यक नहीं है, उदाहरण के लिए, पीडीएफ। इसलिए, यह कार्यक्षमता टेम्पलेट इंजन में होनी चाहिए ”।

इस बारे में विवादों को रोकते हुए, मैं तुरंत इस सवाल का जवाब दूंगा।

टेम्पलेट इंजन MVC के "V" मॉडल का शुद्ध घटक नहीं है। एक विशेष मामले के रूप में, यह हो सकता है, लेकिन यह बिल्कुल बाध्य नहीं है। "प्रस्तुति" घटक में एक प्रतिक्रिया (टेम्पलेट इंजन) के निर्माण के सीधे साधन और एक विशेष प्रस्तुति के लिए डेटा तैयार करने के साधन दोनों शामिल हो सकते हैं। इस बिंदु पर, डेटा तैयार और कैश किया जा सकता है। यह दृष्टिकोण आपको भारी मात्रा में अनावश्यक डेटा संचालन नहीं करने देता है। यह देखते हुए कि स्ट्रिंग ऑपरेशन धीमी गति से होते हैं, इसे उपेक्षित नहीं किया जा सकता है। यदि आप इस बात की परवाह नहीं करते हैं कि लाइन को कितनी बार बदला गया है, एक या दस हजार, तो मेरे लिए आपके लिए बुरी खबर है।

तार्किक दृष्टि से सिंथेटिक चीनी

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

मरहम में उड़ना

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

टेम्प्लेट के अंदर चरों को एक्सेस करने के लिए, मुझे तीन तरीके दिखाई देते हैं:

% ऑब्जेक्ट%।% वार% के निर्माण के माध्यम से एक चर तक पहुंच। उदाहरण के लिए, यह। नाम या डेटा.वरनाम। इस मामले में, अपरिभाषित तक पहुंचते समय कोई त्रुटि नहीं होगी, और इस स्थान पर टेम्पलेट में एक खाली रेखा दिखाई देगी, लेकिन अंत में हमें चर उपसर्गों के कारण बहुत बड़े टेम्पलेट मिलेंगे।
% ऑब्जेक्ट%।% Var% निर्माण के माध्यम से प्रवेश के लिए एक चर के लिए सीधे पहुंच का अधिकार। उदाहरण के लिए, यदि टेम्प्लेट में निर्माण <% = varName%> होता है, तो इसे पार्स करते समय, हम इसे आसानी से इस.वरनाम से बदल सकते हैं, इस प्रकार एक अपरिभाषित चर के साथ त्रुटि को समाप्त कर सकते हैं। लेकिन चर तक पहुंच न केवल डेटा आउटपुट के निर्माण में हो सकती है, बल्कि तर्क में भी हो सकती है। उदाहरण के लिए, लूप में किसी सरणी को ट्रेस करना या सशर्त विवरणों में भाग लेना। अतिरिक्त पार्सिंग के बिना, ऐसे स्थानों में स्वचालित रूप से चर तक पहुंच को बदलना संभव नहीं है।
टेम्प्लेट डेटा के साथ ऑब्जेक्ट को स्कोप के साथ स्कोप के साथ जोड़ना। किसी ऑब्जेक्ट को दायरे में डेटा के साथ रखने पर, हम उन्हें ऑब्जेक्ट प्रीफ़िक्स के बिना एक्सेस कर सकते हैं, लेकिन एक अपरिभाषित वेरिएबल को एक्सेस करते समय हम एक त्रुटि के साथ इसका भुगतान करते हैं।

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

बस - जावास्क्रिप्ट टेम्पलेट इंजन