مكونات الويب بدلاً من رد الفعل - محاولة أخرى

• DOM هي دولة. نظرًا لعدم وجود إطار عمل ، فإننا ننسى فورًا الوظيفة الوظيفية ونعود إلى OOP الحتمية. مكونات الويب هي عُقد DOM طويلة العمر التي تُغلف حالتها ولديها واجهة برمجة تطبيقات عامة. لم يتم إعادة إنشائها ، ولكن تم تغييرها. هذا يعني أنه يجب علينا أن ننظر إلى DOM ليس فقط على أنه تمثيل ، ولكن كمستودع لكائنات الأعمال ، وبالتالي نحن بحاجة إلى بناء تسلسل هرمي للمكونات مع مراعاة راحة تفاعلهم.
• تفاعل المكونات. يمكن أن تتفاعل المكونات من خلال المكالمات المباشرة أو تبادل المكالمات أو من خلال أحداث DOM لأعلى / لأسفل للمستخدم. الطريقة الأخيرة هي الأكثر تفضيلاً ، لأنها تقلل من المشاركة المتبادلة (الاقتران) ، وتأمر بالرسم البياني للسندات (انظر المثال أدناه).
  تعمل أحداث DOM فقط داخل التسلسل الهرمي - يمكن أن تنبثق من الأسفل إلى أعلى سلسلة الأجداد ، أو البث إلى جميع الأحفاد. في حالات أخرى ، يتم استخدام واجهة برمجة التطبيقات (API) للمتصفح القياسي لمعالجة المكون: document.querySelector ('page-home') ، ويمكن لبعض المكونات تسجيل نفسها في النافذة واستخدامها عالميًا: APP.route ('page-login').
• الأنماط الداخلية. لا يستخدم Shadow DOM ، لذلك ترث المكونات الأنماط العامة ، ولكن يمكن أن يكون لها أيضًا أنماطها الخاصة. نظرًا لأنه من غير المرجح أن يتم تنفيذ <style scoped> في المستقبل القريب ، يجب عليك استخدام بادئة اسم المكون للإعلان عن النمط الداخلي ، ولكن هذا قليل الكلام ويعمل بشكل جيد (انظر المثال أدناه).
• التفاعل مع HTML / DOM. نظرًا لأن DOM عبارة عن حالة ، فإن مصدر البيانات هو قيم عناصر HTML نفسها (القيمة ، محددة ، innerHTML للمحتوى القابل للتحرير = "true" ، وما إلى ذلك). ليست هناك حاجة إلى متغيرات JS إضافية ، ولتسهيل الوصول إلى قيم النموذج - نحن فقط ننشئ الحروف / المستوطنين ، ونضيفها إلى كائن السلف (الذي يحتاج إلى مكتبة صغيرة). لا تختلف قيم نماذج العناوين الآن عن متغيرات فئة العنونة ، على سبيل المثال ، this.pass هي قيمة كلمة المرور التي تم إدخالها في التابع <input> التابع للمكون الحالي. وبالتالي ، لا يلزم وجود DOM افتراضي ولا ربط ثنائي الاتجاه ، كما أن إعادة رسم النماذج عند إعادة فتحها ليست ضرورية أيضًا ، ويتم حفظ البيانات التي تم إدخالها في النموذج أثناء التنقل ، ما لم تقم بتنظيفها على وجه التحديد.
• التنقل. توجد مكونات الصفحة داخل حاوية <main> ، وبمجرد إنشائها ، لا يتم حذفها ، بل يتم إخفاؤها ببساطة. يتيح لك ذلك تنفيذ التنقل باستخدام location.hash ، وتعمل أزرار المتصفح القياسية ذهابًا وإيابًا بشكل صحيح. عند الانتقال إلى مكون موجود ، يتم استدعاء طريقة onRoute () ، حيث يمكنك تحديث البيانات.

هيكل التطبيق

• المكون الجذر <app-app> ، الذي يمكن الوصول إليه عبر window.APP ، والذي يحتوي على موجه الصفحة والوظائف العالمية ؛
• لوحات بأزرار سياقية (لم أضعها في مكون منفصل ، لكنني جعلتها جزءًا من تخطيط <app-app> لتبسيط معالجة الأحداث) ؛
• القائمة المنسدلة (مكون منفصل) ؛
• الحاوية <main> التي ستُضاف إليها مكونات الصفحة: <page-home> ، <page-login> ، <page-work> عند فتحها.

• يتم تخزين حالة التفويض واسم المستخدم الحالي في المكون <app-app> ، ولكنه يأتي من المكون <page-login> من خلال حدث منبثق.
• يوضع جهاز ضبط الوقت في مكون <app-app> ، الذي يرسل القيمة الحالية لأسفل عن طريق حدث إذاعي يتم اعتراضه فقط في سلالة <page-work>.

التنفيذ

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)

اعتراضات واقتراحات