He hecho un desarrollo de back-end, especialmente cuando he usado Django o Express, debería estar familiarizado con las funciones de enrutamiento en el lado del servidor. WordPress, un sistema de blog popular en países extranjeros, también es un caso de implementación de enrutamiento muy clásico. Entonces, ¿cuál es exactamente la ruta? Hablemos brevemente de ello a través de WordPress.
Aquellos que entienden las reglas de reescritura de WordPress son conscientes de que, de hecho, cualquier acceso de URL se basa en index.php en el directorio de instalación de WordPress (excepto el acceso a los archivos que ya existen en el servidor). Será obvio cuando el enlace fijo de WordPress esté en la configuración de modo. Por ejemplo, la URL del artículo es index.php? P = id, y la URL de la página de clasificación es index.php? Cat = id.
Aquí, index.php actúa como una función de enrutador, consulte la siguiente imagen:
En otras palabras, no importa qué dirección esté visitando, todas las solicitudes eventualmente serán redirigidas a index.php. El programa determinará qué tipo de página necesita en función de las características de la URL de acceso, y luego hará una consulta a la base de datos y finalmente devuelve el contenido HTML al navegador.
Lo que mencionamos anteriormente es el enrutamiento de backend web, entonces, ¿cuál es el enrutamiento frontal? De hecho, la tecnología de enrutamiento frontal se usa ampliamente ahora, y muchas de la biblioteca JS de código abierto admiten el enrutamiento frontal, como AngularJS, Ember.js, Director.js, etc. El principio del enrutamiento frontal es el mismo que el enrutamiento de fondo. Permite que todas las interacciones y las muestran en una página se ejecutarán para reducir las solicitudes del servidor y mejorar la experiencia del cliente. Cada vez más sitios web, especialmente aplicaciones web, usan el enrutamiento frontal.
Director.js es el registro/analizador de ruta más pura. Utiliza el símbolo "#" para organizar diferentes rutas de URL sin actualizar la página y coincidir con diferentes métodos de devolución de llamada de acuerdo con diferentes rutas de URL. Director.js no solo se puede aplicar al cliente, sino también en segundo plano usando Node.js, sino que también puede implementar la función de enrutamiento de backend mencionada anteriormente. Echemos un vistazo a los siguientes ejemplos sobre la implementación de enrutamiento frontal
Debe diseñar una aplicación de escritorio web similar a Web QQ. Hay muchos pequeños iconos en el escritorio, y cada icono pequeño es una aplicación funcional, similar al escritorio de una computadora. Hay un botón de noticias de Baidu en el escritorio. Haga clic para aparecer en una ventana en la página actual. Puede ver las noticias de Baidu y otro ícono. Haga clic para ver la hora actual. Aquí hay un ejemplo simple:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "https://rawgit.com/flatiron/director/master/build/director.min.js"> </script> <estilo> * {margen: 0; padding: 0} {ancho: 100%; altura: 100%; fondo: #3d72b8} #baidunews {ancho: 40px; altura: 40px; fondo: url ("./ du.png") no-repeat; visual no-repeat;display:block;margin:50px;}</style></head><body> <a href="#/baidunews" id="baidunews"></a> <a href="#/time" id="tweibo"></a><script> //Define route var route = { "/time":nowtime, "/Baidunews": [showFrame, getBaidUnews]} // inicializar ruta var router = router (ruta) router.init (); // Defina la función de devolución de llamada que muestra la función de tiempo actual ahora tiempo () {var ahora = new Date (); var y = now.getTlyar (); var m = ahora.getMonth ()+1; var d = ahora.getDate (); var h = ahora.gethours (); var mi = ahora.getminutes (); var s = ahora.getSeconds (); alerta ("hora actual/n"+y+"año"+m+"mes"+d+"día"+h+"tiempo"+mi+"minuto"+s+"segundos"); } // Defina la función que muestra la función marco del navegador showframe () {var f = document.createElement ("div"); f.style.width = "985px"; F.Style.Height = "500px"; F.Style.Position = "Absolute"; f.style.top = "50px"; f.style.left = "200px"; F.Style.Background = "White"; F.Style.Border = "2px Solid #ccc"; // Cerrar botón var cerrando = document.createElement ("span"); Close.Style.Position = "Absolute"; Close.style.right = "5px"; Close.style.cursor = "Pointer"; Close.Style.MarginRight = "5px"; cerrar.OnClick = function () {document.body.removechild (f); } Close.innerhtml = "x"; // cargar el iframe fuera del sitio var win = document.createElement ("iframe"); win.id = "myiframe"; win.frameBorder = 0; win.style.width = "100%"; win.style.height = "100%"; F.AppendChild (cierre); F.AppendChild (Win); document.body.appendChild (f); } // Definir la función de función para cargar la página web de Baidu News getBaidUnew () {document.getElementById ("myiframe") .src = "http://news.baidu.com/"; } </script> </body> </html>En el código anterior, podemos ver que Director.js usa "#" en la página para el enrutamiento y el reenvío. El ejemplo anterior es solo un ejemplo muy simple. Director.js puede implementar funciones más complejas y enormes. Puede interactuar con AJAX y los datos del servidor, y puede coexistir con otras bibliotecas de clases JS. Es una poderosa herramienta de desarrollo de aplicaciones web.
¿El director.js tiene algún impacto en el SEO?
El Director.js del cliente tiene un impacto en el SEO, porque todos los datos están solo en una página, y algunos datos se almacenan de una manera que no es propicio para las arañas de los motores de búsqueda. Si necesita ser amigable con SEO, significa que necesita construir una "página web" en lugar de una "aplicación web". Director.js no se recomienda.
Referencia: Director.js