🎬 🏴 🏫 लैकोनिक डोम लाइब्रेरी 👇🏼 👨‍⚖️ 🔎

लैक्सोनिक जावास्क्रिप्ट के साथ डीओएम उत्पन्न करने के लिए एक सहज दृष्टिकोण प्रदान करता है। लैकोनिक के लिए स्रोत कोड गिथब को अपलोड किया गया है ।

एक साधारण तालिका के तत्वों को एक दूसरे में निहित बनाने के लिए मानक DOM API का उपयोग करते समय, इस कोड की आवश्यकता होगी:

कोड का ढेर

var firstTh = document.createElement('th'); firstTh.appendChild(document.createTextNode('first name')); var secondTh = document.createElement('th'); secondTh.appendChild(document.createTextNode('last name')); var firstTr = document.createElement('tr'); firstTr.appendChild(firstTh); firstTr.appendChild(secondTh); var firstTd = document.createElement('td'); firstTd.appendChild(document.createTextNode('Joe')); var secondTd = document.createElement('td'); secondTd.appendChild(document.createTextNode('Stelmach')); var secondTr = document.createElement('tr'); secondTr.appendChild(firstTd); secondTr.appendChild(secondTd); var table = document.createElement('table'); table.appendChild(firstTr); table.appendChild(secondTr); document.body.appendChild(table);

ऐसा कोड उपयुक्त से अधिक व्यापक है - इसलिए इसकी उपस्थिति से इसके काम के परिणाम का अनुमान लगाना मुश्किल है। अब एक ही तालिका बनाने के लिए अधिक संक्षिप्त तरीके से देखें:

 $.el.table( $.el.tr( $.el.th('first name'), $.el.th('last name')), $.el.tr( $.el.td('Joe'), $.el.td('Stelmach')) ).appendTo(document.body);

लैकोनिक प्रत्येक प्रसिद्ध HTML तत्वों में से प्रत्येक के लिए $ .el नामस्थान में एक विधि जोड़ता है। जब उन्हें लॉन्च किया जाता है, तो इन विधियों को तर्कों की एक सूची दी जाती है, जिसमें एक परिवर्तनशील लंबाई होती है और इसमें बच्चों, तार, संख्या या इन प्रकार के तत्वों के सरणियाँ शामिल होती हैं। विधि का पहला तर्क एक वैकल्पिक वस्तु हो सकता है जिसमें तत्व की विशेषताएं हैं। यहाँ एक उदाहरण है:

 $.el.div({'class' : 'example'}, $.el.div('content'));

इस उदाहरण के लिए कोड इस तत्व संरचना का निर्माण करेगा:

 <div class='example'> <div>content<div/> </div>

यदि आप गैर-मानक तत्वों के साथ काम करते हैं, तो आप पहले पैरामीटर के रूप में तत्व नाम को निर्दिष्ट करते हुए सीधे $ .el कह सकते हैं। उदाहरण के लिए, निम्नलिखित उदाहरण का परिणाम पिछले एक के समान होगा:

 $.el('div', {'class' : 'example'}, $.el.div('content'));

यदि आपको अक्सर HTML तत्वों से कुछ डिज़ाइन बनाने होते हैं, तो आप उन्हें एक विशेष तत्व के रूप में पंजीकृत कर सकते हैं। आपको इसे एक नाम देना होगा और एक फ़ंक्शन निर्दिष्ट करना होगा जो इसमें आवश्यक सामग्री जोड़ता है , क्योंकि यह रूट नोड के संदर्भ के रूप में कार्य करता है। यहाँ एक उदाहरण है:

 $.el.registerElement('element', function(one, two) { this.appendChild($.el.div(one)); this.appendChild($.el.div(two)); });

इस तरह के एक तत्व को पंजीकृत करके, आप इसे सम्मिलित कर सकते हैं:

 $.el.element('first', 'second').appendTo(document.body);

यह कॉल वांछित तत्व संरचना बनाएगा:

 <div class='element'> <div>first</div> <div>second</div> </div>

लैकोनिक डोम लाइब्रेरी

More articles: