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
Aportes 15
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?
nombrar los metodos con _ al inicio tiene algun nombre?, asi como “Camel case”.
la funcion no deberia de estar dentro de la clase?
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.
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)
}
Hola, para entender que hacen window.location.pathname
y .split('/')
pueden ejecutarlas directamente en la terminal, yo la probé en la misma página del curso.
Por cierto hay que hacer una correción en el operador ternario de pathNameSplit(1)
a pathNameSplit.slice(1)
, se puede verificar con el archivo final del proyecto en Enlaces y Archivos
Más información sobre location
https://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/
https://developer.mozilla.org/es/docs/Web/API/Window/location
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)
}```
Acá dejo más información acerca de los métodos que tiene el objeto Window
Así como los de window.location 😉
split = dividir, le quita el / a la ruta
Tengo la duda si es que tengo un html grandisimo, lo voy a poner en en el objeto donde dice template?
Si quieres investigar mas sobre Spread Syntax aca les dejo un link link
Les dejo este artículo dónde les dan ejemplos visuales de la función pathNameSplit
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.