🌯 👩🏼‍🎨 👥 वेबकॉमर्स के साथ त्वरित शुरुआत ☀️ 🍋 🍫

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

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

नीचे दिए गए सभी प्रयोगों को क्रोम और फ़ायरफ़ॉक्स में परीक्षण किया गया था जो शायद हाल के संस्करण भी नहीं हैं।

तो चलिए शुरू करते हैं।

सबसे पहले, परियोजना के लिए एक निर्देशिका बनाएं और उस पर जाएं।

mkdir mywebcomp cd mywebcomp

पूरा हुआ:

 npm init

इस निर्देशिका में डिफ़ॉल्ट रूप से सभी सवालों के जवाब देकर।

निर्देशिका में सबसे सरल सामग्री के साथ एक index.html फ़ाइल बनाएँ।

 <html lang="en"> <body> </body> </html>

किसी तत्व के लिए एक टैग जोड़ें, नाम में एक हाइफ़न होना चाहिए, यह CusomElements सबसिस्टम के लिए एक संकेत है कि इस तत्व को मानक लोगों के निर्माण के रूप में परिभाषित करने का प्रयास करें।

 <html lang="en"> <body> <my-webcomp></my-webcomp> </body> </html>

स्क्रिप्ट टैग में हैंडलर क्लास जोड़ें।

 <script type="module"> class MyWebComp extends HTMLElement { connectedCallback() { this.insertAdjacentHTML('beforeEnd', `<div>Hello</div>`) } } customElements.define('my-webcomp', MyWebComp); </script>

मॉड्यूलर स्क्रिप्ट टैग में, हमने एक नई कक्षा को परिभाषित किया, जो customElements.define () विधि का उपयोग करके, इसे my-webcomp टैग के पीछे परिभाषित किया। और कनेक्टेड कॉलबैक () विधि में कोड जोड़कर, हमने घटक कार्यान्वयन को पेड़ में जोड़ते समय इसकी कॉल प्रदान की। परिणाम पहले से ही ब्राउज़र में देखा जा सकता है:

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

 <html lang="en"> <body> <template id="myWebCompTemplate"> <div>Hello</div> </template> <my-webcomp></my-webcomp> <script type="module"> class MyWebComp extends HTMLElement { connectedCallback() { let tplEl = document.querySelector('#myWebCompTemplate'); let html = document.importNode(tplEl.content, true); this.appendChild(html); } } customElements.define('my-webcomp', MyWebComp); </script> </body> </html>

घटक कोड में, हमने आईडी द्वारा एक टेम्पलेट तत्व प्राप्त करके html के साथ एक स्ट्रिंग के सम्मिलन को बदल दिया। आयात यानी इस तत्व की एक प्रति बनाना और वर्तमान की सामग्री से जोड़ना।

आईडी का नाम कैमलकेस नोटेशन में रखा गया है तत्वों के सभी पहचानकर्ताओं को वैश्विक नामस्थान में फेंक दिया जाता है जब हाइफ़न या अन्य विशेष का उपयोग किया जाता है। पात्रों तक उनकी पहुँच कम सुरुचिपूर्ण हो सकती है। यानी हम इसके बजाय:

  let tplEl = document.querySelector('#myWebCompTemplate'); let html = document.importNode(tplEl.content, true);

एक पंक्ति में लिखें:

 let html = document.importNode(myWebCompTemplate.content, true);

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

 <my-webcomp id="myWebComp"></my-webcomp> <script type="module"> class MyWebComp extends HTMLElement { connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.appendChild(html); } } customElements.define('my-webcomp', MyWebComp); </script> <script type="module"> myWebComp.showMessage(); </script>

इस परिदृश्य में, पेज लोड होने पर अलर्ट तुरंत प्रदर्शित किया जाएगा।

अब हम अपने घटक के लिए एक माउस क्लिक हैंडलर लटकाएंगे जो एक चेतावनी संदेश प्रदर्शित करेगा।

 <my-webcomp id="myWebComp" onclick="this.showMessage(event)"></my-webcomp> <script type="module"> class MyWebComp extends HTMLElement { connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.appendChild(html); } showMessage(event) { alert("This is the message"); console.log(event); } } customElements.define('my-webcomp', MyWebComp); </script>

अब, जब आप किसी संदेश पर क्लिक करते हैं, तो हमारे पास उपयोगकर्ता क्रियाओं की प्रतिक्रिया होगी।

ShowMessage () पद्धति का तर्क भी एक ईवेंट ऑब्जेक्ट घोषित करता है जो ईवेंट डेटा को संग्रहीत करता है, जैसे कि एक क्लिक के निर्देशांक या तत्व के लिए एक लिंक।

अक्सर, प्रत्येक विशेष तत्व को इसके लिए एक अनूठे तरीके से कॉन्फ़िगर किया जाना चाहिए, यह विशेषताओं का उपयोग करके किया जा सकता है।

तत्व का दूसरा उदाहरण जोड़ें और उनमें से प्रत्येक के लिए अलग - अलग अभिवादन-नाम गुणों को परिभाषित करें जिनके तत्व को क्लिक करने पर प्रदर्शित किया जाएगा।

 <my-webcomp id="myWebComp" greet-name="John" onclick="this.showMessage(event)"></my-webcomp> <my-webcomp id="myWebComp2" greet-name="Josh" onclick="this.showMessage(event)"></my-webcomp> <script type="module"> class MyWebComp extends HTMLElement { connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.appendChild(html); } showMessage(event) { alert("This is the message " + this.getAttribute('greet-name')); console.log(event); } } customElements.define('my-webcomp', MyWebComp); </script>

अब, जब आप पहले पर क्लिक करते हैं, तो "यह जॉन के लिए संदेश है" प्रदर्शित किया जाएगा, और दूसरे पर "यह जोश के लिए संदेश है"।

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

 <template id="myWebCompTemplate"> <div id="helloLabel">Hello</div> </template> <my-webcomp id="myWebComp" greet-name="John" onclick="this.showMessage(event)"></my-webcomp> <my-webcomp id="myWebComp2" greet-name="Josh" onclick="this.showMessage(event)"></my-webcomp> <script type="module"> class MyWebComp extends HTMLElement { connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.appendChild(html); this.querySelector('#helloLabel').textContent += ' ' + this.getAttribute('greet-name'); } showMessage(event) { alert("This is the message " + this.getAttribute('greet-name')); console.log(event); } } customElements.define('my-webcomp', MyWebComp); </script>

यह इस तरह से निकला:

.TextContent के बजाय यह .innerHTML हो सकता है या आप उसी शुरुआत में .insertAdjacentHTML () विधि का चयन कर सकते हैं, जो हमने शुरुआत में किया था।

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

  this.attachShadow({mode: 'open'});

अब सच्चाई यह है कि इसके लिए सभी DOM कॉल्स को इस के साथ बदलना होगा। शादोउरूट, क्योंकि उनमें से बहुत सारे नहीं हैं।

 <script type="module"> class MyWebComp extends HTMLElement { connectedCallback() { let html = document.importNode(myWebCompTemplate.content, true); this.attachShadow({mode: 'open'}); this.shadowRoot.appendChild(html); this.shadowRoot.querySelector('#helloLabel').textContent += ' ' + this.getAttribute('greet-name'); } showMessage(event) { alert("This is the message " + this.getAttribute('greet-name')); console.log(event); } } customElements.define('my-webcomp', MyWebComp); </script>

नेत्रहीन, इस कोड का काम किसी भी तरह से फिर से नहीं बदलेगा, लेकिन अब वैश्विक नामस्थान में कोई भी हेल्लोबल नहीं होगा, और इस पहचानकर्ता के साथ पृष्ठ में पहले से ही 2 तत्व हैं। और आप उन्हें एक्सेस कर सकते हैं, उदाहरण के लिए, इस तरह:

 myWebComp.shadowRoot.getElementById('helloLabel');

और फिर यदि आप .attachShadow () विधि में संबंधित विशेषता पास करके पेड़ को बंद नहीं करते हैं।

हमें बहुत सारे कोड मिले और इसे सीधे html फ़ाइल में रखना भी बहुत सही नहीं है। इसलिए, हम my-webcomp.js फ़ाइल बनाएंगे और निर्यात विवरण के साथ अपनी कक्षा को इसमें स्थानांतरित करेंगे, और इसे पाने के लिए स्क्रिप्ट टैग में इस वर्ग के आयात को जोड़ेंगे:

 <script type="module"> import { MyWebComp } from "./my-webcomp.js"; customElements.define('my-webcomp', MyWebComp); myWebComp.shadowRoot.getElementById('helloLabel'); </script>

