No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Creación de la función loadInitialRoute

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.

  1. 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.
  2. 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.

  1. 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.
  2. 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.

  1. 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);
    }
    
  2. 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!

Aportes 11

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

por qué PathNameSplit(1) ? si PathNameSplit es un vector string y no una función.

Explicación del funcionamiento del método _loadInitialRoute()

_loadInitialRoute()
{
  // window.location.pathname = "/index.html"

  const pathNameSplit = window.location.pathname.split('/');
  // window.location.pathname.split('/');  Crea un array
  // (2)["", "index.html"]

  const pathSegs = pathNameSplit.length > 1 ? pathNameSplit.slice(1) : '';
  // pathSegs = ["index.html"]

  this.loadRoute(...pathSegs);
  // this.loadRoute("index.html");
}

¿Por qué le pasa un string vacío si pathNameSplit no tiene más de 1 elemento?

Cuando usar under score al inicio del nombre de una función?

En este caso es funcional para el programador, al indicarle que es un método privado.
Si te das cuenta quien lo ejecuta es el contructor de la clase. No debería ser usado por el usuario dado que es un método de inicialización de la rutas para la clase Routes.

nombrar los metodos con _ al inicio tiene algun nombre?, asi como “Camel case”.

la funcion no deberia de estar dentro de la clase?

class Router {

    constructor(routes) {
        this.routes = routes;
        this._loadInitialRoute();
    }
}

_loadInitialRoute() {
    const pathNameSplit = window.location.pathname.split('/');
    const pathSegs = pathNameSplit.length > 1 ? pathNameSplit.slice(1): '';

    this.loadRoute(...pathSegs)
}

Tengo la duda si es que tengo un html grandisimo, lo voy a poner en en el objeto donde dice template?

Quería saber que hacia paso por paso y jugando con la consola:

_loadInitialRoute(){
    const pathNameSplit = window.location.pathname.split('/'); //retorna array despues de quitar el / ["blah.com", "location"]
    const pathSegs = pathNameSplit.length > 1 ? pathNameSplit.slice(1) : ''; //revisa si el array tiene mas de un elemento y regresa el segundo ["location"]

    this.loadRoute(...pathSegs)
}```

split = dividir, le quita el / a la ruta