प्रतिक्रिया के बजाय वेब घटक - एक और प्रयास

• DOM एक राज्य है। चूंकि हमारे पास कोई ढांचा नहीं है, हम तुरंत कार्यात्मकता के बारे में भूल जाते हैं और अनिवार्य ओओपी पर लौट आते हैं। वेब घटक लंबे समय तक रहने वाले DOM नोड्स हैं जो अपने राज्य को एन्क्रिप्ट करते हैं और एक सार्वजनिक एपीआई है। उन्हें फिर से बनाया नहीं गया है, लेकिन बदल दिया गया है। इसका मतलब यह है कि हमें DOM को न केवल एक प्रतिनिधित्व के रूप में, बल्कि व्यावसायिक वस्तुओं के भंडार के रूप में विचार करना चाहिए, और इसलिए हमें उनकी बातचीत की सुविधा को ध्यान में रखते हुए घटकों के पदानुक्रम का निर्माण करने की आवश्यकता है।
• घटकों की बातचीत। अवयव प्रत्यक्ष कॉल, कॉलबैक एक्सचेंज, या उपयोगकर्ता के डोम इवेंट्स के माध्यम से बातचीत कर सकते हैं। उत्तरार्द्ध विधि सबसे बेहतर है, क्योंकि यह पारस्परिक जुड़ाव (युग्मन) को कम करता है, और बांडों के ग्राफ का आदेश देता है (नीचे उदाहरण देखें)।
  DOM ईवेंट केवल पदानुक्रम के भीतर काम करते हैं - वे नीचे से पूर्वजों की श्रृंखला तक पॉप कर सकते हैं या सभी वंशजों को प्रसारित कर सकते हैं। अन्य मामलों में, मानक ब्राउज़र API का उपयोग घटक को संबोधित करने के लिए किया जाता है: document.querySelector ('पेज-होम'), और कुछ घटक स्वयं को विंडो में पंजीकृत कर सकते हैं और विश्व स्तर पर उपयोग किया जा सकता है: APP.route ('पेज-लॉगिन')।
• आंतरिक शैलियों। शैडो डोम का उपयोग नहीं किया जाता है, इसलिए घटक वैश्विक शैलियों को विरासत में देते हैं, लेकिन उनका अपना भी हो सकता है। चूंकि निकट भविष्य में <style scoped> लागू होने की संभावना नहीं है, इसलिए आपको आंतरिक शैली को घोषित करने के लिए घटक नाम उपसर्ग का उपयोग करना होगा, लेकिन यह शांत है और ठीक काम करता है (नीचे उदाहरण देखें)।
• HTML / DOM के साथ सहभागिता। चूंकि DOM एक राज्य है, डेटा स्रोत HTML तत्वों के मान (मान, जाँच, आंतरिक सामग्री के लिए आंतरिक HTML = "सत्य" आदि) के मान हैं। अतिरिक्त JS चरों की जरूरत नहीं है, और फॉर्म वैल्यू तक पहुंचने की सुविधा के लिए - हम सिर्फ गेटर्स / सेटर बनाते हैं और उन्हें पूर्वज ऑब्जेक्ट (जिसके लिए एक छोटी लाइब्रेरी की आवश्यकता होती है) में जोड़ते हैं। प्रपत्र मानों को संबोधित करना अब वर्ग चर को संबोधित करने से अलग नहीं है, उदाहरण के लिए, यह वर्तमान घटक के <input> बच्चे में दर्ज पासवर्ड मान है। इस प्रकार, न तो वर्चुअल DOM और न ही दो-तरफ़ा बाइंडिंग की आवश्यकता होती है, जब उन्हें फिर से खोला जाता है तो प्रपत्रों को फिर से तैयार करना भी आवश्यक नहीं है, और प्रपत्र में दर्ज किए गए डेटा को नेविगेशन के दौरान सहेजा जाता है, जब तक कि आप विशेष रूप से उन्हें शुद्ध नहीं करते हैं।
• पथ प्रदर्शन। पृष्ठ घटक <मुख्य> कंटेनर के अंदर रहते हैं, और एक बार बनाए जाने के बाद, वे हटाए नहीं जाते हैं, लेकिन बस छिपे रहते हैं। यह आपको स्थान का उपयोग करके नेविगेशन लागू करने की अनुमति देता है। शश, और मानक ब्राउज़र बटन आगे और पीछे सही ढंग से काम करते हैं। किसी मौजूदा घटक पर नेविगेट करते समय, ऑनरूट () विधि कहा जाता है, जहां आप डेटा को अपडेट कर सकते हैं।

अनुप्रयोग संरचना

• रूट घटक <app-app>, window.APP के माध्यम से सुलभ, जिसमें एक पृष्ठ राउटर और वैश्विक कार्यक्षमता है;
• संदर्भ बटन वाले पैनल (मैंने उन्हें एक अलग घटक में नहीं डाला, लेकिन उन्हें इवेंट हैंडलिंग को आसान बनाने के लिए <app-app> लेआउट का हिस्सा बनाया);
• ड्रॉप-डाउन मेनू (अलग घटक);
• <मुख्य> कंटेनर जिसमें पृष्ठ घटक जोड़े जाएंगे: <पृष्ठ-होम>, <पृष्ठ-लॉगिन>, <पृष्ठ-कार्य> जैसे ही वे खोलते हैं।

• प्राधिकरण स्थिति और वर्तमान उपयोगकर्ता नाम <app-app> घटक में संग्रहीत किया जाता है, लेकिन पॉप-अप घटना के माध्यम से <पृष्ठ-लॉगिन> घटक से आता है।
• <App-app> घटक में एक टाइमर टिक जाता है, जो एक प्रसारण घटना के माध्यम से वर्तमान मूल्य को नीचे भेजता है जो केवल <पृष्ठ-कार्य> के वंशज में पकड़ा जाता है।

कार्यान्वयन

import wcmixin from './WcMixin.js'

const me = 'page-login'
customElements.define(me, class extends HTMLElement {
   _but = null

   connectedCallback() {
      this.innerHTML = `
         <style scoped>
            ${me} {
               height: 90%; width: 100%;
               display: flex; flex-direction: column;
               justify-content: center; align-items: center;
            }
            ${me} input { width: 60%; }
         </style>
         <input w-id='userInp/user' placeholder='user'/> 
         <input w-id='passInp/pass' type='password' placeholder='password'/>
      `
      wcmixin(this)

      this.userInp.oninput = (ev) => {
         this.bubbleEvent('login-change', {logged: false, user: this.user})
      }

      this.passInp.onkeypress = (ev) => {
         if (ev.key === 'Enter') this.login()
      }
   }

   onRoute() {
      this.userInp.focus()
      this._but = document.createElement('button')
      this._but.innerHTML = 'Log in<br>⇒'
      this._but.onclick = () => this.login()
      this.bubbleEvent('set-buts', { custom: [this._but] })
   }

   async login() {
      APP.msg = 'Authorization...'
      this._but.disabled = true
      setTimeout(() => {
         this._but.disabled = false
         if (this.user) {
            this.bubbleEvent('login-change', {logged: true, user: this.user})
            APP.route('page-work')
         } else {
            APP.msg = 'Empty user !'
            this.userInp.focus()
         }
      }, 1500)
   }
})

import wcmixin from './WcMixin.js'

const me = 'page-work'
customElements.define(me, class extends HTMLElement {

   connectedCallback() {
      this.innerHTML = `
         <p w-id='/msg'>Enter text:</p>
         <p w-id='textDiv/text' contenteditable='true'>1)<br>2)<br>3)</p>
      `
      wcmixin(this)

      this.addEventListener('notify-timer', (ev) => {
         this.msg = `Enter text (elapsed ${ev.val}s):`
      })
   }

   async onRoute() {
      this.textDiv.focus()
      document.execCommand('selectAll',false,null)
      const but = document.createElement('button')
      but.innerHTML = 'Done<br>⇒'
      but.onclick = () => alert(this.text)
      this.bubbleEvent('set-buts', { custom: [but] })
   }
})

setInterval(() => {
   this._elapsed += 1
   this.drownEvent('notify-timer', this._elapsed)
}, 1000)

आपत्तियां और सुझाव