por qué PathNameSplit(1)
? si PathNameSplit es un vector string y no una función.
Introducción y bienvenida al curso
Aviso importante: este curso se dará de baja dentro de un mes
Lo que aprenderás para crear Router para SPA
La lógica detrás de nuestro enrutador
Conceptos de SPA Routing y nuestro primer servidor
Desglose del proyecto del curso y explicación del SPA Routing
Implementando routing del lado del cliente
Creando una aplicación sencilla en html
Creando el servidor de nuestra app
Creando nuestro archivo de rutas
Lógica de nuestro ruteador
Creación de la función loadInitialRoute
Haciendo match entre la URL y una ruta
Creando la función load routes
Actualizando nuestro index.html para agregar la nueva funcionalidad de routing
Cierre del curso y conclusiones
Cierre del curso y conclusiones
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
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:
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:
router.js
, donde se desarrollará toda la lógica del enrutador.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:
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:
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
:
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.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
:
split('/')
, segmentamos la URL para tratamiento específico de rutas.Operador Ternario:
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
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
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?