Webkomponenten statt zu reagieren - ein weiterer Versuch

• DOM ist ein Staat. Da wir keinen Rahmen haben, vergessen wir sofort den Funktionalismus und kehren zum imperativen OOP zurück. Webkomponenten sind langlebige DOM-Knoten, die ihren Status kapseln und über eine öffentliche API verfügen. Sie werden nicht neu erstellt, sondern geändert. Dies bedeutet, dass wir das DOM nicht nur als Repräsentation, sondern auch als Repository für Geschäftsobjekte betrachten sollten. Daher müssen wir eine Hierarchie von Komponenten erstellen, die die Bequemlichkeit ihrer Interaktion berücksichtigt.
• Das Zusammenspiel der Komponenten. Komponenten können über direkte Anrufe, Rückrufaustausch oder über Benutzer-DOM-Ereignisse nach oben / unten interagieren. Die letztere Methode ist am meisten vorzuziehen, da sie das gegenseitige Eingreifen (Koppeln) verringert und das Diagramm der Bindungen anordnet (siehe Beispiel unten).
  DOM-Ereignisse funktionieren nur innerhalb der Hierarchie. Sie können von unten in der Ahnenkette angezeigt oder an alle Nachkommen gesendet werden. In anderen Fällen wird die Standard-Browser-API verwendet, um die Komponente zu adressieren: document.querySelector ('page-home'), und einige Komponenten können sich im Fenster registrieren und global verwendet werden: APP.route ('page-login').
• Innere Stile. Shadow DOM wird nicht verwendet, daher erben Komponenten globale Stile, können aber auch eigene Stile haben. Da es unwahrscheinlich ist, dass <style scoped> in naher Zukunft implementiert wird, müssen Sie das Präfix des Komponentennamens verwenden, um den internen Stil zu deklarieren. Dies ist jedoch stillschweigend und funktioniert einwandfrei (siehe Beispiel unten).
• HTML/DOM. DOM — , HTML (value, checked, innerHTML contenteditable=«true» ..). JS , — / , ( ). , , this.pass — , <input> . , DOM, , , , .
• Navigation. Die Seitenkomponenten befinden sich im <main> -Container und werden nach ihrer Erstellung nicht gelöscht, sondern einfach ausgeblendet. Auf diese Weise können Sie die Navigation mit location.hash implementieren, und die Standardbrowser-Schaltflächen funktionieren ordnungsgemäß. Wenn Sie zu einer vorhandenen Komponente navigieren, wird die Methode onRoute () aufgerufen, mit der Sie die Daten aktualisieren können.

Anwendungsstruktur

• die Root-Komponente <app-app>, auf die über window.APP zugegriffen werden kann und die einen Seitenrouter und globale Funktionen enthält;
• Bedienfelder mit Kontextschaltflächen (ich habe sie nicht in eine separate Komponente eingefügt, sondern zur Vereinfachung der Ereignisbehandlung in das <app-app> -Layout aufgenommen);
• Dropdown-Menü (separate Komponente);
• Der <main> -Container, in den die Seitenkomponenten eingefügt werden: <page-home>, <page-login>, <page-work> beim Öffnen.

• Der Autorisierungsstatus und der aktuelle Benutzername werden in der Komponente <app-app> gespeichert, kommen jedoch über ein Popup-Ereignis von der Komponente <page-login>.
• Ein Timer tickt in der <app-app> -Komponente, die den aktuellen Wert über ein Broadcast-Ereignis nach unten sendet, das nur vom Nachkommen von <page-work> abgefangen wird.

Implementierung

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)

Einwände und Vorschläge