वेब घटकों का परिचय। भाग 1

अनुवादक से: मैं आपके लिए Google से वेब घटकों के होनहार मानक का अनुवाद प्रस्तुत करता हूं, जो अगले कुछ वर्षों में एक प्रवृत्ति बन सकती है। फिलहाल, इस मानक का ज्ञान व्यावहारिक अनुप्रयोग नहीं करता है, इसलिए यदि आप नए और दिलचस्प सब कुछ के प्रशंसक नहीं हैं, तो आप इस अनुवाद को पढ़ने के लिए ऊब सकते हैं।
अनुवाद गिथब पर पोस्ट किया गया है, इसलिए यदि आप अनुवाद में मदद करना चाहते हैं या त्रुटि को ठीक करना चाहते हैं, तो एक पुल अनुरोध करें, अच्छी तरह से, या व्यक्तिगत रूप से लिखें।

स्थिति:

लेखक:

• डोमिनिक कॉनी , Google, dominicc@google.com
  
• दिमित्री ग्लेज़कोव , Google, dglazkov@chromium.org
  

परिचय

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


मॉड्यूल:

• टेम्पलेट्स, निष्क्रिय मार्कअप के हिस्से को निर्धारित करते हैं जो भविष्य में उपयोग किए जा सकते हैं;
• सज्जाकार टेम्पलेट्स में दृश्य और व्यवहार परिवर्तनों को प्रबंधित करने के लिए सीएसएस का उपयोग करने की अनुमति देते हैं;
• कस्टम तत्व लेखकों को अपने स्वयं के तत्वों (इन तत्वों की प्रस्तुति और एपीआई सहित) को परिभाषित करने की अनुमति देते हैं जिनका उपयोग मुख्य HTML दस्तावेज़ में किया जा सकता है;
• छिपा हुआ DOM ( शैडो DOM ), परिभाषित करता है कि कैसे DOM ट्री में सज्जाकार और उपयोगकर्ता तत्वों की प्रस्तुति और व्यवहार एक दूसरे के साथ संयुक्त हैं।

साथ में, सज्जाकार और कस्टम तत्व घटक कहलाते हैं।

टेम्पलेट्स

<template> तत्व में स्क्रिप्ट या अन्य मॉड्यूल के साथ बाद में उपयोग के लिए मार्कअप होता है जो टेम्पलेट का उपयोग कर सकता है (उदाहरण के लिए, <decorator> और <element> , जो नीचे वर्णित हैं)।

<template> तत्व की सामग्री को पार्स किया गया है, लेकिन यह निष्क्रिय है: स्क्रिप्ट नहीं चलती हैं, चित्र लोड नहीं होते हैं, आदि <template> तत्व प्रदर्शित नहीं होता है।

स्क्रिप्ट में, ऐसे तत्व की एक विशेष सामग्री संपत्ति होती है, जिसमें टेम्पलेट में परिभाषित एक स्थिर डोम संरचना होती है।

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

 <template id="commentTemplate"> <div> <img src=""> <div class="comment"></div> … </div> </template> var t = document.querySelector("#commentTemplate"); //     img[src]  . // … someElement.appendChild(t.content.cloneNode()); 

दस्तावेज़ में एक स्थिर डोम नोड जोड़ने से यह "लाइव" हो जाता है, जैसे कि यह DOM नोड आंतरिक HTML संपत्ति के माध्यम से प्राप्त किया गया था।

सज्जाकार

एक डेकोरेटर एक ऐसी चीज है जो मौजूदा तत्व की प्रस्तुति को बढ़ाता है या फिर से परिभाषित करता है। अभ्यावेदन के सभी पहलुओं की तरह, सज्जाकारों का व्यवहार CSS का उपयोग करके नियंत्रित किया जाता है। हालांकि, मार्कअप का उपयोग करके प्रस्तुति के अतिरिक्त पहलुओं को परिभाषित करने की क्षमता सज्जाकारों की एक अनूठी विशेषता है।

<decorator> तत्व में एक <template> तत्व होता है जो डेकोरेटर को प्रस्तुत करने के लिए उपयोग किए जाने वाले मार्कअप को परिभाषित करता है।

 <decorator id="fade-to-white"> <template> <div style="position: relative;"> <style scoped> #fog { position: absolute; left: 0; bottom: 0; right: 0; height: 5em; background: linear-gradient( bottom, white 0, rgba(255, 255, 255, 0) 100); } </style> <content></content> <div id="fog"></div> </div> </template> </decorator> 

<content> तत्व उस स्थान को इंगित करता है जहां डेकोरेटर (अधिक सटीक रूप से, इसकी सामग्री) डाली जानी चाहिए।

डेकोरेटर को सीएसएस डेकोरेटर संपत्ति का उपयोग करके लागू किया जाता है:

 .poem { decorator: url(#fade-to-white); font-variant: small-caps; } 

ऊपर वर्णित डेकोरेटर और सीएसएस इस मार्कअप को मजबूर करेगा:

 <div class="poem"> Two roads diverged in a yellow wood,<br> … </div> 

+ लेकिन इसका रेंडर इस मार्कअप की तरह होगा (उपयोगकर्ता एजेंट शैलियों को संक्षिप्तता के लिए छोड़ दिया जाता है):

 <div class="poem" style="font-variant: small-caps;"> <div style="position: relative;"> Two roads diverged in a yellow wood,<br> … <div style="position: absolute; left: 0; …"></div> </div> </div> 

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

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

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

डेकोरेटर इवेंट्स

अन्तरक्रियाशीलता को लागू करने के लिए डेकोरेटर ईवेंट हैंडलर भी संलग्न कर सकते हैं। चूँकि डेकोरेटर क्षणिक होते हैं, इसलिए ईवेंट के हैंडलर को किसी टेम्पलेट में नोड्स पर टांगना या किसी टेम्प्लेट की किसी भी स्थिति पर निर्भर रहना कुशल नहीं है, क्योंकि किसी टेम्पलेट में नोड्स को प्रत्येक बार एक डेकोरेटर को लागू करने या किसी तत्व से हटाए जाने के बाद पुनः प्राप्त किया जाता है।

इसके बजाय, डेकोरेटर इवेंट कंट्रोलर के साथ इवेंट हैंडलर रजिस्टर करते हैं। ईवेंट हैंडलर को पंजीकृत करने के लिए, टेम्पलेट में एक <script> एलिमेंट शामिल है। स्क्रिप्ट को एक बार चलाया जाता है जब डेकोरेटर को दस्तावेज़ में डाला जाता है या डाला जाता है, या बाहरी दस्तावेज़ के हिस्से के रूप में लोड किया जाता है।

अंजीर। घटना संचालकों रजिस्टर



इस घटना के मान के रूप में घटना नियंत्रक को स्क्रिप्ट में पारित किया जाएगा।

 <decorator id="decorator-event-demo"> <script> function h(event) { alert(event.target); } this.listen({selector: "#b", type: "click", handler: h}); </script> <template> <content></content> <button id="b">Bar</button> </template> </decorator> 

लिस्नेन फ़ंक्शन को कॉल करने का अर्थ है कि जब बटन दबाया जाता है, तो ईवेंट हैंडलर आग लगाएगा ।

ईवेंट कंट्रोलर किसी भी नोड पर होने वाली ईवेंट को पुनर्निर्देशित करेगा, जिस पर डेकोरेटर को इवेंट हैंडलर पर लागू किया गया था।

अंजीर। इवेंट हैंडलिंग और रीमैपिंग



जब ईवेंट श्रोता को बुलाया जाता है, तो ईवेंट का लक्ष्य मान वह नोड होता है, जिस पर डेकोरेटर को लागू किया गया था, न कि उसके टेम्पलेट की सामग्री को। उदाहरण के लिए, यदि ऊपर निर्दिष्ट डेकोरेटर में निम्नलिखित सामग्री है:

 <span style="decorator: url(#decorator-event-demo);">Foo</span> 

इसमें रेंडर किया गया:

  फू [बार] 

बटन पर क्लिक करने पर [object HTMLSpanElement] साथ एक संदेश प्रदर्शित होगा।

लक्ष्य संपत्ति को ओवरराइड करना आवश्यक है, क्योंकि डेकोरेटर मैपिंग को परिभाषित करता है; यह दस्तावेज़ की संरचना को प्रभावित नहीं करता है। जब डेकोरेटर लागू किया जाता है, तो लक्ष्य संपत्ति को उस नोड पर फिर से परिभाषित किया जाता है जिस पर इसे लागू किया जाता है।

इसके अलावा, यदि स्क्रिप्ट टेम्प्लेट की सामग्री को बदल देती है, तो परिवर्तनों को अनदेखा कर दिया जाता है, ठीक उसी तरह जैसे कि <script> तत्व का टेक्स्टकंटेंट सेट करना <script> के निष्पादन को फिर से लागू नहीं करता है।

डेकोरेटर किसी भी तरह से अपने टेम्पलेट को बदल नहीं सकता है और तत्व पर खुद के प्रदर्शन को प्रभावित कर सकता है; वह केवल डेकोरेटर को दूसरे पर फिर से परिभाषित कर सकता है।

डेकोरेटर उदाहरण

एक विस्तारक तत्व का एक सरल संस्करण बनाने के लिए डेकोरेटर का उपयोग कैसे किया जा सकता है, इसका एक उदाहरण:

 details { decorator: url(#details-closed); } details[open] { decorator: url(#details-open); } 

 <decorator id="details-closed"> <script> this.listen({ selector: "#summary", type: "click", handler: function (event) { event.currentTarget.open = true; } }); </script> <template> <a id="summary"> > <content select="summary:first-of-type"></content> </a> </template> </decorator> <decorator id="details-open"> <script> this.listen({ selector: "#summary", type: "click", handler: function (event) { event.currentTarget.open = false; } }); </script> <template> <a id="summary"> V <content select="summary:first-of-type"></content> </a> <content></content> </template> </decorator> 

इसके लिए दो डेकोरेटर की जरूरत थी। एक बंद रूप में विस्तार तत्व का प्रतिनिधित्व करता है , दूसरा खुले में। प्रत्येक डेकोरेटर राज्य परिवर्तन को खोलने / बंद करने के लिए माउस क्लिक इवेंट हैंडलर का उपयोग करता है। <element> की चयन विशेषता नीचे और अधिक विस्तार से चर्चा की जाएगी।

कस्टम आइटम

कस्टम तत्व एक नए प्रकार के DOM तत्व हैं जिन्हें लेखक द्वारा परिभाषित किया जा सकता है।

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

<element> एक कस्टम तत्व को परिभाषित करता है।

 <element extends="button" name="x-fancybutton"> … </element> 

फैली हुई विशेषता को उस तत्व द्वारा परिभाषित किया गया है जिसकी कार्यक्षमता हम विस्तार करना चाहते हैं। उपयोगकर्ता तत्व के प्रत्येक उदाहरण में एक टैग होगा जो विस्तार विशेषता में परिभाषित है।

नाम विशेषता उस उपयोगकर्ता तत्व की पहचान करती है जो इस मार्कअप से जुड़ा होगा। नाम विशेषता का नाम स्थान मानक तत्वों के टैग नामों के समान है, इसलिए, टकराव को समाप्त करने के लिए, x- उपसर्ग का उपयोग किया जाता है।

अलग-अलग ब्राउज़र HTML तत्वों को अलग-अलग तरीके से परिभाषित करते हैं, लेकिन उनकी सभी व्याख्याएं HTML के शब्दार्थ द्वारा निर्देशित होती हैं।

चूंकि सभी ब्राउज़र उपयोगकर्ता-परिभाषित तत्वों का समर्थन नहीं करते हैं, इसलिए लेखकों को उन HTML तत्वों का विस्तार करना चाहिए जिनके पास नए उपयोगकर्ता-परिभाषित तत्व का निकटतम मान है। उदाहरण के लिए, यदि हम एक उपयोगकर्ता तत्व को परिभाषित करते हैं जो इंटरैक्टिव है और कुछ कार्यों को करके क्लिकों का जवाब देता है, तो हमें बटन ( <button> ) का विस्तार करना चाहिए।

जब कोई HTML तत्व नहीं होता है, जो शब्दार्थ से आप चाहते हैं, उसके करीब है, तो लेखक को तटस्थ तत्व, जैसे कि <span> विस्तार करना चाहिए।

विचार

एक कस्टम तत्व में एक टेम्पलेट हो सकता है:

 <element extends="button" name="x-fancybutton"> <template> <style scoped> ::bound-element { display: transparent; } div.fancy { … } </style> <div class="fancy"> <content></content> <div id="t"></div> <div id="l"></div> <div id="b"></div> <div id="r"></div> </div> </template> </element> 

यदि उपयोगकर्ता तत्व में एक टेम्पलेट है, तो इस टेम्पलेट की एक प्रति उपयोगकर्ता तत्व डिजाइनर द्वारा तत्व की छाया DOM में डाली जाएगी।

छाया डोम नीचे वर्णित किया जाएगा।

मार्कअप में कस्टम तत्वों का उपयोग करना

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

 <element extends="button" name="x-fancybutton"> <!-- definition --> … </element> <button is="x-fancybutton" onclick="showTimeClicked(event);"> <!-- use --> Show time </button> 

स्क्रिप्ट में कस्टम तत्वों का उपयोग करना

आप मानक दस्तावेज़ का उपयोग करके स्क्रिप्ट से एक कस्टम तत्व बना सकते हैं। निर्माण विधि:

 var b = document.createElement("x-fancybutton"); alert(b.outerHTML); // will display '<button is="x-fancybutton"></button>' 

इसके अलावा, आप स्पष्ट रूप से विंडो ऑब्जेक्ट को निर्यात किए जाने वाले तत्व निर्माता का नाम निर्दिष्ट करने के लिए <element> पर निर्माता विशेषता सेट कर सकते हैं । इस निर्माता का उपयोग कस्टम तत्व बनाने के लिए किया जा सकता है:

 <element extends="button" name="x-fancybutton" constructor="FancyButton"> … </element> 

...

 var b = new FancyButton(); document.body.appendChild(b); </code></pre> 

एक उपयोगकर्ता तत्व <script> प्रोटोटाइप <script> तत्व के अंदर <script> तत्व में, अपने प्रोटोटाइप में उन्हें जोड़कर एपीआई विधियों की घोषणा कर सकता है:

 <element extends="button" name="x-fancybutton" constructor="FancyButton"> … <script> FancyButton.prototype.razzle = function () { … }; FancyButton.prototype.dazzle = function () { … }; </script> </element> … <script> var b = new FancyButton(); b.textContent = "Show time"; document.body.appendChild(b); b.addEventListener("click", function (event) { event.target.dazzle(); }); b.razzle(); </script> 

सरल गिरावट प्रदान करने के लिए, यह <script> तत्व के प्रकार के मूल तत्व को HTMLElementElement टाइप करता है:

 <element extends="table" name="x-chart" constructor="Chart"> <script> if (this === window) // Use polyfills to emulate custom elements. // … else { // … } </script> </element> 

तकनीकी रूप से, स्क्रिप्ट <script> तत्व <script> तत्व के अंदर, जब इसे <element> या <decorator> जाता है, तो इस कॉल को पहचान के अनुसार निष्पादित किया जाता है:

 (function() { // code goes here. }).call(parentInstance); 

उन स्थितियों में जहां विंडो ऑब्जेक्ट में कंस्ट्रक्टर का नाम अज्ञात है, कस्टम घटक का लेखक HTMLElementElement की उत्पन्न संपत्ति का उपयोग कर सकता है:

 <element extends="table" name="x-chart"> <script> // … var Chart = this.generatedConstructor; Chart.prototype.shizzle = function() { /* … */ }; // … </script> </element> 

आप किसी मौजूदा DOM तत्व पर विशेषता निर्दिष्ट करके एक कस्टम तत्व नहीं बना सकते। निम्नलिखित कोड चलाने से कुछ नहीं होगा:

 var div = document.createElement("div"); div.setAttribute("is", "foo"); alert(div.is); // displays null alert(div.outerHTML); // displays <div></div> 

आइटम अद्यतन

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

जब प्रत्येक तत्व को प्रतिस्थापित किया जाता है, तो हटाए गए तत्व पर एक गैर-बुदबुदाहट, गैर-रद्द करने योग्य घटना होती है। एक स्क्रिप्ट जो बाकी दस्तावेज़ के साथ बातचीत में देरी करना चाहती है जब तक कि उपयोगकर्ता तत्व लोड न हो, एक विशेष घटना के लिए सदस्यता ले सकता है:

 function showTimeClicked(event) { // event.target may be an HTMLButtonElement or a FancyButton if (!event.target.razzle) { // razzle, part of the FancyButton API, is missing // so upgrade has not happened yet event.target.addEventListener('upgrade', function (upgradeEvent) { showTime(upgradeEvent.replacement); }); return; } showTime(event.target); } function showTime(b) { // b is FancyButton } 

जो लेखक गैर-शैली वाली सामग्री प्रदर्शित करने से बचना चाहते हैं, वे कस्टम-लोड लोड होने तक गैर-प्रतिस्थापित, नियमित आइटम के प्रदर्शन को बदलने के लिए CSS का उपयोग कर सकते हैं।

जीवन चक्र विधियाँ

एक उपयोगकर्ता तत्व चार जीवनचक्र विधियों की सदस्यता ले सकता है:

• बनाया - निर्माता को कॉल करें, <template> तत्व से ShadowRoot का एक उदाहरण बनाएं। यदि <template> अनुपलब्ध है , तो ShadowRoot को शून्य पर सेट किया गया है।
• विशेषताचयनित - जब भी किसी तत्व का गुणधर्म बदलता है, तो उसे सम्मिलित किया जाता है। तर्क: नाम, पुराना मान, नया मान।
• डाला - उपयोगकर्ता घटक डोम पेड़ में डाला जाता है के बाद कहा जाता है। इस हैंडलर में, आप उपयोगकर्ता घटक के लिए संसाधन लोड कर सकते हैं या टाइमर शुरू कर सकते हैं।
• हटाया - उपयोगकर्ता तत्व डोम ट्री से हटा दिया गया है के बाद कहा जाता है। यहां आप उन टाइमर को बंद कर सकते हैं जिनकी आवश्यकता तब नहीं होती है जब उपयोगकर्ता तत्व DOM ट्री में नहीं होता है।

तत्व की ओर इशारा करते हुए हैंडलर को बुलाया जाता है।

सम्मिलित और हटाए गए हैंडलर को कई बार कहा जा सकता है, हर बार उपयोगकर्ता द्वारा परिभाषित तत्व डाला और हटा दिया जाता है।

आप HTMLElementElement.lifecycle विधि को कॉल करके इन हैंडलर की सदस्यता ले सकते हैं:

 <element extends="time" name="x-clock"> <script> // … this.lifecycle({ inserted: function() { this.startUpdatingClock(); }, removed: function() { this.stopUpdatingClock(); } }); // … </script> </element> 

कस्टम आइटम एक्सटेंशन

HTML तत्वों के अतिरिक्त, आप उपयोगकर्ता तत्व का नाम निर्दिष्ट करके उपयोगकर्ता तत्व का विस्तार कर सकते हैं <element> की विशेषता:

 <element extends="x-clock" name="x-grandfatherclock"> … </element> 

हैंडलिंग में त्रुटि

कस्टम तत्वों का प्रतिपादन करते समय त्रुटियों से निपटने के लिए कई विकल्प हैं:

• तत्व का टैगनाम उपयोगकर्ता तत्व के फैली हुई विशेषता के मूल्य से मेल नहीं खाता है, उदाहरण के लिए: <div is="x-fancybutton"> , लेकिन <element name="x-fancybutton" extends="button"> । इस स्थिति में, पार्स करने के दौरान विशेषता को छोड़ दिया जाता है ।
• इस विशेषता का मान किसी भी मौजूदा आइटम से मेल नहीं खाता है। इस स्थिति को माना जाता है जैसे कि उपयोगकर्ता-परिभाषित तत्व की परिभाषा अभी तक लोड नहीं हुई है, और परिभाषा लोड होते ही तत्व अपडेट हो जाएगा।
• विशेषता मान का विस्तार किसी भी मौजूदा तत्व से नहीं होता है। इस मामले में, कस्टम तत्व की परिभाषा का प्रसंस्करण तब तक आयोजित किया जाएगा जब तक कि फैली हुई विशेषता में संकेतित तत्व लोड न हो जाए।
• Is का गुण x- से शुरू नहीं होता है। इस स्थिति में, विशेषता को अनदेखा किया जाता है।
• नाम विशेषता का मान x- से शुरू नहीं होता है। इस स्थिति में, उपयोगकर्ता तत्व की परिभाषा को अमान्य और अनदेखा माना जाता है।

अनुवादक से: अगले भाग में हम वेब घटकों में शैडो DOM के उपयोग को देखेंगे, बाहरी उपयोगकर्ता तत्वों और सज्जाकारों के बारे में, और वेब घटकों के अलगाव, प्रतिबंध और इनकैप्सुलेशन के बारे में