WebCompords चौखटे, घटक बातचीत के रूप में

जब वेब घटकों की बात आती है, तो वे अक्सर कहते हैं: "आप फ्रेमवर्क के बिना क्या चाहते हैं? वहां सब कुछ तैयार है। ” वास्तव में, वेब घटकों के समूह में शामिल मानकों के कार्यान्वयन के आधार पर रूपरेखा तैयार की जाती है। एक्स-टैग की तरह अपेक्षाकृत अच्छे भी हैं। लेकिन आज, हम अभी भी समझते हैं कि ब्राउज़र API रोजमर्रा के विकास कार्यों को हल करने के लिए कितना सरल, सुरुचिपूर्ण और शक्तिशाली है, जिसमें ब्राउज़र के निष्पादन के संदर्भ से एक दूसरे के साथ और अन्य वस्तुओं के साथ घटकों की बातचीत का आयोजन करना शामिल है, और आप हमेशा वेब घटकों के साथ भी फ्रेमवर्क का उपयोग कर सकते हैं, यहां तक ​​कि उन मानकों के साथ विकसित किए गए थे, जिनमें तंत्र के माध्यम से शामिल थे जो आज हम विश्लेषण करेंगे, कम से कम साइट पर कहा गया है ।

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

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

हमने पहले भाग में कुछ परियोजना को पहले ही स्केच कर लिया था और आज हम इसे आगे भी जारी रखेंगे।

यह एक सीमा का उल्लेख करते हुए, कम से कम वर्तमान कार्यान्वयन में, यह है कि विशेषता मान केवल एक आदिम मूल्य हो सकता है जो एक शाब्दिक और एक स्ट्रिंग के लिए reducible द्वारा निर्दिष्ट किया जाता है, लेकिन सामान्य तौर पर "objecs" को इस तरह से ट्रांसफर करना संभव है कि बाहर से एकल कोट्स और परिभाषित करने के लिए डबल का उपयोग किया जाए। मान और परियोजना के क्षेत्र।

<my-component my='{"foo": "bar"}'></my-component> 

कोड में इस मूल्य का उपयोग करने के लिए, आप एक स्वचालित मैजिक गेट्टर लागू कर सकते हैं जो उस पर JSON.parse () को कॉल करेगा।

लेकिन अभी के लिए, काउंटर का संख्यात्मक मान हमारे लिए पर्याप्त है।

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

 export class MyWebComp extends HTMLElement { constructor() { super(); } connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(html); this.updateLabel(); } updateLabel() { this.shadowRoot.querySelector('#helloLabel').textContent = 'Hello ' + this.getAttribute('greet-name') + ' ' + this.getAttribute('count'); } static get observedAttributes() { return ['count']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'count') { this.updateLabel(); } } showMessage(event) { this.setAttribute('count', this.getAttribute('count') + 1); } } 

प्रत्येक आइटम को एक स्वतंत्र, स्वचालित रूप से अद्यतन काउंटर प्राप्त हुआ।

होमवर्क: एक नंबर पर काउंटर के रूपांतरण को लागू करें और ऑटो-गेटर के माध्यम से उपयोग करें;)

बेशक, अधिक उन्नत विकल्प संभव हैं। उदाहरण के लिए, यदि आप सरल कॉलबैक और घटनाओं को ध्यान में नहीं रखते हैं, तो देशी प्रॉक्सी और समान गेटर्स और सेटर का उपयोग करके, आप रिवर्स बाइंडिंग की कार्यक्षमता को लागू कर सकते हैं।

इस तरह के एक वर्ग के साथ my-counter.js फ़ाइल जोड़ें

 export class MyCounter extends EventTarget { constructor() { super(); this.count = 0; } increment() { this.count++; this.dispatchEvent(new CustomEvent('countChanged', { detail: { count: this.count } })); } } 

हमें EventTarget से एक वर्ग विरासत में मिला है ताकि अन्य वर्ग इस वर्ग की वस्तुओं द्वारा फेंकी गई घटनाओं की सदस्यता ले सकें और एक काउंटर प्रॉपर्टी को परिभाषित कर सकें जो काउंटर वैल्यू को स्टोर करेगा।

अब घटक के लिए एक स्थिर संपत्ति के रूप में इस वर्ग का उदाहरण जोड़ें।

 <script type="module"> import { MyWebComp } from "./my-webcomp.js"; import { MyCounter } from "./my-counter.js"; let counter = new MyCounter(); Object.defineProperty(MyWebComp.prototype, 'counter', { value: counter }); customElements.define('my-webcomp', MyWebComp); </script> 

और घटक कोड में, हम वैल्यू चेंज अपडेटलेबेल () लेबल अपडेट विधि की सदस्यता लेंगे, जिसमें हम वैश्विक साझा काउंटर से मूल्य प्रदर्शन जोड़ते हैं। और क्लिक हैंडलर में, वृद्धिशील विधि के लिए एक सीधा कॉल।

 export class MyWebComp extends HTMLElement { constructor() { super(); } connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(html); this.updateLabel(); this.counter.addEventListener('countChanged', this.updateLabel.bind(this)); } updateLabel() { this.shadowRoot.querySelector('#helloLabel').textContent = 'Hello ' + this.getAttribute('greet-name') + ' ' + this.getAttribute('count') + ' ' + this.counter.count; } static get observedAttributes() { return ['count']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'count') { if (this.shadowRoot) { this.updateLabel(); } } } showMessage(event) { this.setAttribute('count', parseInt(this.getAttribute('count')) + 1); this.counter.increment(); } } 

इस तथ्य के बावजूद कि प्रत्येक तत्व को दो काउंटर प्राप्त हुए, इसके प्रत्येक मूल्यों को स्वतंत्र रूप से बढ़ाया जाएगा, लेकिन साझा काउंटर का मूल्य दोनों तत्वों के लिए समान होगा, और व्यक्तिगत मान केवल उन पर क्लिक की संख्या से निर्धारित होंगे।



इस प्रकार, हमें प्रत्यक्ष बंधन में प्रत्यक्ष बंधन मिला, और घटनाओं के उपयोग के कारण, यह मूल्य अद्यतन करने में कमजोर है। बेशक, कुछ भी वृद्धि को घटनाओं के माध्यम से कार्यान्वित होने से नहीं रोकता है, वृद्धि () विधि को घटना के लीज़र से बांधकर:

 export class MyCounter extends EventTarget { constructor() { super(); this.count = 0; this.addEventListener('increment', this.increment.bind(this)); } increment() { this.count++; this.dispatchEvent(new CustomEvent('countChanged', { detail: { count: this.count } })); } } 

और इवेंट थ्रो के साथ मेथड कॉल को बदलना:

 export class MyWebComp extends HTMLElement { ... showMessage(event) { this.setAttribute('count', parseInt(this.getAttribute('count')) + 1); this.counter.dispatchEvent(new CustomEvent('increment')); } } 

वह क्या बदलता है? अब, अगर विकास के दौरान वेतन वृद्धि () विधि को हटा दिया जाता है या बदल दिया जाता है, तो हमारे कोड की शुद्धता का उल्लंघन होगा, लेकिन कोई दुभाषिया त्रुटियां नहीं होंगी, अर्थात्। संचालन क्षमता बनी रहेगी। इस विशेषता को कमजोर कनेक्टिविटी कहा जाता है।

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

हम पुराने फ़ैशन में हैंडलर लटका सकते हैं और वैश्विक दस्तावेज़ ऑब्जेक्ट पर कॉल कर सकते हैं।

 export class MyWebComp extends HTMLElement { constructor() { super(); } connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(html); this.updateLabel(); this.counter.addEventListener('countChanged', this.updateLabel.bind(this)); document.addEventListener('countChanged', this.updateLabel.bind(this)); } disconnectedCallback() { document.removeEventListener(new CustomEvent('increment')); document.removeEventListener(new CustomEvent('countChanged')); } ... showMessage(event) { this.setAttribute('count', parseInt(this.getAttribute('count')) + 1); this.counter.dispatchEvent(new CustomEvent('increment')); document.dispatchEvent(new CustomEvent('increment')); } } 

 export class MyCounter extends EventTarget { constructor() { super(); this.count = 0; this.addEventListener('increment', this.increment.bind(this)); document.addEventListener('increment', this.increment.bind(this)); } increment() { this.count++; this.dispatchEvent(new CustomEvent('countChanged', { detail: { count: this.count } })); document.dispatchEvent(new CustomEvent('countChanged', { detail: { count: this.count } })); } } 

व्यवहार कोई भिन्न नहीं है, लेकिन अब हमें वैश्विक वस्तु से ईवेंट हैंडलर को हटाने के बारे में सोचने की आवश्यकता है यदि तत्व स्वयं पेड़ से हटा दिया जाता है। सौभाग्य से, वेब घटक हमें न केवल डिजाइन हुक प्रदान करते हैं, बल्कि स्मृति लीक से बचने के लिए विनाश भी करते हैं।

एक और महत्वपूर्ण बिंदु भी है: "बुदबुदाहट" नामक एक तंत्र के माध्यम से पेड़ के तत्वों की घटनाओं को एक दूसरे के साथ बातचीत कर सकते हैं।

जब उपयोगकर्ता हमारे तत्व पर क्लिक करता है, तो घटना, तत्व पर ही काम कर रहा है, माता-पिता को पानी पर मंडलियों की तरह बुलाया जाने लगता है, फिर इस माता-पिता के माता-पिता को और मूल तत्व पर।

इस कॉल श्रृंखला के किसी भी बिंदु पर, घटना को रोका और संसाधित किया जा सकता है।

यह, ज़ाहिर है, यह एक ही घटना नहीं है, और इसके डेरिवेटिव और संदर्भ हैं, हालांकि वे एक दूसरे से लिंक करेंगे उदाहरण के लिए event.path में , पूरी तरह से मेल नहीं खाएंगे ।

हालांकि, यह तंत्र आपको अपने माता-पिता के साथ बाल तत्वों को इस तरह से जोड़ने की अनुमति देता है कि यह लिंक इंजीनियरिंग पैटर्न का उल्लंघन नहीं करता है, अर्थात। सीधे लिंक के बिना, लेकिन केवल अपने स्वयं के व्यवहार के कारण।

प्राचीन समय में, इसने बहुत परेशानी को जन्म दिया, जब कुछ तत्वों की घटनाओं ने दस्तावेज़ के कुछ खंडों में "मंडलियों" या गूँज का कारण बना जो प्रतिक्रियाओं के लिए अवांछनीय थे।

वर्षों तक, वेब डेवलपर्स घटनाओं के "प्रचार" (प्रसार या सरफेसिंग) से जूझते रहे और उन्हें रोक दिया और उन्हें वैसे ही घुमाया, जैसे उनके आरामदायक उपयोग के लिए, जैसा कि आईडी के मामले में, केवल छाया वृक्ष के अलगाव की कमी थी।

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

यह समझने के लिए कि यह सब कैसे काम करता है, हम अपने webcomp तत्वों को इस तरह कंटेनर में लपेटते हैं:

 <my-webcont count=0> <my-webcomp id="myWebComp" greet-name="John" count=0 onclick="this.showMessage(event)"></my-webcomp> <my-webcomp id="myWebComp2" greet-name="Josh" count=0 onclick="this.showMessage(event)"></my-webcomp> </my-webcont> 

कंटेनर में यह कोड होगा:

 export class MyWebCont extends HTMLElement { constructor() { super(); } connectedCallback() { this.addEventListener('increment', this.updateCount.bind(this)); } updateCount(event) { this.setAttribute('count', parseInt(this.getAttribute('count')) + 1); } static get observedAttributes() { return ['count']; } attributeChangedCallback(name, oldValue, newValue) { if (name === 'count') { this.querySelectorAll('my-webcomp').forEach((el) => { el.setAttribute('count', newValue); }); } } } 

कनेक्टकॉलबैक () में, हम हैंडलर को वृद्धि की घटना पर लटकाएंगे, जो बच्चों को फेंक देगा। हैंडलर तत्व के स्वयं के काउंटर को बढ़ाएगा, और इसके मूल्य को बदलने के लिए एक कॉलबैक सभी बाल तत्वों के माध्यम से जाएगा और उनके काउंटरों को बढ़ाएगा, जिस पर पहले हमारे द्वारा विकसित हैंडलर लटकाए गए थे।

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

 export class MyWebComp extends HTMLElement { ... showMessage(event) { this.setAttribute('count', parseInt(this.getAttribute('count')) + 1); this.counter.dispatchEvent(new CustomEvent('increment')); this.dispatchEvent(new CustomEvent('increment', { bubbles: true })); document.dispatchEvent(new CustomEvent('increment')); } } 

अब, कुछ सामान्य यादृच्छिकता के बावजूद, पहला तत्व काउंटर हमेशा माता-पिता के मूल्य को दिखाएगा। एक साथ, आज हमने जो कुछ भी किया है, वह निश्चित रूप से पालन करने के लिए एक उदाहरण नहीं है, लेकिन केवल संभावनाओं और तकनीकों का एक सिंहावलोकन है जिसके द्वारा आप घटकों के बीच सही मायने में मॉड्यूलर बातचीत को व्यवस्थित कर सकते हैं, न्यूनतम साधनों से बचते हुए।

आप एक ही रिपॉजिटरी में संदर्भ के लिए तैयार कोड पा सकते हैं, घटनाओं के ब्रंच में ।