🔇 ✌️ 👨‍🎓 पृष्ठ ऑब्जेक्ट: एक तकनीक का वर्णन 🕷️ 📗 🐹

हैलो, खब्रोविट्स।

मैं डोम तत्वों के साथ बड़े पैमाने पर काम के दौरान कोड के आयोजन के लिए आपके साथ एक तकनीक साझा करना चाहता हूं। कुछ साल पहले, जब कोई रीढ़ और एमवीवीसी बिल्कुल भी नहीं था, हमने फ्रेमवर्क के बिना अच्छी पुरानी जावास्क्रिप्ट लिखी: वस्तुओं को बनाया और उन्हें एक सामान्य नृत्य में पृष्ठ पर नृत्य किया। इस तरह की प्रथा, इसमें कोई संदेह नहीं है, फिर भी भुगतान करता है, और जिस तकनीक पर चर्चा की जाएगी, वह इसके लिए लागू है।

मेरी कहानी छोटे पुस्तकालय PageObject.js (वर्तमान संस्करण v0.14, 2.6K) के बारे में है और अपने जीवन को सरल बनाने के लिए इसका उपयोग कैसे करें।

यह एक jQuery प्लगइन नहीं है, हालांकि मुझे यकीन है कि कई लोग इसे कॉल करना चाहेंगे। यह सिर्फ एक सुविधा है जो पढ़ने और लिखने के कोड को आसान बनाने के लिए चयनकर्ताओं और कुछ jQuery उपयोगिताओं का उपयोग करता है। वास्तव में, यह एक सरल jQuery उपयोगिता है।

प्रौद्योगिकी का सार

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

function Calculator() { if (this.constructor.name !== 'Calculator') { throw “No way, buddy!”; } // 1.   // 2.    // 3.   // 4.   }

PageObject.js पहले दो चरणों में मदद करता है।

 function Calculator() { if (this.constructor.name !== 'Calculator') { throw “No way, buddy!”; } var calc = this; $.turnToPageObject(calc, { template: $('#tmplCalculator').html(), containerClass: 'calc', context: { caption: "Calculator" }, selectors: { buttons: [ ':button', Calculator.getButtonName ], led: 'p' } }); // 3.   // 4.   } var calc = new Calculator; $('body').append(calc.DOM.container);

$.turnToPageObject फ़ंक्शन के बाद काम किया गया है ("एक पृष्ठ ऑब्जेक्ट में बदल जाए"), calc ऑब्जेक्ट में calc.DOM संपत्ति होगी - DOM तत्वों से भरे नामस्थान जो निर्दिष्ट चयनकर्ताओं के अनुरूप होंगे, और calc.DOM.container भी दिखाई देंगे - वास्तव में ऑब्जेक्ट का वह हिस्सा जो एप्लिकेशन में आसानी से एम्बेडेड है, वह सब कुछ का एक कंटेनर है।

यहाँ एक कैलकुलेटर के साथ पूर्ण कार्य करने का उदाहरण दिया गया है । यह उपयोगिता की सभी विशेषताओं के बारे में अधिक विस्तार से बताने के लिए बना हुआ है।

$ .turnToPageObject

पहला तर्क एक ऑब्जेक्ट होना चाहिए, जो बाद में समग्र एचटीएमएल तत्वों से भरे DOM नेमस्पेस के साथ दिखाई देता है। दूसरा तर्क विकल्प है।

यदि आप container विकल्प निर्दिष्ट नहीं करते हैं, तो कंटेनर बनाया जाएगा (किसी भी तरह से इसके बिना), और यह containerElement (डिफ़ॉल्ट DIV ) के समान तत्व होगा।

यदि आप कंटेनरक्लास निर्दिष्ट करते हैं, तो कंटेनर को एक वर्ग सौंपा जाएगा।

यदि आप template निर्दिष्ट करते हैं, तो template प्रदान किया जाएगा और उसका परिणाम कंटेनर के अंदर रखा जाएगा।

यदि आप context निर्दिष्ट नहीं करते हैं, तो टेम्पलेट को खाली संदर्भ {} के साथ प्रस्तुत किया जाएगा।

template या तो एक स्ट्रिंग या एक फ़ंक्शन हो सकता है ( Jammit JST के साथ एकीकरण)।

जब template एक फ़ंक्शन होता है, तो यह केवल संदर्भ लेता है और इसे एक स्ट्रिंग वापस करना चाहिए।

जब template एक स्ट्रिंग होता है, तो टेम्प्लेट टेम्पलेटइन का उपयोग करके templateEngine , जो अंडरस्कोर होने पर स्वचालित रूप से _.template टेम्प्लेट इंजन का उपयोग करने के लिए चूक जाता है ।

यदि आपके प्रोजेक्ट में अंडरस्कोर नहीं है, तो आपको templateEngine को कॉन्फ़िगर करने की आवश्यकता है।

 //    : $.turnToPageObject.configure({ templateEngine: window.tmpl, // http://ejohn.org/blog/javascript-micro-templating containerElement: 'strong' });

templateEngine दो तर्क लेता है - टेम्पलेट स्ट्रिंग और संदर्भ - और स्ट्रिंग को भी वापस करना चाहिए।

यदि hide विकल्प निर्दिष्ट किया जाता है, तो कंटेनर छिपाया जाएगा, जो अक्सर सुविधाजनक होता है।

और सबसे महत्वपूर्ण बात, चयनकर्ता। यदि आप selectors विकल्प (ऑब्जेक्ट) का चयन करते हैं, तो चयनकर्ताओं से मेल खाने वाले कंटेनर की सामग्री में पाए गए HTML तत्वों को DOM नेमस्पेस में उसी कुंजी का उपयोग करके रखा जाएगा। यदि template विकल्प निर्दिष्ट किया गया था, तो चयनकर्ता पहले से ही प्रदान किए गए टेम्पलेट में खोज करेंगे।

यदि चयनकर्ता द्वारा कोई तत्व नहीं मिलते हैं, तो एक चीख होगी।
यदि चयनकर्ता द्वारा एक से अधिक तत्व पाए जाते हैं, तो एक अपवाद भी होगा।
यदि आपको अभी भी चयनकर्ता द्वारा एक से अधिक तत्वों को ढूंढने और सरणी में रखने की आवश्यकता है, तो आपको चयनकर्ता मूल्य में [] (खाली वर्ग कोष्ठक) जोड़ने की आवश्यकता है - यह चयन स्वयं को सही ठहराता है।

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

यह ध्यान देने योग्य है कि चयनकर्ताओं में अतिरिक्त नामस्थान DOM संपत्ति के अंदर समान नामों के साथ नाम स्थान बनाते हैं।

शायद यही सब है।

आप परीक्षणों को पढ़कर और गीथब पर स्रोत को देखकर यह समझ सकते हैं कि यह क्या और कैसे काम करता है। निश्चित रूप से, सामान्य प्रलेखन भी उपयोगी होगा।

मुझे खुशी होगी अगर आप इस तकनीक और अपनी परियोजनाओं में ऊपर वर्णित कन्वेंशन पाते हैं। मुझे आपकी इच्छाओं और विचारों पर विशेष रूप से खुशी होगी, मुझे सवालों के जवाब देने में खुशी होगी।

पृष्ठ ऑब्जेक्ट: एक तकनीक का वर्णन

प्रौद्योगिकी का सार

$ .turnToPageObject

More articles: