🦈 🐝 🧑🏾‍🤝‍🧑🏼 200-लाइन कोणीय संकलक 🤛🏾 🧓🏽 🏊

नमस्कार। मेरा नाम रोमन है, और मैं साइकिल का आविष्कारक नहीं हूं। मुझे इसके चारों ओर कोणीय रूपरेखा और पारिस्थितिकी तंत्र पसंद है, और मैं इसके साथ अपने वेब एप्लिकेशन विकसित करता हूं। मेरे दृष्टिकोण से, लंबे समय में कोणीय का मुख्य लाभ HTML और टाइपस्क्रिप्ट के बीच कोड के पृथक्करण पर आधारित है, जो कि इसके डेवलपर्स में से एक द्वारा विस्तार से वर्णित किया गया था कि क्यों-कोणीय-रेंडरर्स-घटक-with.html यह लाभ एक नकारात्मक पक्ष है: सिद्धांत रूप में संकलन की आवश्यकता और रनटाइम में गतिशील रूप से संकलन घटकों की जटिलता। और मैं परिचित कोणीय टेम्पलेट सिंटैक्स का उपयोग करना चाहता हूं ताकि उपयोगकर्ता अपने एप्लिकेशन को पत्र टेम्पलेट को अनुकूलित करने, मुद्रण के लिए रिपोर्ट और स्प्रेडशीट बनाने, या xml फ़ाइलों के लिए निर्यात प्रारूप सेट करने की क्षमता दे सके! यह कैसे करना है, यह जानने के लिए, बिल्ली में आपका स्वागत है!

कार्य

सामान्य तौर पर, उपयोगकर्ता द्वारा कोणीय टेम्प्लेट का उपयोग इस तरह दिख सकता है: हमारे पास एक निश्चित डेटा सेट है:

const data = { project: 'MySuperProject', userName: 'Roman', role: 'admin', projectLink: 'https://example.com/my-super-projectproject' }

पत्र के पाठ को कॉन्फ़िगर करने का अवसर देना आवश्यक है, जो परियोजना को संपादित करने के बाद उपयोगकर्ता को भेजा जाएगा। एक कोणीय टेम्पलेट का उपयोग करते हुए, यह इस तरह दिख सकता है:

  <body>  !  {{project}}    <a href="{{projectLink}}">3D   </a> <div *ngIf="role == 'admin'">       <a href="{{projectLink}}?mode=edit"></a> </div> </body>

एनजी-टेम्पलेट पुस्तकालय

क्लाइंट (या यहां तक कि सर्वर साइड) पर कोणीय कंपाइलर का उपयोग करके इस समस्या को हल किया जा सकता है, लेकिन इसमें बहुत समय लगता है और क्लाइंट को बहुत सारे मेगाबाइट कोड को खींचने की आवश्यकता होगी। कोणीय संकलक इतना बड़ा क्यों है? यह इस तथ्य के कारण है कि यह घटकों और मॉड्यूल की रचना के लिए विविध कार्यक्षमता के समुद्र का समर्थन करता है, और इसमें स्वयं का HTML पार्सर भी शामिल है! इसलिए मैंने एक न्यूनतम कोणीय टेम्प्लेट कनवर्टर लिखने का फैसला किया जो ब्राउज़र में निर्मित HTML पार्सर का उपयोग करेगा। कुछ ही घंटों में कोड की कुछ पंक्तियों के साथ केवल 200 में ऐसा करना संभव था। मैंने गिटहब पर जनता के साथ परिणाम साझा करने का फैसला किया

एनजी-टेम्पलेट लाइब्रेरी का उपयोग करना काफी सरल है:

एनपीएम से निर्भरता स्थापित करें

 npm install --save @quanterion/ng-template

या यार्न के माध्यम से

 yarn add @quanterion/ng-template

और इसे निम्नानुसार उपयोग करें:

 import { compileTemplate, htmlToElement } from '@quanterion/ng-template'; async test() { let data = { name: 'Roman' }; let element = htmlToElement(`<div>{{name}}</div>`); await compileTemplate(element, data); alert(element.outerHTML); }

सिंटैक्स का समर्थन किया

अभिव्यक्ति {{अभिव्यक्ति}} चर और कॉल कार्यों का उपयोग करने की क्षमता के साथ
टेम्पलेट्स एनजी-टेम्पलेट
कंटेनर एनजी-कंटेनर
स्थितियाँ * ngIf + * ngIf के रूप में
चक्र * ngFor
शैलियाँ [style.xxx] = "value" और [style.xxx.px] = "value"
सशर्त कक्षाएं [class.xxx] = "मूल्य"
मान के लिए स्वचालित सदस्यता के साथ वेधशाला {{नाम $}}

अधिक विवरण के लिए ng-template.spec.ts परीक्षण देखें।

एवल का उपयोग करना

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

 const data = { a: 1, b: () => 4 }; const expression = 'a+b()'; eval('a =1; b = ??;' + expression);

गुजरने वाले कार्यों की अनुमति नहीं देता है

एक ऐसा फंक्शन बनाकर समाधान पाया गया जिसके मापदंडों में डेटा के साथ ऑब्जेक्ट के फील्ड नाम हों:

 const data = { a: 1, b: () => 4 }; let entries = [] for (let property in data ) { entries.push([property, data[property]]) } const params = entries.map(e => e[0]); const fun = new Function('code', ...params, `return eval(code)`); const args = entries.map(e => e[1]); const expression = 'a+b()'; const result = fun.call(undefined, expression , ...args);

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

स्रोत से लिंक करें

200-लाइन कोणीय संकलक

कार्य

एनजी-टेम्पलेट पुस्तकालय

सिंटैक्स का समर्थन किया

एवल का उपयोग करना

More articles: