👉 🌭 🖕 पर्ल में सर्वर साइड के साथ जावास्क्रिप्ट टेम्पलेट इंजन 🤟🏽 😉 👃🏿

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

हम प्रारंभिक डेटा और समस्या की रूपरेखा तैयार करते हैं

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

द्वारा आरक्षण ...

अगला, वर्णित पार्सर के कार्यान्वयन के उदाहरण दिए जाएंगे, इस सुधार के साथ कि सर्वर भाषा में अभी तक पार्सर का कोई विवरण नहीं है ... अर्थात, अब टेम्पलेट इंजन के कार्य, स्रोत कोड और उदाहरणों को देखना संभव होगा: योजना के अनुसार: सर्वर पर टेम्पलेट -> tmpl में संकलन। js -> html पीढ़ी JSON प्रारूप में डेटा पर आधारित है। ठीक है, फिर, यदि विमान उड़ान भरता है, तो आप मर्लेज़न बैले के सोलहवें अधिनियम पर जा सकते हैं।

हमें क्या चाहिए?

टेम्पलेट इंजन perl चल रहा है। हमें आवश्यकता होगी:

- एक कॉन्फ़िगरेशन फ़ाइल जिसमें हम .js लाइब्रेरीज़ के साथ टेम्प्लेट के पत्राचार का वर्णन करते हैं (हम एक फ़ाइल में सभी टेम्प्लेट नहीं चाहते हैं) और टेम्पलेट इंजन के लिए कुछ आवश्यक डेटा;

- .pm मॉड्यूल स्वयं, जिसमें पार्सिंग टेम्प्लेट के लिए विभिन्न विधियां शामिल हैं;

- एक स्क्रिप्ट, जिसे लॉन्च करके हम अपने पुस्तकालयों को संकलित करेंगे;

- अजीब तरह से, पैटर्न;

आवश्यकताओं के अनुसार, हम फ़ाइलों और निर्देशिकाओं की निम्न संरचना बनाते हैं (यदि आप बुरा नहीं मानते हैं, तो मैं अपने जीवन को सरल बनाने के लिए गुमनाम लोगों को फिर से नहीं लिखूंगा, लेकिन मैं तुरंत आपको अपना काम करने वाला संस्करण दूंगा):

# /Users/zaur/www/blacktiger # /Users/zaur/www/blacktiger/bin/Core/JS/Config.pm # /Users/zaur/www/blacktiger/bin/Core/JS/Parse.pm # /Users/zaur/www/blacktiger/bin/jsgen # /Users/zaur/www/blacktiger/tpl /Users/zaur/www/blacktiger/inc # ( ) /Users/zaur/www/blacktiger/source_js # , /Users/zaur/www/blacktiger/js/tpl # html , /Users/zaur/www/blacktiger/html * This source code was highlighted with Source Code Highlighter .

हम क्या महसूस कर सकते हैं?

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

यहाँ हम अपने टेम्पलेट्स में लागू कर सकते हैं की एक सूची है, अंतर में ऊपर JSON डेटा के अलावा:

- घोंसले के शिकार के विभिन्न स्तरों के साथ चर तक पहुंच;

- सरणी तत्वों का पुनरावृत्ति;

- सशर्त बयान अगर / और यदि / तो;

- समावेशन;

- टेम्पलेट के भीतर ब्लॉक का पुन: उपयोग;

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

चलिए शुरू करते हैं ...

टेम्पलेट

/Users/zaur/www/blacktiger/tpl/sambuka.htm

