🎋 🛥️ 🚴 देशी जावास्क्रिप्ट टेम्पलेट (nJSt)। जावास्क्रिप्ट देशी टेम्पलेट इंजन 🤾🏽 🤬 🛠️

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

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

HTML टेम्पलेट:

<html > <head > <title > #{PageTitle} </title > </head > <body > <h1 > #{PageTitle} </h1 > <ul > <# for (var i=0; i <List .length; i++) { # > <li > <# if (typeof List[i] !== 'object') { show(List[i]); } else { show(List[i].name +' - '+ List[i].note); } #> </li > <# } #> </ul > </body > </html >

FractalizeR's HabraSyntax Source Code Highlighter .

संदर्भ:

var context = { PageTitle : ' jJSt test ' , List : [ ' First ' , { name : ' Second ' , note : ' 2th ' } , ' Third ' ] , } ; var result = njst . parse ( html , context , { debug : 1 } ) ;

FractalizeR's HabraSyntax Source Code Highlighter .

विचार

मुझे लगता है कि मुझे इस बारे में कुछ शब्दों का भुगतान करना चाहिए कि मैं यह कैसे ~~आया~~ । देशी टेंपलेटिंग के बारे में 1C-Bitrix (आपने सही सुना) के विचार से प्रेरित होकर, एक ऐसी भाषा का उपयोग करके, जिसे ज्यादातर लोग जानते हैं (PHP) - मैंने Node.JS के साथ भी ऐसा करने का फैसला किया। लेकिन यहाँ, मेरी राय में, विकल्प और भी अधिक फायदेमंद है, क्योंकि यह शुद्ध जावास्क्रिप्ट है। टाइपसेट टेम्प्लेट, HTML-CSS-JavaScript ... अच्छी तरह से लिखता है, और यहाँ वह जावास्क्रिप्ट में फिर से टेम्पलेट इंसर्ट लिखता है, जिससे उसे प्रोग्रामिंग लैंग्वेज से परिचित होना चाहिए। और उसे कुछ नए टेम्प्लेट इंजन के सिंटैक्स की पेचीदगियों में बहकने की जरूरत नहीं है। साथ ही, कई टेम्प्लेट इंजनों में, नुकसान ऐसे होते हैं जो पूरी तरह से तुच्छ कार्यों के कार्यान्वयन की अनुमति नहीं देते हैं। बेशक, आदर्श रूप से, आपको तर्क को सही करने की आवश्यकता है, एक परियोजना के ढांचे के भीतर - यह सामान्य है, लेकिन जब आपको सार्वभौमिकता की आवश्यकता होती है, तो किसी भी कारण से आप तर्क में नहीं आएंगे। बेशक, मैं लेआउट डिजाइनरों को प्रोग्रामिंग कौशल दिखाने की क्षमता के लिए एक साधन का प्रस्ताव नहीं करता हूं, और गणना न्यूनतम आवश्यक आवेषण पर जाती है, और न कि टेम्पलेट्स में तर्क को स्थानांतरित करने के लिए। चाबुक विधि पूरी तरह से इसे नहीं सिखाएगी, यहां आत्म-अनुशासन को एक स्थान होना चाहिए। यद्यपि अगर हम व्हिप विधि के बारे में बात करते हैं, तो Node.JS के साथ आने वाले VM मॉड्यूल के लिए धन्यवाद, टेम्प्लेट में तर्क को लागू करने की संभावना काफी कम हो जाती है।

इस विचार को जीवन में लाने के पिछले प्रयासों में - मैंने निम्न टेम्पलेट सम्मिलित डिज़ाइन का उपयोग किया है:

<script type = " nodejs " > ... </script >

FractalizeR's HabraSyntax Source Code Highlighter .

यह अच्छा था क्योंकि इसने लगभग किसी भी संपादक में JS कोड के हाइलाइटिंग की गारंटी दी थी। इसके अलावा, यह हमें याद दिलाता है कि एम्बेड कोड एक ही जावास्क्रिप्ट है। लेकिन मैं जल्दी से इस से दूर हो गया जब मैंने इस तकनीक के नुकसान की एक शांत सूची बनाई:

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

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

<% if (true) { &> html <& } %>

FractalizeR's HabraSyntax Source Code Highlighter .

अर्थात्, शुद्ध HTML आउटपुट करने के लिए, %> और <% , लेकिन &> और <& । और यह बैकलाइट जल्दी से एक समस्या बन गई। मैंने जाली के साथ विकल्प का चयन किया <# if (true) { &> html <& } #> । और थोड़ी देर बाद मैंने पार्सिंग के सिद्धांत को बदल दिया और <&> साथ परेशानियों को खत्म कर दिया। और अंत में, सब कुछ समान PHP आवेषण के समान हो गया (वैसे, टेम्पलेट इंजन कोड सम्मिलन के अपने सिद्धांत के करीब है)। लेकिन मैंने किसी तरह जाली को प्रतिशत चिन्ह में नहीं बदला (<% if (true) { %> html <% } %>) । अन्य मामलों में, यदि आपको लगता है कि व्यर्थ है - मुझे इसके बारे में बताएं।

यहाँ उपयोग में उपलब्ध आवेषण हैं:

{{चर} - संदर्भ में पारित चर को प्रदर्शित करने के लिए;
<# jsCode #> - JS कोड निष्पादित करने के लिए, लूप, शर्तें, और बहुत कुछ। show() फ़ंक्शन का उपयोग करके आउटपुट भी संभव है।

विनिर्देश

अब उपयोग के लिए सिफारिशों के बारे में बात करते हैं। चूंकि यहां कोई विशेष प्रतिबंध नहीं हैं, इसलिए आपको टोन सेट करने की आवश्यकता है, क्योंकि गोवानोकोडिंग की क्षमता अपने लिए महान है।

सबसे पहले: #{...} - किसी विशिष्ट मूल्य को प्राप्त करने के लिए संदर्भ से केवल कुंजी का नाम लिखना उचित है, या पहले दिए गए चर का नाम, कोई अनावश्यक संचालन नहीं है, भले ही उनमें से कुछ भी संभव हो। उदाहरण के लिए, एक स्ट्रिंग को एक स्ट्रिंग में इकट्ठा करने के लिए: #{arr.join(', ')} - मुझे लगता है कि यह एक महान पाप नहीं होगा। लाइन फीड और ; यहां जानबूझकर अनदेखी की गई है। सभी प्रकार के कोड (लूप, शर्तें आदि) के लिए <# ... #> उपयोग करें।

यदि आपको इंसर्ट के अंदर आउटपुट की जरूरत है <# ... #> , तो show() फंक्शन या toShow वैरिएबल आपकी सहायता के लिए आएगा, जिसे भरा जा सकता है (लेकिन प्रतिस्थापित नहीं किया गया है, अन्यथा show() सहित पिछला आउटपुट ओवरराइट हो जाएगा show() )। इन उपकरणों का उपयोग करके एक उदाहरण आउटपुट दिया गया है:

<# while (toShow.length < 100) { show('I like it! '); toShow += 'I love it! '; } #>

FractalizeR's HabraSyntax Source Code Highlighter .

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

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

क्षेत्र

उन सवालों में से एक जो सबसे अधिक संभावना आपके सिर में चमक सकते हैं: “और यदि आप चर var v = true; सेट करते हैं var v = true; क्या यह अगले टेम्पलेट इंसर्ट में दिखाई देगा? ”- जवाब हाँ है! और अगर आपके लिए यह समझना मुश्किल है कि "यह कैसे काम करता है", तो यह अच्छा है यदि आप PHP को जानते हैं, तो कल्पना करें कि nJSt टेम्पलेट आवेषण PHP आवेषण हैं, व्यवहार इस प्रकार के समान है। साथ ही निष्कर्ष:

#{...} = <?=...?> <# ... #> = <? ... ?>

FractalizeR's HabraSyntax Source Code Highlighter .

सुरक्षा

जैसा कि ऊपर उल्लेख किया गया है, केवल संदर्भ टेम्पलेट में मिलता है। कोई वैश्विक वस्तु (आवश्यकता, वैश्विक) नहीं। किसी भी बाहरी वैश्विक चर को अधिलेखित करना या तो विफल हो जाएगा। सामान्य तौर पर, सब कुछ संदर्भ के भीतर है। बेशक, यदि दिखावे के साथ काम करने की आवश्यकता है, तो हम वांछित फ़ंक्शन को एक संदर्भ में स्थानांतरित करते हैं जो अनुरोध पर ऐसा करेगा।

मैं छिपाऊंगा नहीं, अभी भी अंतराल हैं, लेकिन अगले संस्करणों में मैं उनके कवर से निपटूंगा। उदाहरण के लिए, यदि आप लिखते हैं <# while(true)++ #> - हमें प्रोसेसर लोड का 100% मिलता है, और जब तक आप नोड प्रक्रिया पर मार नहीं कहते हैं, तब तक आप कंप्यूटर को हीटर के रूप में उपयोग कर सकते हैं, और नोड में आगे की कार्रवाई असंभव हो जाती है। अगले संस्करण में, मैं एक टाइमर को लटकाने और निष्पादन को मारने जा रहा हूं यदि इस तरह के सर्वर फ्रीज से बचने में देरी हो रही है।

सुविधाएँ और अनुप्रयोग

संभावनाएं केवल आपकी कल्पना से सीमित होती हैं, क्योंकि हम संदर्भ में जो चाहते हैं उसे व्यक्त करते हैं। GitHub पर, उदाहरणों में वर्तमान पृष्ठ को डाउनलोड करने के लिए एक फ़ंक्शन को कॉल करने का एक डेमो है। डाउनलोड फ़ंक्शन को संदर्भ में पास किया जाता है और टेम्पलेट में बुलाया जाता है। आप किसी भी फ़ंक्शन को उस संदर्भ में स्थानांतरित कर सकते हैं जो आपकी परियोजना का एक उपकरण है, और जो, शायद, बाहरी वातावरण के साथ संचालित होता है। सामान्य तौर पर, यदि आप जेएस को जानते हैं, तो कोई समस्या नहीं होनी चाहिए। और यदि आप नहीं जानते हैं, तो एक और दो ।

भविष्य के संस्करणों में

लूप सुरक्षा (सुरक्षा देखें);
संदर्भ को वापस करने की क्षमता पार्सर से टेम्पलेट में बदल गई।

स्वास्थ्य के लिए उपयोग करें

यदि आप अधिक उदाहरण और अधिक विवरण चाहते हैं, तो GitHub पर उदाहरण फ़ोल्डर देखें, स्वयं मॉड्यूल डाउनलोड करें और वहां स्रोत कोड का अध्ययन करें।

nJSt on GitHub : https://github.com/unclechu/njst

संशोधन के लिए आपकी प्रतिक्रिया और सुझावों की प्रतीक्षा है।

देशी जावास्क्रिप्ट टेम्पलेट (nJSt)। जावास्क्रिप्ट देशी टेम्पलेट इंजन

विचार

विनिर्देश

क्षेत्र

सुरक्षा

सुविधाएँ और अनुप्रयोग

भविष्य के संस्करणों में

स्वास्थ्य के लिए उपयोग करें

More articles: