La propiedad hash es una cadena legible y de escritura que es la parte de anclaje de la URL (la parte que comienza con el número #).
gramática
Ubicación.
En nuestro proyecto, hay una gran cantidad de páginas con la lista de resultados de la consulta AJAX +. Dado que el resultado de la consulta es devuelto por AJAX, cuando el usuario hace clic en un elemento en la lista y ingresa a la página de detalles, hace clic en el botón de retroceso del navegador para volver a la página de la consulta AJAX. En este momento, todos saben que el formulario y los resultados de la página de consulta han vuelto al estado predeterminado.
Si tiene que volver a ingresar los criterios de consulta cada vez que regrese a la página, o si tiene que ir a la página de la lista, los usuarios realmente se volverán locos con esta experiencia.
En nuestro proyecto, escribimos una clase base de JavaScript muy simple para procesar la ubicación. Hash y guardar el estado de la página. Hoy lo compartiré contigo.
(El contenido de este artículo puede ser un poco difícil para los principiantes en JavaScript, porque involucra un conocimiento orientado a objetos JS, como definir clases, herencia, métodos virtuales, reflexión, etc.)
Echemos un vistazo a nuestras necesidades primero
Nuestro proyecto es un sistema de gestión de tareas H5 basado en WeChat. El prototipo de la página a completar se muestra en la figura a continuación:
Los requisitos deben ser muy claros, es decir, haga clic en el formulario de consulta, use AJAX para devolver los resultados de la consulta y luego haga clic en una tarea en la lista para ingresar la página de detalles de la tarea. Dado que los administradores (gerentes de proyecto) generalmente manejan múltiples tareas a la vez, cambiarán constantemente entre la página de detalles de la tarea y la página de la lista de consultas. Si presionar la tecla de retorno en este momento no puede guardar el estado de la página de consulta, debe volver a ingresar las condiciones de consulta cada vez que regrese a la página de consulta. Esta experiencia es definitivamente insoportable.
Por lo tanto, necesitamos encontrar una manera de guardar el estado de la página para que cuando el usuario presione la tecla respaldo, las condiciones y los resultados de la consulta aún estén ahí.
Solución
Hay muchas ideas para guardar el estado de la página, pero creemos que usar la ubicación. Hash debería ser la mejor manera.
La idea es la siguiente:
1. Después de que el usuario ingresa las condiciones de consulta y los clics Aceptar, serializamos las condiciones de consulta en una cadena y agregamos las condiciones de consulta a la URL a través de "#" para obtener una nueva URL y luego llamamos a la ubicación.
2. Cuando el usuario presiona la tecla de retroceso para que vuelva a la página de la consulta, también se puede decir que cuando la página está cargando, deserializa la ubicación.
La idea es muy simple. El punto clave es el método ubicación. Este método no solo es modificar la URL de la barra de direcciones en el navegador, sino que lo más importante, reemplazará el registro de la página actual en Window.history. Si no se utiliza el método de ubicación. Replace, cada alternativa volverá a la condición de consulta anterior. Por supuesto, tales requisitos también pueden ser útiles para ciertos proyectos.
Solución final
Si este artículo solo comparte las ideas de soluciones anteriores, será de poco valor. El valor de este artículo debería ser la clase JavaScript simple pero muy poderosa que escribimos.
Si comprende la solución anterior, eche un vistazo a esta clase de JavaScript simple:
(function () {if (window.hashQuery) {return;} window.hashQuery = function () {}; hashquery.prototype = {parseFromLocation: function () {if (ubicación.hash ==== '' || ubicación.hash.length ====) {return;} var propiedades = ubicación.hash.substr (). (var p en esto) {if (! this.hasownproperty (p) || typeOf this [p]! = 'string') {continúa;} if (index <propiedadies.length) {this [p] = propiedades [index]; if (this [p] ==== '-'-') {this [p] =' '';}} Índice; []; para (var p p en esto) {if (! this.hasownproperty (p) || typeOf this [p]! = 'string') {continúa;} value var = this [p]; propiedad.push (value === '' '?'-': valor);} var url = ubicación + ubicación.pathname + ubicación Properties.Join ('|'); ubicación.replace (url);}};}) ();Solo hay 2 métodos en esta clase. El método Hashquery.ParseFromLocation () se deserializa desde la ubicación. Hash a una instancia de la subclase de hashquery. El método hashquery.updateLocation () serializa y actualiza la instancia de la subclase de hashquery actual a Window.location.
Puede ver que la clase de hashquery no tiene propiedades, porque solo definimos una clase base, y las propiedades de la clase se definen en la subclase. Esto también es realista, porque las condiciones de consulta solo se pueden conocer en la página específica.
Además, tenga en cuenta la serialización y la deserialización aquí. La serialización aquí es solo para usar el mecanismo de reflexión de JavaScript para separar los valores de todos los atributos de cadena (en orden) de la instancia con "|"; mientras que la serialización es separar las cadenas con "|" y luego actualizar las propiedades de la instancia con reflexión (en orden).
Cómo usar la clase de hashquery
Es muy simple de usar.
El primer paso es definir una subclase y agregar todas las condiciones de consulta necesarias para usarse a los atributos de cadena, como nuestro código:
(function () {Window.TaskSearchHashQuery = function () {hashquery.constructor.call (this); this.iterationId = ''; this.assigneduserid = ''; this.status = ''; this.keyword = '' ';}; taskSearchHQuery.Constructor = TaskSearchHQuery; TaskSearchhashQuery. Hashquery ();}) ();En el segundo paso, llame a los métodos Hashquery.ParseFromLocation () y Hashquery.UpdateLocation () en la página de consulta. El siguiente código es nuestra página de consulta completa:
(function () {var urls = {list: "/app/task/list"}; var Hashquery = null; var perger = null; $ (document) .ready (function () {Hashquery = new TaskSearchHashQuery (); Hashquery.ParseFromLocation ();/llamado, deserialize aquí ObjectUpDateFormByHashQuery (); $ ("#btnsearch"). Click (function () {updateHashQueryBorm (); hashquery.updateLocation (); // Llamado aquí, serializa las condiciones de consulta y actualiza a la actualización para actualizarlo ubicación.hash $ ("#lblcount"). html ("cargar ..."); perger.reload (); page.hidesearch ();}); perger = new ListPager ("#listTasks", urls.list); pager.getPostData = function (índice) {return "pageIndex =" + "& pagesize =" + " Page.projectId + "& iterationId =" + hashquery.iterationId + "& asignedUserId =" + hashquery.assigneduserid + "& status =" + hashquery.status + "& keyword =" + hashquery.keyword;}; pager.onloaded = function () {"#lblCount"). $ ("#hfpagerToTalCount"). val () + "tareas"); $ ("#hfpagerToTalCount"). remove ();}; perger.init ();}); function updateHasHQueryByForm () {Hashquery.iterationId = $ ("#ddliterations"). Val (); Hashquery.AssignEn $ ("#ddlusers"). val (); hashquery.status = $ ("#ddlStatuses"). val (); hashquery.keyword = $ ("#txtkeyword"). val ();}; función UpdateFormByhashery () {$ ("#ddliterations"). Val (hashquery.iterationId); $ ("#ddlusers"). val (hashquery.assigneduserid); $ ("#ddlstatuses"). val (hashquery.status); $ ("#txteyalword"). Val (hashquery.keyword);};};};};};};};};Resumir
Esto es todo lo que sabemos sobre el uso de ubicación. Hash en nuestro proyecto para guardar el estado de la página. Me pregunto cómo se ocupa de tales necesidades en su proyecto web.
El contenido anterior son los consejos para guardar el estado de la página de la ubicación. Hash que el editor le presentó. ¡Espero que sea útil para todos!