Get best of the week

Routage des composants Web

Parfois, il semble que les composants Web n'atteignent pas le cadre, surtout par rapport aux représentants les plus populaires. Mais la plupart des éléments les plus urgents qui ne sont pas masqués par la mise en œuvre des normes incluses dans le concept de composants Web sont assez faciles à fixer à l'aide de bibliothèques ou d'une petite quantité de son code élégant. L'une de ces fonctionnalités est le routage frontal. La fonctionnalité n'est pas toujours nécessaire, peut-être même controversée, mais dans la plupart des cadres elle est présente et utilisée par beaucoup. Qu'en est-il des composants Web? Et nous allons essayer d'implémenter le routage à l'aide de la bibliothèque navigo.

Pour que les commandes de la console fonctionnent mieux sous Windows, vous pouvez installer les utilitaires Unix à partir de la distribution git pour ce système, ou, apparemment, utiliser les nouvelles fonctionnalités WSL et de terminal.

Créez d'abord un projet:

mkdir testnavigo
cd testnavigo
npm init

et plusieurs fois, nous appuyons sur Entrée jusqu'à ce qu'il libère,

puis nous mettons la bibliothèque

npm i navigo --save

créez index.html

et connectez-y la bibliothèque et définissez la classe principale de l'application; ici, elle encapsulera la logique de routage et de contrôle de tous les composants enfants.

Les composants Web nous ont permis d'appeler automatiquement un hook lorsqu'un élément apparaît dans l'arborescence à laquelle notre classe est affectée dans l'arborescence des objets du navigateur. Dans ce document, nous initialisons la bibliothèque de routage avec du code directement à partir de l'exemple de la bibliothèque github (dans la vraie vie, cela devrait être fait plus magnifiquement avec un chargement modulaire).

<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>


Ajouter un traitement d'itinéraire:

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();
}


Chaque fois que l'itinéraire est modifié, notre composant met à jour le contenu interne en y ajoutant une nouvelle balise. Il reste à enregistrer ces balises pour les nouveaux composants de page.

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);


En haut de la page, ajoutez des liens pour vérifier la navigation:

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


l'attribut data-navigo permet de cliquer dessus pour être traité par le routeur, plutôt que de faire des requêtes pour le backend. Il est temps de commencer, par exemple, comme ceci:

npx http-server


ouvrez 127.0.0.1 : 8080 dans le navigateur ou tout ce qu'il y écrit et assurez-vous que tout fonctionne.



Maintenant, nous pouvons tout distribuer comme il se doit dans des fichiers séparés, joindre un modèle et le chargement dynamique des pages, prendre des routes vers la configuration. Web Components entreprendra la plupart des travaux avec le cycle de vie des objets d'application, événement d' ouverture ne doit pas oublier razbindivat à Hook disconnectedCallback ()

Comme je voulais montrer à quelle vitesse il est tout fait, l' article plus étendue sera probablement pas;)

quelque chose de ce que je déjà écrit dans des articles:

Démarrage rapide avec WebComponents

et

WebComponents comme frameworks, interaction de composants

Attendez une nouvelle révélation ^ W articles, partagez et aimez!

Le code source résultant peut être consulté ici dans le référentiel sur le bitpack:

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

More articles:


All Articles