DIY डोजो विजेट

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


जैसा कि आप जानते हैं, जावास्क्रिप्ट में मूल वर्ग का समर्थन नहीं है, और लगभग हर JS फ्रेमवर्क इस समस्या को एक या दूसरे तरीके से हल करता है।
Dojo इसके लिए निम्नलिखित निर्माण का उपयोग करता है।

dojo.declare( ' ', [1,2,...], { / } ); 

हमारा विजेट दो वर्गों को प्राप्त करेगा - आधार dijit._Widget और dijit._Templated , जिसका उद्देश्य पैरामीटर में इस मामले में परिभाषित टेम्पलेट से DOM नोड बनाना है।
टेम्पलेट ।
Dijit._Widget वर्ग कई विशेष विधियाँ प्रदान करता है (आप उनमें से एक सूची यहाँ पा सकते हैं), हम पोस्टक्रिएट पद्धति का उपयोग करेंगे, जिसे विजेट बनाने के बाद बुलाया जाएगा और इसे ओवरराइड किया जाएगा।

  postCreate : function () { this.digits = dojo.query('.digit', this.containerNode); this.render(); }, 

इस पद्धति में, हम अंकीय वर्ग ( स्पैन तत्वों जो संख्या प्रदर्शित करेंगे) और कस्टम रेंडर विधि को कॉल करते हुए कंटेनरएनोड ( डोज़ो एटाचॉप्टर विशेषता के मूल्य) में निहित नोड्स का एक संग्रह संग्रहीत करते हैं।
रेंडर विधि को हर बार सूचक मूल्य परिवर्तन ( सेटवैल्यू विधि) कहा जाता है। इसमें, हम नोड्स के सहेजे गए संग्रह से गुजरते हैं और प्रत्येक तत्व को एक संबंधित वर्ग ( digit_0, digit_1, ... digit_9 ) निर्दिष्ट करते हैं । विधि के कार्यान्वयन के लिए विस्तृत विवरण की आवश्यकता नहीं है, इसलिए मैं पूर्ण विजेट कोड दूंगा:

  dojo.declare( 'LedIndicator', [dijit._Widget,dijit._Templated], { currentValue : '000000', templateString: "<div>" + '<span class="led" dojoAttachPoint="containerNode">' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + "</div>" , postCreate : function () { this.digits = dojo.query('.digit', this.containerNode); this.render(); }, render : function () { var i = 0; var dc = Math.min(this.digits.length, this.currentValue.length); this.digits.removeClass(); for (i=0; i < dc; i++) { dojo.addClass(this.digits[i],'digit_'+this.currentValue.charAt(i)); } }, setValue : function (value) { this.currentValue = value; this.render(); } } ); 

शायद यही सब है, अब हम मार्कअप का उपयोग करके विजेट का एक उदाहरण बना सकते हैं

 <div dojoType="LedIndicator" id="led_1" class="led"></div> 

मैं सीएसएस नहीं दूंगा - जैसा कि आप शायद पहले ही अनुमान लगा चुके हैं, संग्रह के सभी नोड्स में संख्याओं के साथ एक पृष्ठभूमि है, लेकिन एक अलग स्थिति में।

निष्कर्ष

Dojo के लिए एक विजेट बनाने के दो तरीके हैं - घोषणात्मक और प्रोग्रामेटिक।

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

लेख पूर्ण और प्रतिभाशाली होने का दावा नहीं करता है, लेकिन फिर भी, मुझे आशा है कि यह आपके लिए उपयोगी होगा।