Prefacio
El enrutamiento frontal es compatible en muchos marcos de biblioteca JS de código abierto, como AngularJS, Backbone, ReactJs, etc. El principio del enrutamiento frontal es el mismo que el enrutamiento de back-end. 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.
Html
Hay un menú de navegación UL en la página, y se utiliza un resultado Div#para mostrar los resultados. Al hacer clic en el menú de navegación, se mostrarán diferentes contenidos de resultados en el #result.
<ul> <li> <a href = "#/"> home </a> </li> <li> <a href = "#/producto"> Producto </a> </li> <li> <a href = "#/server"> servicio </a> </li> </ul> <Div Id = "Result"> </div>
Javascript
Hablemos sobre el breve principio de la implementación de enrutamiento frontal. Tomar el formulario hash (también se puede manejar utilizando la API de la historia) como ejemplo, cuando el hash de la URL cambia, la devolución de llamada registrada de Hashchange se activa y se realizan diferentes operaciones en la devolución de llamada y se muestran diferentes contenidos.
function router () {this.routes = {}; this.cururl = ''; this.route = function (ruta, devolución de llamada) {this.routes [ruta] = devolución de llamada || función(){}; }; this.Refresh = function () {this.cururl = ubicación.hash.slice (1) || '/'; this.routes [this.cururl] (); }; this.init = function () {window.adDeventListener ('load', this.refresh.bind (this), falso); Window.adDeventListener ('Hashchange', this.refresh.bind (this), falso); }}En el código anterior, la implementación del objeto del enrutador del sistema de enrutamiento proporciona principalmente tres métodos:
Init escucha al evento de actualización de hash de la URL del navegador.
Ruta almacena las devoluciones de llamada durante las actualizaciones de ruta a las rutas de matriz de devolución de llamada, y la función de devolución de llamada será responsable de actualizar la página.
Actualizar ejecuta la función de devolución de llamada correspondiente a la URL actual y actualiza la página.
El método de llamadas de enrutador es el siguiente:
Haga clic para activar el cambio hash de la URL y actualice el contenido en consecuencia. Después de ejecutar, encontrará que cada vez que haga clic en el menú, el color y el contenido de fondo se cambiarán en #result.
var r = new Router (); r.init (); var res = document.getElementById ('resultado'); R.Route ('/', function () {res.style.background = 'blue'; res.innerhtml = 'Esta es la página de inicio';}); R.Rutee ('/Product', function () {res.style.background = 'naranja'; res.innerhtml = 'Esta es la página del producto';}); R.Rutee ('/Server', function () {res.style.background = 'Black'; res.innerhtml = 'Esta es la página de servicio';});Resumir
Lo anterior es una implementación simple del enrutamiento frontal. En las aplicaciones reales, el hash debe procesarse regularmente para cumplir con la aplicación de una gran cantidad de URL, y al mismo tiempo, se agregan las funciones del contenido de la página solicitante de AJAX. Aunque este ejemplo es muy simple, de hecho, la base de muchos sistemas de enrutamiento se basa en esto, y otros sistemas de enrutamiento proporcionan principalmente soporte y optimización de los mecanismos marco que usan. Bien, el contenido de este artículo está aquí. Espero que te ayude a estudiar o trabajar. Si tiene alguna pregunta, puede dejar un mensaje para comunicarse.