💪🏻 👩🏿‍🔧 👨🏽‍⚖️ टाइपस्क्रिप्ट के लिए एक समानता टेम्पलेट इंजन बनाएँ ✴️ 🏖️ 🙏

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

हर कोई इस पर आ गया है

एचटीएमएल + जेएस प्रौद्योगिकी का उपयोग करके किसी ने भी जो एप्लिकेशन विकसित किए हैं, उन्हें पता है कि बहुत बार उन्हें एक दृश्य पर टेम्पलेट डेटा की समस्या को हल करना होगा। कई समाधान हैं: फ्रेमवर्क का उपयोग करना ( एक , दो , तीन , चार, और इसी तरह), और सरल तकनीक, जैसे कि:

var StringTemplate = "<div class=\"{Flag}\" >" + "<p class=\"name\" >{Name}</p>" + "<p class=\"message\" >{Text}</p>" + "<p class=\"date\" >{Date}</p>" + "</div>", html = "", Container = document.getElementById('container2'); for (var i = 0; i < TestDataLength; i++) { html += StringTemplate .replace(/\{Flag\}/g, TestData[i].Out ? "message out" : "message") .replace(/\{Name\}/g, TestData[i].Name || "") .replace(/\{Text\}/g, TestData[i].Text || "") .replace(/\{Date\}/g, TestData[i].Date.toLocaleTimeString()); } Container.innerHTML = html;

मेरी राय में, बाद की विधि, सबसे स्पष्ट और सरल है, हालांकि, इसके गठन के बाद प्रतिनिधित्व को संशोधित करने की आवश्यकता को ध्यान में नहीं रखता है। आप उस प्रत्येक तत्व के लिए id या data-id जोड़ सकते हैं जिसे हम संशोधित करने जा रहे हैं, और फिर आवश्यक तत्व का चयन करने के लिए jQuery या querySelector का उपयोग करें, लेकिन DOM खोजना एक बहुत ही संसाधन-गहन प्रक्रिया है।

क्लोजर जेएस डेवलपर के पसंदीदा दोस्त हैं!

लगातार संशोधनों की आवश्यकता होने पर सबसे तेज़ तरीका DOM को मैन्युअल रूप से बनाना है। इसके लिए तीन तरीके हैं: document.createElement (), document.createTextNode (), और (लेकिन जरूरी नहीं) document.createAttr ()। इन तरीकों के साथ अलग-अलग ब्राउज़रों में काम करना आंतरिक HTML की तुलना में धीमा भी हो सकता है, लेकिन आउटपुट में हमें एक तत्व के लिए एक पॉइंटर मिलता है और पेज कोड पहचानकर्ताओं के साथ बंद नहीं होता है।

कुछ चीनी

