मुझे DOM क्या बनाना चाहिए

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

el.innerHTML = "<div id='main'>"+hello+"world!</div>"; 

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

अंत में, मैंने अपनी खुद की लाइब्रेरी लिखने का फैसला किया जो सभी आवश्यक कार्यों को हल करता है - गर्म ट्यूब सिंटैक्स वाले टेम्पलेट से तेज़ और सुरक्षित डोम पीढ़ी।

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

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

वाक्य-विन्यास

नोड का कोई भी विवरण इसके नाम से शुरू होता है। नाम html टैग का नाम होना चाहिए। फिर हम डेकोरेटर तत्व में विभिन्न संस्थाओं को जोड़ते हैं।
.class - एक वर्ग जोड़ें।
#id - पहचानकर्ता जोड़ें।
[...] - आपको नेस्टेड नोड्स निर्दिष्ट करने की अनुमति देता है: div.parent[ span.child ]
; - एक स्तर पर नोड विभाजक: ul.menu[ li#home; li#abount ] ul.menu[ li#home; li#abount ]
:attr एक खाली विशेषता है।
:attr@value या :attr=value - विशेषता मान पास करने के विकल्पों में से एक। इस स्थिति में, मूल्य पर प्रतिबंध लगाए जाते हैं - इसमें नियंत्रण वर्ण #.[]:%@ नहीं होना चाहिए #.[]:%@ यदि विशेषता नाम "चालू" से शुरू होता है, तो एक ईवेंट हैंडलर जोड़ा जाएगा, हैंडलर का नाम मान मान होगा, और दूसरा तर्क से निकाय। हैंडलर को मानक तरीके से गतिशील रूप से जोड़ा जाएगा। और अगर नाम "jq" से शुरू होता है, तो एक jQuery घटना लटका दी जाएगी। हैंडलर का नाम दो तरह से सेट किया जा सकता है - :onclick@handler और :onclick@%handler - इन दोनों तरीकों का एक ही अर्थ है।
%variable सेट करने के लिए %variable एक सार्वभौमिक तरीका है, साथ ही पाठ डेटा को स्थानांतरित करने का एक तरीका (एचटीएमएल इकाइयां सही तरीके से प्रेषित होती हैं)। आप #%id लिख सकते हैं और फिर विशेषता नाम दूसरे पैरामीटर - मान मानचित्र से लिया जाएगा। यह एक साधारण वस्तु है, जहां प्रत्येक कुंजी टेम्पलेट में एक नाम से मेल खाती है। हाल ही में, यह एक सरणी भी हो सकती है, इस मामले में मूल्यों को क्रमिक रूप से लिया जाता है, क्योंकि टेम्पलेट संसाधित होता है। इस तरह के चर सभी मूल तत्वों - पहचानकर्ताओं, वर्गों, विशेषताओं और उनके मूल्यों के लिए समर्थित हैं।

एक तीसरा पैरामीटर भी है - यह सुनिश्चित करने के लिए ज़िम्मेदार है कि कोई अपवाद नहीं फेंका जाता है यदि आप अचानक चर का मान निर्दिष्ट करना भूल जाते हैं। मैं इसका उपयोग करने की सलाह नहीं देता। इस मामले में, "अपरिभाषित" लापता मूल्यों के लिए प्रतिस्थापित किया जाएगा।

के उपयोग

SNC फ़ंक्शन को कॉल करें, जिसमें आप आवश्यक पैरामीटर पास करते हैं।
ऊपर कुछ नमूना टेम्प्लेट दिखाए गए हैं। यहाँ एक और महान उदाहरण है:

 SNC("div #parent [" + "i.icon-open;" + "span.child%txt" + "] :data-status@%status" + ":onclick@handler" + ":jqcustomevent=jhandler", { txt:"lorem ipsum", status:1, handler:function(e){ console.log("Standart event"); }, jhandler:function(){ console.log("Custom event"); } }); 

योजनाओं

अगले विकास आइटम में चक्र शामिल होंगे। मैंने एमीट पर वाक्य रचना की जासूसी की। कुछ इस तरह होगा:

 SNC("table [ {tr [ { td } * 2 ]} * 8 ]"); 

रेडमी को अंग्रेजी में अनुवाद करना भी आवश्यक है। लेकिन यहां मैं समुदाय की मदद की उम्मीद करता हूं।

रेप: github.com/ReklatsMasters/SNC