Komponen Web Alih-alih Bereaksi - Upaya Lain

• DOM adalah suatu keadaan. Karena kami tidak memiliki kerangka kerja, kami segera melupakan fungsionalisme dan kembali ke OOP imperatif. Komponen web adalah node DOM berumur panjang yang merangkum keadaan mereka dan memiliki API publik. Mereka tidak diciptakan kembali, tetapi diubah. Ini berarti bahwa kita harus mempertimbangkan DOM tidak hanya sebagai representasi, tetapi sebagai repositori objek bisnis, dan oleh karena itu kita perlu membangun hierarki komponen dengan mempertimbangkan kenyamanan interaksi mereka.
• Interaksi komponen. Komponen dapat berkomunikasi melalui panggilan langsung, pertukaran panggilan balik, atau melalui peristiwa DOM pengguna naik / turun. Metode yang terakhir paling disukai, karena mengurangi keterlibatan bersama (coupling), dan memesan grafik obligasi (lihat contoh di bawah).
  Peristiwa DOM hanya bekerja di dalam hierarki - mereka dapat muncul dari bawah ke atas rantai leluhur, atau disiarkan ke semua keturunan. Dalam kasus lain, API browser standar digunakan untuk mengatasi komponen: document.querySelector ('halaman-rumah'), dan beberapa komponen dapat mendaftarkan diri di jendela dan digunakan secara global: APP.route ('halaman-login').
• Gaya batin. Shadow DOM tidak digunakan, oleh karena itu komponen mewarisi gaya global, tetapi juga dapat memiliki sendiri. Karena <style scoped> tidak mungkin diimplementasikan dalam waktu dekat, Anda harus menggunakan awalan nama komponen untuk mendeklarasikan style internal, tetapi ini diam-diam dan berfungsi dengan baik (lihat contoh di bawah).
• HTML/DOM. DOM — , HTML (value, checked, innerHTML contenteditable=«true» ..). JS , — / , ( ). , , this.pass — , <input> . , DOM, , , , .
• Navigasi. Komponen halaman hidup di dalam wadah <main>, dan setelah dibuat, mereka tidak dihapus, tetapi hanya disembunyikan. Ini memungkinkan Anda untuk menerapkan navigasi menggunakan location.hash, dan tombol browser standar bolak-balik berfungsi dengan benar. Saat menavigasi ke komponen yang ada, metode onRoute () dipanggil, di mana Anda dapat memperbarui data.

Struktur aplikasi

• komponen root <app-app>, dapat diakses melalui window.APP, berisi router halaman dan fungsionalitas global;
• panel dengan tombol kontekstual (saya tidak memasukkannya ke komponen terpisah, tetapi menjadikannya bagian dari tata letak <app-app> untuk menyederhanakan penanganan acara);
• menu tarik-turun (komponen terpisah);
• wadah <main> ke mana komponen halaman akan ditambahkan: <page-home>, <page-login>, <page-work> saat dibuka.

• Status otorisasi dan nama pengguna saat ini disimpan di komponen <app-app>, tetapi berasal dari komponen <page-login> melalui acara sembulan.
• Sebuah pengatur waktu mencentang di komponen <app-app>, yang mengirimkan nilai saat ini turun melalui acara siaran yang hanya dicegat di turunan <page-work>.

Penerapan

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)

Keberatan dan saran