Get best of the week

Webkomponenten-Routing

Manchmal scheint es, dass Webkomponenten das Framework nicht erreichen, insbesondere im Vergleich zu den beliebtesten Vertretern. Viele der dringendsten Aufgaben, die durch die Implementierung der im Konzept der Webkomponenten enthaltenen Standards nicht verdeckt werden, lassen sich jedoch mithilfe von Bibliotheken oder einer kleinen Menge ihres eleganten Codes leicht befestigen. Eine dieser Funktionen ist das Front-End-Routing. Das Feature ist nicht immer notwendig, vielleicht sogar umstritten, aber in den meisten Frameworks ist es vorhanden und wird von vielen verwendet. Was ist mit Webkomponenten? Und wir werden versuchen, das Routing mithilfe der Navigo-Bibliothek zu implementieren.

Damit Konsolenbefehle unter Windows besser funktionieren, können Sie Unix-Dienstprogramme aus der Git-Distribution für dieses System installieren oder anscheinend die neuen Funktionen von WSL und Terminals verwenden.

Erstellen Sie zunächst ein Projekt:

mkdir testnavigo
cd testnavigo
npm init

und oft drücken wir die Eingabetaste, bis es freigegeben wird,

dann legen wir die Bibliothek ab

npm i navigo --save

Erstellen Sie die Datei index.html,

verbinden Sie die darin enthaltene Bibliothek und definieren Sie die Hauptklasse der Anwendung. Hier wird die Logik für das Routing und die Verwaltung aller untergeordneten Komponenten zusammengefasst.

Webkomponenten gaben uns die Möglichkeit, den Hook automatisch aufzurufen, wenn ein Element im Baum angezeigt wird, dem unsere Klasse im Baum der Browserobjekte zugewiesen ist. Darin initialisieren wir die Routing-Bibliothek mit Code direkt aus dem Beispiel aus dem Bibliotheks-Github (im wirklichen Leben sollte dies mit modularem Laden besser gemacht werden).

<script src="/node_modules/navigo/lib/navigo.min.js"></script>

<my-app></my-app>

<script type="module">

   class MyApp extends HTMLElement {

       connectedCallback() {
           let root = null;
           let useHash = true; // Defaults to: false
           let hash = '#!'; // Defaults to: '#'
           this.router = new Navigo(root, useHash, hash);
       }
    }
   customElements.define('my-app', MyApp);
</script>


Routenverarbeitung hinzufügen:

connectedCallback() {
   let root = null;
   let useHash = true; // Defaults to: false
   let hash = '#!'; // Defaults to: '#'
   this.router = new Navigo(root, useHash, hash);
   router
       .on('page-a', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-a></page-a>');
       })
       .on('page-b', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<page-b></page-b>');
       })
       .on('*', () => {
           this.innerHTML = '';
           this.insertAdjacentHTML('beforeend', '<div>Please click links above</div>');
       })
       .resolve();
}


Jedes Mal, wenn die Route geändert wird, aktualisiert unsere Komponente den internen Inhalt, indem sie ein neues Tag hinzufügt. Diese Tags müssen noch für die neuen Seitenkomponenten registriert werden.

class PageA extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page A</div>');
   }
}
class PageB extends HTMLElement {
   connectedCallback() {
       this.insertAdjacentHTML('beforeend', '<div>This is a page B</div>');
   }
}
customElements.define('page-a', PageA);
customElements.define('page-b', PageB);


Fügen Sie ganz oben auf der Seite Links hinzu, um die Navigation zu überprüfen:

<a href="page-a" data-navigo>Page A</a>
<a href="page-b" data-navigo>Page B</a>


Mit dem Attribut data-navigo können Sie darauf klicken, um vom Router verarbeitet zu werden, anstatt Anforderungen an das Backend zu stellen. Welches ist Zeit, um zum Beispiel so zu beginnen:

npx http-server


Öffnen Sie 127.0.0.1 : 8080 im Browser oder was auch immer es Ihnen dort schreibt und stellen Sie sicher, dass alles funktioniert.



Jetzt können wir alles wie gewünscht in separaten Dateien verteilen, Vorlagen anhängen und Seiten dynamisch laden und Routen zur Konfiguration erstellen. Webkomponenten wird die Hauptarbeit mit dem Lifecycle von Anwendungsobjekten übernehmen, nur Ereignisse sollten Sie daran denken , trennen disconnectedCallback () in dem Haken.

Da ich zeigen wollte , wie schnell dies geschehen ist, werde ich wahrscheinlich nicht den Artikel strecke weiter;)

über einen Teil dieser I bereits in Artikeln geschrieben:

Schnellstart mit WebComponents

und

WebComponents als Frameworks, Interaktion von Komponenten

Warten Sie auf eine neue Enthüllung ^ W Artikel, teilen und mögen!

Der resultierende Quellcode kann hier im Repository des Bitpacks angezeigt werden:

https://bitbucket.org/techminded/testnavigo/

More articles:


All Articles