यह प्रदर्शन को प्रभावित नहीं करेगा, लेकिन अब हमारे सभी व्यावसायिक तर्क .js में अलग-अलग हैं, कॉन्फ़िगरेशन HTML विशेषताओं में किया जाता है, और मॉड्यूलर और घटक ब्राउज़र सिस्टम मॉड्यूलर अतुल्यकालिक आरंभीकरण का ख्याल रखते हैं।

हालाँकि, अब से, विकास के लिए स्थानीय रूप में index.html खोलना विफल हो जाएगा, क्योंकि ब्राउज़र फ़ाइल सिस्टम से स्क्रिप्ट के डाउनलोड को रोक देगा। यदि आपके पास नोडज हैं तो आप सबसे सरल वेब सर्वर रख सकते हैं:

 npm i http-server -g

और इसे प्रोजेक्ट डायरेक्टरी में http-server कमांड के साथ चलाएं, स्टार्टअप पर यह होस्ट और पोर्ट को बताएगा जिससे आप पेज खोल सकते हैं

 http://127.0.0.1:8080

जो अब हमारे तत्व के साथ डिबग पेज का पता होगा।

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

पैकेज जोड़ें।

 npm i mocha chai wct-mocha --save-dev

ऐसा करने के लिए, परीक्षण निर्देशिका बनाएं और उसमें निम्नलिखित all.html फ़ाइल जोड़ें:

 <!doctype html> <html> <head> <meta charset="utf-8"> <script src="../node_modules/mocha/mocha.js"></script> <script src="../node_modules/chai/chai.js"></script> <script src="../node_modules/wct-mocha/wct-mocha.js"></script> </head> <body> <script> WCT.loadSuites([ 'my-webcomp.tests.html', ]); </script> </body> </html>

परीक्षण करने के लिए हमारे index.html को कॉपी करें / इसे my-webcomp.tests.html नाम दें और सभी html में एक ही हेड सामग्री जोड़ें।

हालांकि, अब हमें परीक्षण चलाने के भाग के रूप में किए जाने वाले सामान्य आरंभ और जोड़तोड़ को बदलने की आवश्यकता होगी:

 <script type="module"> import { MyWebComp } from "../my-webcomp.js"; customElements.define('my-webcomp', MyWebComp); suite('MyWebComp', () => { test('is MyWebComp', () => { const element = document.getElementById('myWebComp'); chai.assert.instanceOf(element, MyWebComp); }); }); </script>

अब प्रवेश करते समय

 http://127.0.0.1:8080/test/all.html

एक परीक्षण रिपोर्ट प्रदर्शित की जाएगी।

लेकिन आपको परीक्षणों को स्वचालित रूप से चलाने की आवश्यकता हो सकती है और विभिन्न ब्राउज़रों में आपको एक विशेष उपयोगिता स्थापित करने की आवश्यकता होती है:

 sudo npm install --global web-component-tester --unsafe-perm

और इस तरह से चलाएं:

 wct --npm

इस लाइन को package.json फ़ाइल के परीक्षण खंड में जोड़ा जा सकता है और निम्नानुसार चलाया जा सकता है:

 npm test

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

 suiteSetup(() => { });

सुइट के अंदर।

यह संभवतया पहली बार के लिए पर्याप्त है, हमें कुछ न्यूनतम परियोजना मिली है कि यदि वह किसी विशिष्ट कार्य को हल करता है, तो उसे ऐसा करने में शर्म नहीं आएगी।

 npm publish

या कम से कम

 git push

विषय पर अभी तक बहुत सारी किताबें नहीं हैं, लेकिन सभी व्यापक प्रलेखन आसानी से वेब घटक, CustomElements, ShadowDOM, मूल टेम्पलेट टैग, कस्टम ईवेंट के अनुसार पाए जाते हैं।

आप अपने कोड को रिपॉजिटरी: https://bitbucket.org/techminded/mywebcomp से सत्यापित कर सकते हैं

घटनाओं के उपयोग के माध्यम से घटकों के बीच बातचीत करने के तरीके को प्रदर्शित करने वाले विषय की निरंतरता यहां पाई जा सकती है

वेबकॉमर्स के साथ त्वरित शुरुआत

More articles: