Recientemente, estoy aprendiendo Backbone. Al aprender a comprender la columna vertebral, primero debe comprender el spa. Al comprender SPA, primero debe comprender cómo las aplicaciones de una sola página pueden cambiar la URL sin actualizar la página.
En comparación con los saltos a diferentes páginas, se puede decir que AJAX ha mejorado enormemente la experiencia de navegación del usuario. Es muy agradable no ver la pantalla blanca entre el cambio de página. Sin embargo, muchas aplicaciones AJAX anteriores no admitían el movimiento hacia adelante y hacia atrás del navegador, lo que hizo que los usuarios volvieran inmediatamente a su posición original sin importar dónde naveguen en el sitio web, y los usuarios no pudieron cambiar el historial de navegación a través del botón de movimiento hacia adelante y hacia atrás del navegador.
Para el primer problema, es bastante fácil de resolver. Simplemente use cookies o LocalStorage para registrar el estado de la aplicación. Lea este estado al actualizar la página y luego envíe la solicitud AJAX correspondiente para cambiar la página. Pero el segundo problema es muy problemático, hablemos primero sobre la solución de los navegadores modernos.
Solución HTML5
Para comprender cómo HTML5 puede avanzar y retroceder, primero debe comprender los objetos de la historia y los objetos de ubicación.
objeto de historia
Propiedades del objeto de historia
1. Longitud: Devuelve el número de URL en la lista del historial del navegador. Para cada página que el usuario visita en la etiqueta actual, este número se agrega en 1. Debido a razones de privacidad, el contenido de URL específico no es visible.
2. Estado: los objetos relacionados con la URL actual solo se pueden agregar o modificar a través de PushState y Reemplazar. Podemos usarla para almacenar información relacionada con las URL.
Método de objeto de historia
1.history.back ()
Este método no tiene parámetros. Después de activarse, volverá a la página anterior navegada, que es equivalente a hacer clic en el botón Atrás del navegador.
2. Historia. Forward ()
Este método no tiene parámetros. Después de activarse, volverá a la página que navega antes de navegar, lo que es equivalente a hacer clic en el botón Reinicio del navegador.
3.history.go (número)
Este método acepta un parámetro variable de conformación, History.go (-1) es equivalente a respaldar una página, History.Go (1) es equivalente a avanzar en una página, History.Go (0) actualizará la página actual.
4.history.pushstate (estado, título, URL)
La clave para cambiar la URL y no actualizar la página es. Este método cambiará el lugar. Después de la ejecución, History.length se incrementará en 1. Este método acepta tres parámetros.
1. Estado: el objeto relacionado con la URL actual.
2. Título: Título de la página, pero todos los navegadores lo ignoran. Para cambiar el título, aún debe usar document.title.
3.URL: una URL con el mismo dominio que la página actual, Ubicación.Ref se convertirá en este valor.
5.history.replacestate (estado, título, URL)
Este método es el mismo que el anterior, pero no cambiará la historia.
Tenga en cuenta que el tercer parámetro Pushstate y Replacestate no pueden cruzarse y no activará el evento PopState del navegador y el evento Onhashchange (probado en Chrome33).
Objeto de ubicación
Además de hacer clic en el evento de reenvío/retroceso e Historial, también puede cambiar la URL a través del método de ubicación y modificar las propiedades de ubicación:
Propiedades del objeto de ubicación (leer y escribir):
1. Nombre del domain + número de puerto
2.HostName: nombre de dominio
3.port: número de puerto
4.Protocolo: protocolo
5.href: ruta completa
6.origin: protocolo + nombre de dominio + puerto
7.hash: URL (hash) Comenzando con la señal de libra (#)
8.PathName: Document Rath + Nombre del documento
9.Search :(?) El siguiente contenido
Puede lograr el propósito de actualizar al cambiar la ubicación.href o la ubicación.hash.
Métodos de objeto de ubicación:
1.Sign: Cambie el valor de la URL y agregue la URL actual al historial. La longitud aumentará en 1. Ubicación.Assig ('#' + x) cambiará la URL pero no actualizará la página.
2. Reorgir: Actualice la página.
3. Replacia: Cambie el valor de la URL, pero el historial. La longitud permanece sin cambios. El mismo método de uso asignado.
evento PopState
Cuando la URL cambia, por ejemplo, si el usuario hace clic en el botón Reenviar/retroceder, History.go (n) (n no es igual a 0), ubicación.hash = x (x no es igual a la ubicación actual.hash) activará este evento. Puede usarlo para monitorear la URL para implementar varias funciones.
La copia del código es la siguiente:
window.onpopState = function () {
// hacer sth
}
evento de cambio
Cambiar el valor hash activará el evento PopState, y activar el evento PopState no necesariamente activará el evento Onhashchange. Después de la prueba:
1. Cambios hash pero ubicación. El nombre del nombre permanece sin cambios activará el evento de cambio, como History.pushState (",", '#ABC');
2. Si hash y ubicación. Pathname cambia juntos, no activará, como History.PushState (",", 'A#ABC');
Cómo escribir navegadores viejos
Los navegadores antiguos no admiten PushState y Reemplazan, por lo que la forma de monitorear los cambios de URL a través de PopState (de hecho, no admite este método). Luego, solo puede cambiar el contenido detrás de la URL# para no lograr actualizar, pero no admiten el cambio en el cambio, por lo que es indiferente a los cambios en la URL (excepto que la página se desplazará a la posición de identificación correspondiente de la página). Entonces solo puede usar el movimiento final: encuesta y setInterval para escuchar el valor de la URL. Como esto:
La copia del código es la siguiente:
var predshash = window.location.hash;
var llamadaback = function () {...}
Window.SetInterval (function () {
if (window.location.hash! = Prevhash) {
Prevhash = window.location.hash;
devolución de llamada (incrustación);
}
}, 100);
Por supuesto, este escrito es muy frustrante. Si no considera hacer clic en una etiqueta con ID en la página para cambiar el hash, puede usar el patrón de diseño para implementar elegantemente la URL de monitoreo. Por ejemplo, el patrón Classic Observer usa una clase para implementar la función de cambiar el hash, y luego todas las clases (observadores) que desean escuchar los cambios en la URL para suscribirse a esta clase (observador).
La copia del código es la siguiente:
// Cambiar la clase de URL
función urlchanger () {
var _This = this;
this.observers = [];
// Agregar un observador
this.addobserver = function (obj) {...}
// Eliminar el observador
this.DeleteObServer = function (obj) {...}
// notificar a los observadores
this._notifyObServers = function () {
Var longitud = _this.observers.length;
console.log (longitud)
para (var i = 0; i <longitud; i ++) {
_THIS.OBSERVERS [i] .Update ();
}
}
// Cambiar la URL
this.changeUrl = function (hash) {
window.location.hash = hash;
_THIS._NOTIFYOBSERVERS ();
}
}
// Clase de escucha
función oneOfBServers () {
var _This = this;
this.update = function () {...}
}
//lograr
var o1 = nuevo urlchanger ();
var o2 = new OneFobServers ();
o1.addobserver (O2);
o1.changeUrl ('Fun/arg1/arg2/');
// O2 ha hecho sth ...