💆🏾 👩🏽‍🎨 🚗 हम अपने जावास्क्रिप्ट टेम्पलेट इंजन लिखते हैं 👩‍🎓 😠 👨🏻‍🏫

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

दरअसल, अगर दिलचस्पी है, तो कटौती के तहत कुछ नोट और निष्कर्ष निर्माण प्रक्रिया पर।

उन लोगों के लिए जिन्हें केवल देखने की आवश्यकता है: परिणाम , बिल्ली ।

दिए गए:

स्रोत टेम्पलेट JS स्ट्रिंग () है, और डेटा JS ऑब्जेक्ट () है।
फॉर्म के ब्लॉक {% नाम%} बॉडी {% /%} , असीमित नेस्टिंग संभव है ।
यदि नाम मान एक सूची है , तो सभी तत्वों को प्रदर्शित किया जाता है, अन्यथा यदि अपरिभाषित नहीं है, तो एक तत्व प्रदर्शित किया जाता है।
प्रतिस्थापन देखें: {{नाम}} ।
ब्लॉक और प्रतिस्थापन में, नाम के रूप में बिंदुओं का उपयोग करना संभव है , उदाहरण के लिए {{।}} या {%।%} , जहां बिंदु शीर्ष- स्तर की वस्तु का वर्तमान तत्व होगा।
अभी भी टिप्पणियां हैं - यह {# किसी भी टिप्पणी w \ wo मल्टीलाइन #} है ।
फ़िल्टर स्वयं मूल्यों के लिए संभव हैं; वे एक बृहदान्त्र के माध्यम से निर्दिष्ट किए जाते हैं: {{।: ट्रिम: कैपिटलाइज़ ...}} ।

यह काम करना चाहिए:

var str = render (tpl, obj);

साबित:
आत्म-सम्मान के लिए +1 ।

UPD 2 : मैं अभी स्पष्ट रूप से "स्पष्ट रूप से समझने के लिए" कहूंगा कि क्या है और क्यों, आपको ऐसा करने की आवश्यकता है, अधिमानतः डिबगर के साथ।
UPD 3 : यह "उंगलियों पर" है। अभी भी "अनुकूलन" करने के लिए कहाँ है। लेकिन यह बहुत कम स्पष्ट होगा।

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

क्योंकि चूंकि स्रोत टेम्पलेट एक स्ट्रिंग है, आप नियमित रूप से लाभ ले सकते हैं।

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

 // to cut the comments tpl = tpl.replace ( /\{#[^]*?#\}/g, '' );

संकेत: [^] किसी भी चरित्र का मतलब है, * - जितनी बार आवश्यक हो।

अब आप सोच सकते हैं कि हम "स्वच्छ" परिणाम को कैसे पार्स करेंगे।
चूंकि ब्लॉक संभव है नेस्टेड हैं, मैं सुझाव देता हूं कि सब कुछ एक पेड़ में संग्रहीत किया जाए।
पेड़ के प्रत्येक स्तर पर जेएस अर्रे () होंगे, जिनके तत्वों में एक समान संरचना हो सकती है।

इस सरणी को बनाने के लिए आपको मक्खियों को कटलेट से अलग करना होगा।
इसके लिए, मैंने String.split () और String.match () का उपयोग किया ।

हमें obj ऑब्जेक्ट के अंदर स्ट्रिंग वैल नाम पर एक गहरी खोज की भी आवश्यकता है।

लागू getObjDeep विकल्प:

 var deeps = function (obj, val) { var hs = val.split('.'); var len = hs.length; var deep; var num = 0; for (var i = 0; i < len; i++) { var el = hs[i]; if (deep) { if (deep[el]) { deep = deep[el]; num++; } } else { if (obj[el]) { deep = obj[el]; num++; } } } if (num == len) { return deep; } else { return undefined; } };

और तुरंत मैं THANKS, सब्ज़ी को लालची मात्रात्मक निर्धारण के लिए कहूंगा ।

UPD 1 : अंक # 2 के लिए lynx1983 का धन्यवाद।

इसलिए, स्ट्रिंग को भागों में विभाजित करें और तत्वों से मेल खाता है:

 //   : // , , , // ,   ,    var ptn = /\{\%\s*[a-zA-Z0-9._/:-]+?\s*\%\}/g; //   var parts = tpl.split (ptn); //   var matches = tpl.match (ptn);

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

 //   var blocks = []; //  var curnt = []; if( matches ){ // .. .. null var len = matches.length; for ( var i = 0; i < len; i++ ) { //  {%  %},    trim var str = matches[i].replace (/^\{\%\s*|\s*\%\}$/g, ''); if (str === '/') { // finalise block // ... } else { // make block // ... } // ...

यहां ब्लॉक चयनित ब्लॉकों के साथ परिणामी सरणी है, और वर्तमान घोंसले के शिकार के साथ सरणी है।

लूप के प्रत्येक चरण में, हम यह निर्धारित करते हैं कि अब क्या है, ब्लॉक या अंत की शुरुआत।
यदि ब्लॉक की शुरुआत, अर्थात्। str! == '/' , फिर एक नया तत्व बनाएं और इसे एक ऐरे में पुश करें।
और साथ ही इसे कलश में धकेल दें। हमें यह समझने की जरूरत है कि हम किस स्तर पर हैं।
रास्ते के साथ, हम ब्लॉक में खुद को लाइनों में प्रवेश करते हैं।
तदनुसार, यदि हमारे पास एक खाली पेटी है, तो हम पेड़ के शून्य स्तर पर हैं।
यदि curnt खाली नहीं है, तो आपको अंतिम curnt के नेस्टेड तत्व में प्रवेश करने की आवश्यकता है।

 //    var cln = curnt.length; if (cln == 0) { // ..   ,         blocks.push ( struct ); //   ,    curnt.push ( struct ); } else { //    nested    curnt[cln - 1].nest.push ( struct ); //    ""      curnt var last = curnt[cln - 1].nest.length - 1; curnt.push ( curnt[cln - 1].nest [ last ] ); }

तदनुसार, सरणी का प्रत्येक तत्व न्यूनतम है:

 var struct = { //  obj   cnt: deeps( obj, str ), //   nest: [], //      be4e: parts[ i + 1 ], // str -- ,     // cnt -- -,       af3e: { cnt: null, str: '' } };

क्योंकि हमारे पास ऐसी स्थिति हो सकती है जहां ब्लॉक के बाद कुछ और हो, तो af3e.str {ब्लॉक /%} वर्तमान ब्लॉक के तुरंत बाद की रेखा होनी चाहिए। हम ब्लॉक के पूरा होने के समय सभी आवश्यक लिंक नीचे रख देंगे, और अधिक स्पष्ट रूप से।
उसी समय, हम कर्ट तत्व के अंतिम तत्व को हटा देते हैं।

 if (str === '/') { //   curnt //   //    curnt [cln - 1].af3e = { cnt: ( curnt [ cln - 2 ] ? curnt [ cln - 2 ].cnt : obj ), str: parts[ i + 1 ] }; curnt.pop();

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

 //        var stars = [ [ parts[0], obj ] ]; parseBlocks( blocks, stars );

पार्सेब्लॉक का एक उदाहरण दृश्य ()

 var parseBlocks = function ( blocks, stars ) { var len = blocks.length; for (var i = 0; i < len; i++) { var block = blocks [i]; //    obj   if (block.cnt) { var current = block.cnt; //   switch ( Object.prototype.toString.call( current ) ) { //     case '[object Array]': var len1 = current.length; for ( var k = 0; k < len1; k++ ) { //   stars       stars.push ( [ block.be4e, current[k] ] ); //    parseBlocks( block.nest, stars ); } break; //     case '[object Object]': for (var k in current) { if (current.hasOwnProperty(k)) { //   stars       stars.push ( [ block.be4e, current[k] ] ); //    parseBlocks( block.nest, stars ); } } break; //       ,    default: stars.push ( [ block.be4e, current ] ); parseBlocks( block.nest, stars ); } //   stars ,      stars.push ( [ block.af3e.str, block.af3e.cnt ] ); } } };

अगला, हम परिणामी सितारों को एक-एक करके पार्स करते हैं, और परिणाम को एक स्ट्रिंग में इकट्ठा करते हुए, हम अंतिम परिणाम प्राप्त करते हैं:

 var pstr = []; var len = stars.length; for ( var i = 0; i < len; i++ ) { pstr.push( parseStar ( stars[i][0], stars[i][1] ) ); } // : return pstr.join ('');

ParseStar का एक उदाहरण दृश्य ()

 var parseStar = function ( part, current ) { var str = ''; //   var ptn = /\{\{\s*.+?\s*\}\}/g; var parts = part.split (ptn); var matches = part.match (ptn); //    str += parts[0]; if (matches) { var len = matches.length; for (var i = 0; i < len; i++) { //     var match = matches [i]; //     trim var el = match.replace(/^\{\{\s*|\s*\}\}$/g, ''); var strel = ''; //      var deep = deeps( current, el ); //  ,      deep && ( strel += deep ); str += strel; } if (len > 0) { str += parts[ len ]; } } return str; }

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

लेकिन मेरा लक्ष्य खुद अवधारणा दिखाना था ...

और परिणाम, जैसा कि लेख की शुरुआत में पहले ही उल्लेख किया गया है, यहां पाया जा सकता है ।
अंतिम उदाहरण यहाँ है ।

मुझे उम्मीद है कि कोई काम आएगा।
आपका ध्यान के लिए धन्यवाद!

:)

हम अपने जावास्क्रिप्ट टेम्पलेट इंजन लिखते हैं

More articles: