🙅🏿 🍁 👴🏽 MaskJS, चलो टेम्पलेट इंजन, या नई बाइक के बारे में बात करते हैं 🤳 ⚰️ 🚑

यहां, आखिरकार, वे कई साइकिलों में से एक के साथ लोगों को साझा करने के लिए चारों ओर हो गए (जैसा कि उन्हें अब व्यक्तिगत उपलब्धियों कहा जाता है)। हबराकत से पहले, इस समाधान के कुछ पक्ष और विपक्ष:
पेशेवरों से:

jsperf गति (precompiled टेम्पलेट्स के साथ परीक्षण: jsperf )
एक्स्टेंसिबिलिटी: = कस्टम नियंत्रण, टेम्पलेट डेटा परिवर्तन
डेटा बाइंडिंग
आगे कैशिंग के लिए json में संकलन
अच्छा वाक्यविन्यास (तर्क और संरचना का कोई मिश्मश नहीं)

नुकसान की:

टेम्पलेट डेटा केवल विशेषताओं और शाब्दिक में हो सकता है (हालांकि, यह विश्वास करें - यह पर्याप्त है)

यदि विषय दिलचस्प है -

प्रविष्टि

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

थोड़ा इतिहास

कुछ साल पहले मुझे String.format('N: #{a} : #{b}',{a:1,b:2}) एक फंक्शन की जरूरत थी।
मुझे जल्द ही एहसास हुआ कि इसका उपयोग html को प्रारूपित करने के लिए, अधिकांश भाग के लिए, मेरे हाथ बंधे हैं। सब के बाद, एक हालत, सशर्त दृश्यता और सूचियों द्वारा स्वरूपण चाहता है। विभिन्न टेम्पलेट इंजनों को देखने के बाद, मुझे html और जावास्क्रिप्ट के मिश्रण के लिए एक जंगली घृणा महसूस हुई, साथ with(){} और eval/new Function('') भी कृपया नहीं किया। यह सोचकर कि "मुझे वास्तव में थोड़ी ज़रूरत है" और अपने लिए लिखने का फैसला किया। तो दो टैग list और visible और #{a==1?1:-1} जैसे प्रारूप का जन्म हुआ। मुझे सिर्फ एक regexp के साथ टैग ढूंढना था, और String.format । और डेढ़ साल, इस इंजन ने पूरी तरह से अपने उद्देश्य की सेवा की - यह फुर्तीला और विश्वसनीय लोगों की तुलना में अधिक विश्वसनीय था।

"और हम हमेशा पर्याप्त नहीं हैं ..."

यह दुर्भाग्यपूर्ण है, लेकिन हम इतने व्यवस्थित हैं - ठीक है, कम से कम मैं हूं। मैं इसे और भी तेजी से, और भी अधिक विस्तार से चाहता था और इसलिए कि html / जावास्क्रिप्ट मेस के बिना आगे। उस समय मैं निश्चित रूप से जानता था: मुझे कस्टम टैग चाहिए - ताकि मैं प्लेसहोल्डर के बिना दस बार एक ही HTML संरचना नहीं लिखूंगा (ताकि घर में डालने के बाद मैं वहां प्रस्तुत करूं) । और अब, जैसे ही मैं अतिरिक्त टैग को संसाधित करने के लिए पार्सर को खत्म करने के लिए बैठ गया, तब, बाहर, कला की इच्छा, जो शिथिल होने लगी, जाग उठा - " फिर से लिखना। कोड को फिर से लिखना। यह 93 वें के फोर्ड मोंडो है। और अब पहले से ही सहस्त्राब्दी हो चुका है। हां, वहाँ है। और टेम्प्लेट का सिंटैक्स अलग है। क्या आपने CoffeeScript Sass / Less ZenCoding देखी है? जिस से वे कहते हैं, उसे फिर से लिखें, अन्यथा मैं आपको सो जाने नहीं देता - बस पता है । " और इस दबाव में मैं विरोध नहीं कर सका। लेकिन फिर भी, मुख्य प्राथमिकता इंजन की गति थी - किसी को भी एक सुंदर की आवश्यकता नहीं है, लेकिन 100 एचपी के साथ। शुरुआत में कार।

चलो व्यापार के लिए नीचे उतरो: लकड़ी

चूंकि हम अपने स्वयं के सिंटैक्स का उपयोग करते हैं, इसलिए इसे एक पेड़ में बदलना चाहिए। हमारे पास दो प्रकार के नोड हैं: टैग = {tagName:'someTagName', attr: { key:'value'}, nodes:[] } और लिटरल = {content:'Some String'} । और पुराने टेम्पलेट इंजन का उपयोग करने के 1.5 वर्षों के बाद से, मुझे यह याद नहीं है कि मैं टेम्प्लेट डेटा को टैग या विशेषता नाम के नाम पर प्रतिस्थापित करूंगा, फिर टेम्प्लेट और विश्लेषक की सादगी के लिए, हम केवल उनमें डेटा डालना संभव करेंगे। इसलिए, नोड्स निम्न रूप में होंगे: टैग: = {tagName:'name', attr: { key:('value'||function)}, nodes:[] } और लिटरल: = {content:('Some String'||function)} । जहां function एक फ़ंक्शन है जो टेम्पलेट डेटा को प्रतिस्थापित करता है और यह केवल उन मूल्यों के लिए है जिनकी उन्हें आवश्यकता है। इसलिए हमने एक पेड़ लगाया, अब तक कुछ भी जटिल नहीं है ( यह या तो अधिक जटिल नहीं होगा )।