सबसे पहले, हम एक टमपलाटर मॉड्यूल और तीन फ़ंक्शंस बनाएंगे जो उत्पादकता बढ़ाएंगे और कोड को अधिक पठनीय बनाएंगे:

 module Templater { export function Element(TagName: string, Attributes: Object) : HTMLElement { var item:HTMLElement = document.createElement(TagName); for (var p in Attributes) if (typeof(Attributes[p]) == "string") item.setAttribute(p, Attributes[p]); else if (Attributes[p] instanceof Attr) item.setAttributeNode(Attributes[p]); return item; } export function Text(Text: string): Text { return document.createTextNode(Text); } export function Nest(Element: HTMLElement, Items: any[]): HTMLElement { var l = Items.length; for (var i = 0; i < l; i++) if (Items[i]) Element.appendChild(Items[i]); return Element; } // ...

पहला फ़ंक्शन निर्दिष्ट नाम के साथ एक टैग बनाता है और आवश्यक विशेषताओं को सेट करता है, नेस्ट - तत्वों और पाठ की एक पदानुक्रमित संरचना बनाता है - सिर्फ document.createTextNode () के लिए एक पर्याय;

डेटा संरचनाएं

चूंकि टाइपस्क्रिप्ट में विनीत टाइपिंग के रूप में ऐसी सभ्यता का लाभ है, इसलिए यह इसका उपयोग करने के लायक है। तो, हमारे पास प्रपत्र और उससे जुड़े डेटा पर एक तत्व है। चलो स्पष्ट बात करते हैं:

  export class Block { constructor (public Element: HTMLElement, public Binding) { } }

खैर, और एक सहायक संरचना जो तत्व पर कार्रवाई करेगी:

  export class Template { constructor (public Create: { (Element: { (TagName: string, Attributes: Object): HTMLElement; }, Nest: { (Element: HTMLElement, Items: any[]): HTMLElement; }, Text: { (Text: string): Text; }) : Block; }, public Update: { (Element: Block, Data); }) { } public Make(Data) { var item = this.Create(Element, Nest, Text); this.Update(item, Data); return item; } }

एक चौकस पाठक यह नोटिस करेगा कि हम टाइप किए गए अनाम कार्यों को तर्क के रूप में इंगित करते हैं। यह बहुत सुविधाजनक है: घटक डेवलपर और घटक दोनों का उपयोग करने वाले को पता चल जाएगा कि पुस्तकालय उससे क्या चाहता है।

उदाहरण का उपयोग करें

इस तरह बनाया जाता है टेम्पलेट:

 import T = Templater; var myItem = new T.Template( (Element, Nest, Text) => { var Name, Date, Text, Flag, Container; Nest(Container = Element('div', { 'class': Flag = document.createAttribute("class") } ), [ Name = Element('p', { 'class': 'name' }), Text = Element('p', { 'class': 'text' }), Date = Element('p', { 'class': 'date' }) ]); return new T.Block(Container, { Name: Name, Date: Date, Text: Text, Flag: Flag, Container: Container }); }, (Element: T.Block, Data) => { var b = Element.Binding; b.Name.innerText = Data.Name || ""; b.Date.innerText = Data.Date.toLocaleTimeString(); b.Text.innerText = Data.Text || ""; b.Flag.nodeValue = "message " + (Data.Out == true ? "out" : ""); });

टाइपस्क्रिप्ट का एक और लाभ प्रकट होता है - अनाम फ़ंक्शन (तर्कों) का एक छोटा रिकॉर्ड => {कोड}। यह कोड को पढ़ने में बहुत आसान बनाता है।
मैं प्रदर्शन कारणों के लिए पहले फ़ंक्शन में तर्क (तत्व, नेस्ट, पाठ) पास करता हूं: आखिरकार, एक फ़ंक्शन का सीधा संदर्भ एक संकेतक से अधिक तेजी से काम करता है एक मॉड्यूल के स्थिर फ़ंक्शन के लिए। ये इस मामले में स्थिति को ठीक करने के लिए जावास्क्रिप्ट और टाइपस्क्रिप्ट की विशेषताएं हैं, बस सक्षम नहीं हैं।
यह कोड क्या करता है?
पहले फ़ंक्शन (बनाएँ) का उपयोग करके, हम एक खाली दस्तावेज़ तत्व बनाते हैं, और एक जोड़ी (तत्व, बाइंडिंग) लौटाते हैं, जहां बाद वाला एक प्रकार का व्यूबाग दर्शाता है जिसमें टेम्पलेट द्वारा आवश्यक नियंत्रणों के लिंक होते हैं। ऐसे कार्य के लिए QuerySelector की अब आवश्यकता नहीं है।
दूसरा फ़ंक्शन (अपडेट) बाइंडिंग से डेटा को तत्वों से डेटा को बांधता है

डेटा सेट का परीक्षण करें

परीक्षण डेटा के लिए जिम्मेदार कोड को एक अलग मॉड्यूल में स्थानांतरित किया जा सकता है, जैसा कि पुराने पुराने .NET में है

 module Example { export class ExampleData { constructor (public Name: string, public Date: Date, public Text: string, public Out: bool) { } public static GetExampleData(count: number): any[] { var result = [], ExampleText = "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...", NameA = "John Doe", NameB = "Jane Doe", StartDate = new Date(), Interval = 300; for (var i = 0; i < count; i++) { result.push(new ExampleData( i % 2 == 1 ? NameA : NameB, StartDate, ExampleText, i % 2 == 1)); StartDate = new Date(StartDate.getTime() + Interval); } return result; } } }

टाइपस्क्रिप्ट के साथ काम करते समय, आप आनन्दित नहीं कर सकते कि इस भाषा में इस कीवर्ड का अर्थ C- जैसी प्रोग्रामिंग भाषाओं से है - वर्ग ऑब्जेक्ट की वर्तमान आवृत्ति का लिंक, और न कि "फ़ंक्शन कॉल के संदर्भ के आधार पर कुछ-कुछ"।

हम लॉन्च करते हैं

कोड की कार्यक्षमता की जांच करने के लिए, मुख्य कार्य रहता है:

 window.onload = () => { var TestDataLength = 1500, TestData = Example.ExampleData.GetExampleData(TestDataLength), Container = document.getElementById('container1'); var TestStart = new Date(); for (var i = 0; i < TestDataLength; i++) Container.appendChild(myItem.Make(TestData[i]).Element); var TestEnd = new Date(); console.log("Test completed", { time: TestEnd.getTime() - TestStart.getTime(), count: TestDataLength }); var StringTemplate = "<div class=\"{Flag}\" >" + "<p class=\"name\" >{Name}</p>" + "<p class=\"message\" >{Text}</p>" + "<p class=\"date\" >{Date}</p>" + "</div>"; var html = ""; Container = document.getElementById('container2'); TestStart = new Date(); for (var i = 0; i < TestDataLength; i++) { html += StringTemplate .replace(/\{Flag\}/g, TestData[i].Out ? "message out" : "message") .replace(/\{Name\}/g, TestData[i].Name || "") .replace(/\{Text\}/g, TestData[i].Text || "") .replace(/\{Date\}/g, TestData[i].Date.toLocaleTimeString()); } Container.innerHTML = html; TestEnd = new Date(); console.log("Test with string templater completed", { time: TestEnd.getTime() - TestStart.getTime(), count: TestDataLength }); };

और एक साधारण कमांड निष्पादित करें:
tsc templater.ts
थोड़ा इंतजार करने के बाद, कंपाइलर js में एक संकलित फ़ाइल बनाता है, जो व्यावहारिक रूप से मूल से आकार और पठनीयता में समान है। धन्यवाद Microsoft!

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

टाइपस्क्रिप्ट के लिए एक समानता टेम्पलेट इंजन बनाएँ