Creación de la función loadInitialRoute

Taller de Creación de Router para Single Page App con JavaScript

Clase 9 de 13

Clase 9 / 13

Recursos

¿Cómo empezar a estructurar la aplicación y el archivo del Router?

El primer paso para desarrollar una aplicación robusta es establecer una base sólida. En este caso, vamos a preparar nuestra aplicación para manejar el Renderizado del DOM y el Routing en JavaScript. Es vital asegurarnos de que nuestro HTML pueda ser actualizado dinámicamente según la lógica que determinemos.

Configuración de Comillas Sencillas:
- Usa comillas sencillas para todos los elementos H1 en tu HTML. Esto asegura que los textos puedan ser capturados por el archivo JavaScript que estamos a punto de crear.
Creación del archivo Router:
- Crea un nuevo archivo llamado router.js, donde se desarrollará toda la lógica del enrutador.

¿Cómo definir y estructurar la clase Router?

Dentro de router.js, la clase Router será el corazón de la aplicación, gestionando las rutas y facilitando la navegación.

Definir la clase:
- Comienza por declarar la clase Router y luego, define su constructor que recibirá las rutas.
```
class Router {
  constructor(routes) {
    this.routes = routes;
    this.loadInitialRoute();
  }
}
```
- this.routes almacena la información necesaria para el manejo de rutas.
- this.loadInitialRoute(): una función futura que cargará la ruta inicial de manera automática.
Comprender el uso de Constructor:
- El constructor en JavaScript te permite inicializar los atributos de la clase y preparar métodos adicionales.

¿Cómo implementar funciones clave en la clase Router?

Las funciones son esenciales para que nuestro Router cumpla su propósito: adaptar el contenido visual según la URL actual.

Crear función utilizarRuta:
- Este método detecta la página o plantilla HTML activa sin necesidad de parámetros.
- Accede a window.location.pathname que nos proporciona la ruta actual.
```
utilizarRuta() {
  const pathNext = window.location.pathname.split('/').slice(1);
  this.loadRoute(...pathNext);
}
```
Explicación detallada:
- window.location.pathname.split('/'): Este método fracciona el pathname en un array para facilitar la navegación.
- this.loadRoute(...pathNext): Invoca a loadRoute con los elementos segmentados de nuestra ruta actual.

Consideraciones adicionales para el desarrollo

Cuando construyes una aplicación modular, es crucial prestar atención a ciertos detalles que podrían mejorar la experiencia de usuario y la estructura del código.

Variable pathNext:
- Al emplear split('/'), segmentamos la URL para tratamiento específico de rutas.
Operador Ternario:
- Decide si operar sobre el array resultante o devolver un String vacío cuando la condición no se cumple.

Al construir una aplicación web, es esencial manejar un Javascript modular con funciones y clases bien definidas. Este proceso, aunque parezca simple, es la base para aplicaciones escalables. El camino hacia la maestría en desarrollo de aplicaciones web está lleno de desafíos, pero con cada paso adquieres más control y entendimiento sobre la tecnología. ¡Sigue aprendiendo y programando sin miedo!