Get best of the week

Enrutamiento de componentes web

A veces parece que los componentes web no alcanzan el marco, especialmente en comparación con los representantes más populares. Pero gran parte de lo más apremiante que no se ve oscurecido por la implementación de los estándares incluidos en el concepto de componentes web es lo suficientemente fácil de sujetar usando bibliotecas o una pequeña cantidad de su código elegante. Una de estas características es el enrutamiento front-end. La característica no siempre es necesaria, quizás incluso controvertida, pero en la mayoría de los marcos está presente y es utilizada por muchos. ¿Qué pasa con los componentes web? E intentaremos implementar el enrutamiento utilizando la biblioteca navigo.

Para que los comandos de la consola funcionen mejor en Windows, puede instalar las utilidades de Unix desde la distribución git para este sistema o, aparentemente, usar las nuevas características de WSL y terminales.

Primero, crea un proyecto:

mkdir testnavigo
cd testnavigo
npm init

y muchas veces presionamos enter hasta que se libera,

luego colocamos la biblioteca

npm i navigo --save

cree index.html

y conecte la biblioteca en él y defina la clase principal de la aplicación; aquí encapsulará la lógica de enrutamiento y control de todos los componentes secundarios.

Los componentes web nos dieron la oportunidad de llamar automáticamente al enlace cuando aparece un elemento en el árbol al que está asignada nuestra clase en el árbol de objetos del navegador. En él, inicializamos la biblioteca de enrutamiento con código directamente desde el ejemplo del github de la biblioteca (en la vida real, esto debería hacerse más bellamente con la carga modular).

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


Agregar procesamiento de ruta:

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


Cada vez que se cambia la ruta, nuestro componente actualiza el contenido interno al agregarle una nueva etiqueta. Queda por registrar estas etiquetas para los nuevos componentes de la página.

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 la parte superior de la página, agregue enlaces para verificar la navegación:

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


El atributo data-navigo permite hacer clic en ellos para que el enrutador los procese, en lugar de realizar solicitudes para el backend. Que es hora de comenzar, por ejemplo, así:

npx http-server


abra 127.0.0.1 : 8080 en el navegador o lo que sea que le escriba allí y asegúrese de que todo funcione.



Ahora podemos distribuir todo como debería en archivos separados, adjuntar plantilla y carga dinámica de páginas, sacar rutas a la configuración. Web Components llevará a cabo la mayor parte del trabajo con el ciclo de vida de los objetos de la aplicación, solo el evento de apertura no debe olvidarse razbindivat en Hook desconectadoCallback ()

Como quería mostrar qué tan rápido se hace todo, es probable que el artículo adicional no lo haga;)

En algo de esto, ya escrito en artículos:

Inicio rápido con WebComponents

y

WebComponents como marcos, interacción de componentes

Espere una nueva revelación ^ W artículos, ¡comparta y haga clic en Me gusta!

El código fuente resultante se puede ver aquí en el repositorio en el paquete de bits:

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

More articles:


All Articles