< h3 > {$ cfg.host} </ h3 >
< h4 > {#title} </ h4 >
< ul >
{% विषय}
< li id = "li - {# id}" {# id == 3 } वर्ग = "sel" {/?} > {#title} </ li >
{/% विषय}
</ ul >
* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

हमारा जावास्क्रिप्ट कोड और डेटा:

var d1 = { title: ' – !' , topics: [ {title: '' , id: 1}, {title: '' , id: 2}, {title: '' , id: 3}, {title: '' , id: 4} ] }; var jstpl = new myfirst(); var html1 = jstpl.tpl( 'tpl_sambuka' ,d1); * This source code was highlighted with Source Code Highlighter .

परिणाम स्वरूप HTML

< h3 > blacktiger </ h3 > < h4 > – ! </ h4 > < ul > < li id ="li-1" > </ li > < li id ="li-2" > </ li > < li id ="li-3" class ="sel" > </ li > < li id ="li-4" > </ li > </ ul > * This source code was highlighted with Source Code Highlighter .

चलिए इसका पता लगाते हैं ...

हम टेम्पलेट की पंक्तियों के साथ चलते हैं:

1. config.pm फ़ाइल में% jsd हैश है। {$ Cfg.host} लिखकर, हमें $ jsd {'host'} का मान मिलता है। यदि हम इस अभिव्यक्ति को {$ cfg.path.to.element} उदाहरण के लिए जटिल करते हैं, तो हम $ jsd {'path'} {'से'} {'element') के मान को प्रतिस्थापित करेंगे। यह एक्सेस के विभिन्न स्तरों के साथ चर तक पहुंच है ।

2. टेम्पलेट में, हमने हैश d1 पास किया है । इस मामले में {#title} प्रविष्टि d1.title के बराबर है। इस मामले में, jstpl.data.cur_arg.title को वास्तव में वहां स्थानांतरित किया गया था।

3. शांत, यह एक सरल HTML है।

4., 6. {% विषय} {/% विषय} एक प्रकार के निर्माण में बदल गए

for ( var i=0; i<d1.topics.length; i++) { //... } * This source code was highlighted with Source Code Highlighter .

सर्विस ऑपरेशंस के साथ हैंग हो गया, स्टैक में प्रवेश करना, कंप्यूटिंग इटरेटर इत्यादि।

इस निर्माण को डेटा ऑब्जेक्ट के रूप में संदर्भित किया जाता है । यह आमतौर पर हैश की एक सरणी है, लेकिन संभवतः सरणियों के एक सरणी का उपयोग कर रहा है। निम्नलिखित एक वस्तु को कॉल करने के लिए पूर्ण सिंटैक्स का वर्णन करता है, जिसमें डेटा स्रोत, एक स्लाइस, एक विधि है जिसे प्रत्येक प्रवाह पर निष्पादित किया जाता है।

5. ए। हम चर {#title} पर कॉल देखते हैं। पिछली बार के विपरीत, यहां इस चर को कॉल करने के लिए संदर्भ विषय सरणी का वर्तमान पुनरावृत्त हैश है। इस संदर्भ में d1.title मान कैसे प्राप्त करें? आपको टेम्पलेट तर्क 'tpl_sambuka' का उपयोग करने की आवश्यकता है, यह इस तरह दिखता है {@ tpl_sambuka.title}। वैरिएबल d1.topics [i] .title में कॉल का पूरा सिंटैक्स है {# topic.title}, यानी यह हमेशा ऑब्जेक्ट के नाम से शुरू होता है। किसी ऑब्जेक्ट के नेस्टेड तत्वों तक पहुंच हमेशा ऑब्जेक्ट के नाम को निर्दिष्ट करके शुरू होती है।

5. बी। सशर्त ऑपरेटर यदि (एक्सप) {तब}। ऍक्स्प के रूप में, उपरोक्त चर का उपयोग किया जा सकता है (लेकिन घुंघराले ब्रेसिज़ के बिना) और जावास्क्रिप्ट ऑपरेटरों। और यहां आपको सावधान रहने की जरूरत है। हमें याद है कि टेम्प्लेट भी सर्वर भाषा द्वारा उपयोग किए जाते हैं, इसलिए आपको संगतता के बारे में याद रखना होगा।

7. और यहाँ यह है, फिर से html, बस html।

अब ऑपरेटरों के बारे में थोड़ा और

- चर, वे क्या खाते हैं और इसका उपयोग कैसे करें:

{{$ Cfg.path.to.element} $ jsd {'पथ'} {'से'} {{तत्व '} तक पहुंच

{#title}, {# topic.title}, {# _current.title} सभी एक ही चर के संदर्भ हैं

{# list.path.to.element} किसी सूची ऑब्जेक्ट के नेस्टेड तत्व

11. "@ आईरो [# टॉपिक्स._लेवल_रो -1] शीर्षक} वस्तुओं और टेम्पलेट तर्कों की वर्तमान हैश का ढेर। # विषय ._velvel_i विषय वस्तु के वर्तमान हैश के घोंसले के स्तर। कुल यह d1.title वैरिएबल का मान है

3. चर लूप पुनरावृत्ति।

{{}, {# विषय। #}, {#_iterator}, {# विषय ._iterator}

ये केवल एक ही स्थिति (मानव, मशीन तर्क के लिए नहीं) के साथ एक चर (मैं चक्र में) के सभी मान हैं जो कि 1 से शुरू होता है। यह है कि, सूचक 0 ... 5 के साथ एक चक्र के लिए, चर 1 मान लेगा ... 6

4. पूर्ण वस्तु वाक्य रचना

{% nameobj => # source.obj [3..5]: myloopfunction} ... {/% nameobj}

किसी ऑब्जेक्ट को कॉल करने के लिए यह पूर्ण सिंटैक्स है।

यदि हम स्रोत (# source.obj) निर्दिष्ट नहीं करते हैं, तो डेटा वर्तमान हैश के चर {#nameobj} से लिया जाएगा।

5. ब्लॉक

यदि हम कोड के कुछ टुकड़े को {@myblockname} html {/ @ myblockname} में लपेटते हैं, तो बाद में उसी टेम्पलेट में हम इस ब्लॉक {@ block.myblockname.html} का उपयोग कर सकते हैं - इस जगह को हम टैग के द्वारा तैयार किए गए नाम से बदल देंगे। पहले से। उसी समय, .sub संशोधक टैग किए गए टेम्प्लेट को निष्पादित करते हुए, फ़्रेम किए गए अनुभाग को सम्मिलित करेगा।

6. बाहरी टेम्पलेट्स से ब्लॉक

Config.pm में हमारे प्रवेश का उदाहरण

@jslib = ( { name = > 'myfirst', list_tpl = > [ 'tpl_sambuka' ], blocks = > { tpl_auth = > [ 'auth_form' ] } } ); * This source code was highlighted with Source Code Highlighter .

हमने लिखा है कि हम tpl_auth टेम्प्लेट से ओडिट_फॉर्म ब्लॉक का उपयोग करना चाहते हैं। टेम्पलेट में आप उपयोग कर सकते हैं

{@ block.tpl_auth.auth_form.html} HTML की तरह ही पेस्ट करें

{@ ब्लॉक .pl_auth.auth_form.sub} निर्दिष्ट कोड चलाकर टेम्पलेट में पेस्ट करें

6. बढ़ोत्तरी

{और tpl_myother_tpl}

Tpl_myother_tpl को वर्तमान टेम्प्लेट में डालें, जबकि इसमें मौजूद हैश को तथाकथित संदर्भ से हैश किया जाएगा। ओह, कितना भ्रामक है।

{और tpl_myother_tpl => # source.data}

इस तरह से समावेश को बुलाकर - हम इसे वर्तमान हैश # source.data के रूप में इंगित करते हैं, यह समावेश द्वारा उपलब्ध तर्क होंगे

{@ tpl_myother_tpl.title} myother टेम्पलेट के भीतर # source.data.title के बराबर है

ब्लॉक, निष्कर्ष और पुनरावृत्ति के साथ उदाहरण

यहाँ अंतिम उदाहरण है, जिसमें हम बाहरी टेम्प्लेट, इंक्लूज़न, करंट टेम्प्लेट के ब्लॉक से रीक्रसिव ट्री ट्रैवर्सल बनाने के लिए ब्लॉक का उपयोग करेंगे।

Tpl / area.htm टेम्पलेट

< h1 > {#title} </ h1 >
{और inc_header = > #headerinfo}
{} @Tree
< ul >
{% मेनू = > #childs}
< li id = "li - {# id}" >
< p > [{#}] {#title} </ p >
{? #childs}
{@ block.tree.sub}
{/}
</ li >
{/% मेनू}
</ ul >
{/ @ पेड़}
< h4 > यहां दूसरे टेम्प्लेट से एक ब्लॉक है </ h4 >
{@ block.tpl_auth.auth_form.html}
* इस सोर्स कोड को सोर्स कोड हाइलाइटर के साथ हाइलाइट किया गया था।

Tpl / Cort.htm टेम्प्लेट की ओर से स्थित_ऑर्म_फॉर्म ब्लॉक

{@auth_form} < div id ="d-auth" > : < input type ="text" value ="" >< br > : < input type ="password" value ="" >< br > < input type ="button" value ="" > </ div > {/@auth_form} * This source code was highlighted with Source Code Highlighter .

जावास्क्रिप्ट कोड और डेटा

var d2 = { headerinfo : { title: ' ' }, title: ' – !' , childs : [ { id : 1, title : ' ' }, { id : 2, title : ' ' , childs : [ { id : 5, title : ' ' }, { id : 6, title : ' ' , childs : [ { id : 8, title : ' ' }, { id : 9, title : ' ' } ] }, { id : 7, title : ' ' } ] }, { id : 3, title : ' ' }, { id : 4, title : ' ' } ] }; var jstpl = new myfirst(); var html2 = jstpl.tpl( 'tpl_area' ,d2); * This source code was highlighted with Source Code Highlighter .

हमें यह html प्राप्त होता है:

< h1 > – ! </ h1 > < h3 > </ h3 > < ul > < li id ="li-1" >< p > [ 1 ] </ p ></ li > < li id ="li-2" > < p > [ 2 ] </ p > < ul > < li id ="li-5" >< p > [ 1 ] </ p ></ li > < li id ="li-6" > < p > [ 2 ] </ p > < ul > < li id ="li-8" >< p > [ 1 ] </ p ></ li > < li id ="li-9" >< p > [ 2 ] </ p ></ li > </ ul > </ li > < li id ="li-7" >< p > [ 3 ] </ p ></ li > </ ul > </ li > < li id ="li-3" >< p > [ 3 ] </ p ></ li > < li id ="li-4" >< p > [ 4 ] </ p ></ li > </ ul > < h4 > </ h4 > < div id ="d-auth" > : < input id ="login" class ="inp" value ="" type ="text" > : < input id ="pswd" class ="inp " value ="" type ="password" > < input id ="btn-login" value ="" type ="button" > </ div > * This source code was highlighted with Source Code Highlighter .

हम इसे सुलझाते हैं ...

मैंने कभी उल्लेख नहीं किया है कि टेम्प्लेट संपादित करने के बाद आपको स्क्रिप्ट को हर बार चलाने की आवश्यकता होती है ।/bin/jsgen - यह समाधान के अंधेरे पक्षों में से एक है। केवल संशोधित टेम्प्लेट को पुनर्जीवित किया जाएगा (फ़ाइल संशोधन समय की टाइमस्टैम्प की निगरानी की जाती है)। सभी टेम्प्लेट के जबरन पुनर्जनन के लिए, आपको -all कुंजी के साथ स्क्रिप्ट को चलाने की आवश्यकता है

./bin/jsgen -all

Jsgen को संबंधित अधिकार देना न भूलें

चामोद 775

एक और बिंदु। Config.pm में हमारे पास एक सरणी है

@templates = ( { pm = > "Tpl", ext = > '.htm', dir = > "tpl" }, { pm = > "Inc", ext = > '.inc', dir = > "inc" } ); * This source code was highlighted with Source Code Highlighter .

वह हमें बताता है कि रूट डायरेक्टरी, tpl और inc में दो फोल्डर हैं, जिनमें क्रमशः एक्सटेंशन .htm और .inc के साथ टेम्प्लेट फाइलें होती हैं। इन फ़ोल्डरों में सबफ़ोल्डर हो सकते हैं (इसे कॉन्फ़िगरेशन में प्रतिबिंबित करने की आवश्यकता नहीं है)। मान लीजिए हमने एक फाइल बनाई

inc / news / rubric / index.inc

आपको इस टेम्पलेट को 'inc_news_rubric_index' नाम से एक्सेस करना होगा

Myfirst.js फ़ाइल / js / tpl निर्देशिका में है (config.pm => $ cfg {jspl}}

जैसा कि ऊपर उल्लेख किया गया है, हम विभिन्न टेम्पलेट बिल्ड करना चाहते हैं।

मैं फिर से config.pm में हमारी प्रविष्टि का एक उदाहरण दूंगा

@jslib = ( { name = > 'myfirst', list_tpl = > [ ... ], blocks = > {...} },{ name = > 'mysecond', list_tpl = > [ ... ], blocks = > {...} } ); * This source code was highlighted with Source Code Highlighter .

@Jslib सरणी में ऐसी असेंबली के बारे में जानकारी है।

नाम - एक ही समय में फ़ाइल और कक्षा का नाम।

list_tpl - सभी टेम्पलेट (दोनों tpl फ़ोल्डर से, और inc से, और आपके द्वारा जोड़े गए किसी भी अन्य व्यक्ति (डेटा में शामिल नहीं) और कॉन्फ़िगरेशन में वर्णित हैं:

ब्लॉक - उन टेम्प्लेट के नाम और उनमें ब्लॉक जिन्हें आप विधानसभा में उपयोग करेंगे

Area.htm टेम्पलेट में पंक्ति संख्याओं द्वारा:

2. हम कॉल सहित inc / header.inc और इसे वर्तमान हैश के रूप में d2.headerinfo पास करते हैं

4., 15। एक पेड़ ब्लॉक घोषित करें

6., 13। हम एक मेनू ऑब्जेक्ट घोषित करते हैं, वर्तमान हैश से #childs को डेटा स्रोत के रूप में पारित किया जाता है। पुनरावृत्ति के लिए, यह महत्वपूर्ण है कि मूल तत्व और वंशजों में यह समान है। डेटा का एक उदाहरण ऊपर दिया गया है।

फ़ंक्शन के रूप में निर्दिष्ट ब्लॉक को कॉल करें। यही है, ब्लॉक टैग द्वारा तैयार किए गए सभी कोड वर्तमान हैश के साथ निष्पादित होंगे (#childs के वंशजों की उपस्थिति के लिए स्थिति की जांच)

18. प्लेन html के रूप में tpl / Cort.htm टेम्प्लेट से बाहरी ओटर_फॉर्म ब्लॉक को कॉल करें

अंत

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

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

सभी उल्लिखित फ़ाइलों का स्रोत कोड, लिंक

फ़ाइल बिन / कोर / जेएस / विन्यास को ठीक करने के लिए मत भूलना ।pm

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