एनालाइजर / पार्सर

दिलचस्प अंक:

हम रैखिक रूप से विश्लेषण करते हैं, यदि संभव हो तो, आगे "प्रतिस्थापन" के लिए वर्गों पर भी कूद सकते हैं
फ़ंक्शन कॉल का कम से कम उपयोग करें, कोई भी पुनरावृत्ति नहीं
विश्लेषण के लिए हम ऑब्जेक्ट का उपयोग करते हैं: var T = {index:0 /* currentIndex */, length:template.length, template:template} । अतिरिक्त कार्यों को कॉल करते समय, हम इसे पास करते हैं (या बल्कि, इसके लिए एक लिंक पारित किया जाता है)। इस तरह से template string नकल नहीं की जाती है
charCodeAt - विशेष रूप से charAt या [] की तुलना में अधिक तेज़ नहीं है, लेकिन आगे की संख्या के साथ रोबोट तेज़ है

अपने आप को पार्स करना सरल रूप से सरल है - यह 40 लाइनें है। (विशेषता पार्सिंग को एक अलग फ़ंक्शन के रूप में नहीं निकालना होगा, लेकिन दृश्यता खो जाएगी)

कोड का टुकड़ा

 var current = T; for (; T.index < T.length; T.index++) { var c = T.template.charCodeAt(T.index); switch (c) { case 32: //" " continue; case 39: // "'"   T.index++; var content = T.sliceToChar("'"); //  sliceToChar  indexOf    'escape character' //  . indexOf  ,  ,      charCodeAt/charAt/[] if (~content.indexOf('#{')) content = T.serialize == null ? this.toFunction(content) : { template: content }; current.nodes.push({ content: content }); if (current.__single) { //   ,   ,   ;  div > ul > li > span > 'Some' if (current == null) continue; do (current = current.parent) while (current != null && current.__single != null); } continue; case 62: /* '>' */ current.__single = true; continue; case 123: /* '{' */ continue; case 59: /* ';' */ case 125: /* '}' */ if (current == null) continue; //   ; ,   } -    do(current = current.parent) while (current != null && current.__single != null); continue; } //    -  tag   var start = T.index; do(c = T.template.charCodeAt(++T.index)) while (c !== 32 && c !== 35 && c !== 46 && c !== 59 && c !== 123); /** while !: ' ', # , . , ; , { */ var tag = { tagName: T.template.substring(start, T.index), parent: current }; current.nodes.push(tag); current = tag; this.parseAttributes(T, current); //    ; > {,     T.index--; }

डिजाइनर

पेड़ होने के नाते, डॉक्यूमेंट में डालने के लिए html string का निर्माण करना बेकार है, आपको तुरंत ही documentFragment निर्माण करना होगा (हालाँकि function renderHtml भी छोड़ दिया गया है, बस मामले में) । यह पार्सिंग पर बिताए गए समय की बहुत भरपाई करता है।
प्रक्रिया फिर से तुच्छ है:

कोड का टुकड़ा

 function buildDom(node, values, container) { if (container == null) container = document.createDocumentFragment(); if (node instanceof Array) { for (var i = 0, length = node.length; i < length; i++) buildDom(node[i], values, container); return container; } if (CustomTags.all[node.tagName] != null) { var custom = new CustomTags.all[node.tagName](); for (var key in node) custom[key] = node[key]; custom.render(values, container); return container; } if (node.content != null) { //  container.appendChild(document.createTextNode(typeof node.content === 'function' ? node.content(values) : node.content)); return container; } var tag = document.createElement(node.tagName); for (var key in node.attr) { var value = typeof node.attr[key] == 'function' ? node.attr[key](values) : node.attr[key]; if (value) tag.setAttribute(key, value); } if (node.nodes != null) { buildDom(node.nodes, values, tag); } container.appendChild(tag); return container; }

कस्टम नियंत्रण

जैसा कि आप ऊपर दिए गए कोड से देख सकते हैं, कस्टम नियंत्रण दृश्य दर्ज करते हैं। यदि कंस्ट्रक्टर एक पंजीकृत टैग हैंडलर का सामना करता है, तो यह एक हैंडलर ऑब्जेक्ट बनाएगा, attr और nodes मानों की एक shallow copy बनाता है, और रेंडर फ़ंक्शन को असेंबली संदर्भ पास करता है। यही है, हमारे नियंत्रण को प्रोटोटाइप में .render(currentValues, container) फ़ंक्शन .render(currentValues, container) को लागू करना चाहिए

Function (टेम्प्लेटस्ट्रिंग)

दरअसल यह वह जगह है जहां जादू होता है। सच है, आप इसे जादू नहीं कह सकते, लेकिन मैं इसे बहुत पसंद करूंगा। वास्तव में, यहां हमें अपना डेटा डालने के लिए पुर्ज़े मिलते हैं, यह

या इनपुट डेटा के गुणों की कुंजी, "पुनरावर्तन" #{obj.other.value}
या ट्रांसफॉर्मर फ़ंक्शन को कॉल करें #{fnName:line} । यदि fnName एक रिक्त स्ट्रिंग है, तो यह माना जाता है कि लाइन एक शर्त है और ValueUtilities.condition(line, values) फ़ंक्शन द्वारा संतुष्ट हो जाएगी

, उन्हें संसाधित करें और उन्हें टेम्पलेट में पेस्ट करें।

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

उदाहरण
स्रोत कोड

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

सौभाग्य है

MaskJS, चलो टेम्पलेट इंजन, या नई बाइक के बारे में बात करते हैं