A propriedade Hash é uma sequência legível e gravável que é a parte da âncora do URL (a parte que começa com o número #).
gramática
location.hash
Em nosso projeto, há um grande número de páginas com o Formulário de Consulta Ajax + Lista de resultados. Como o resultado da consulta é retornado pelo AJAX, quando o usuário clica em um item na lista e insere a página de detalhes, ele clica no botão Voltar do navegador para retornar à página de consulta do Ajax. Neste momento, todo mundo sabe que o formulário e os resultados da página de consulta retornaram ao estado padrão.
Se você precisar entrar novamente nos critérios de consulta toda vez que retornar à página ou se precisar ir para a página da lista, os usuários realmente ficarão loucos com essa experiência.
Em nosso projeto, escrevemos uma classe base JavaScript muito simples para processar a localização.Hash e salvar o status da página. Hoje vou compartilhar com você.
(O conteúdo deste artigo pode ser um pouco difícil para iniciantes em JavaScript, porque envolve o conhecimento orientado a objetos do JS, como definir classes, herança, métodos virtuais, reflexão etc.)
Vamos dar uma olhada nas nossas necessidades primeiro
Nosso projeto é um sistema de gerenciamento de tarefas H5 baseado em WeChat. O protótipo da página a ser concluído é mostrado na figura abaixo:
Os requisitos devem ser muito claros, ou seja, clique no formulário de consulta, use o AJAX para retornar os resultados da consulta e clique em uma tarefa na lista para inserir a página Detalhes da tarefa. Como os administradores (gerentes de projeto) geralmente lidam com várias tarefas de uma só vez, eles alternam constantemente entre a página Detalhes da tarefa e a página da lista de consultas. Se pressionar a tecla Return nesse momento não pode salvar o status da página de consulta, você deve entrar novamente nas condições de consulta toda vez que retornar à página de consulta. Essa experiência é definitivamente insuportável.
Portanto, precisamos encontrar uma maneira de salvar o status da página para que, quando o usuário pressione a tecla Fallback, as condições e os resultados da consulta ainda estejam lá.
Solução
Existem muitas idéias para salvar o status da página, mas achamos que usar o local. Hash deve ser a melhor maneira.
A idéia é a seguinte:
1. Depois que o usuário insere as condições de consulta e clica em OK, serializamos as condições de consulta em uma string e adicionamos as condições de consulta ao URL através do "#" para obter um novo URL e depois ligue para o local.Reparplace (novo URL) para modificar o endereço na barra de endereço do navegador.
2. Quando o usuário pressiona a tecla Fallback para voltar à página de consulta, também pode ser dito que, quando a página estiver carregando, deserializa a localização.
A ideia é muito simples. O ponto -chave é o método de localização. Este método não é apenas para modificar o URL da barra de endereços no navegador, mas, mais importante, ele substituirá o registro da página atual na Window.history. Se o método Location.Place não for usado, cada fallback voltará à condição de consulta anterior. Obviamente, esses requisitos também podem ser úteis para determinados projetos.
Solução final
Se este artigo compartilhar apenas as idéias de solução acima, será de pouco valor. O valor deste artigo deve ser a classe JavaScript simples, mas muito poderosa, que escrevemos.
Se você entender a solução acima, dê uma olhada nesta classe JavaScript simples:
(function () {if (window.hashQuery) {return;} window.hashquery = function () {}; hashquery.prototype = {parsefromlocation: function () {if (location.hash == '' | para (var p n isto) {if (! this.HasownProperty (p) || tipo de [p]! = 'string') {continuação;} if (index <properties.length) {this [p] = properties [index]; if (this [p] === '-') {this [p] = '; Propriedades = []; para (var p n isto) {if (! this.HasownProperty (p) || tipo de este [p]! = 'string') {continuação;} var value = this [p]; Properties.push (value === ''? Propriedades.Join ('|'); Location.Replace (url);}};}) ();Existem apenas 2 métodos nesta classe. O método hashQuery.parseFromLocation () se desesrializa de Location.Hash para uma instância da subclasse de hashQuery. O método HashQuery.UpDatElocation () serializa e atualiza a instância da subclasse atual de hashQuery para Window.Location.
Você pode ver que a classe de hashQuery não possui propriedades, porque definimos apenas uma classe base e as propriedades da classe são definidas na subclasse. Isso também é realista, porque as condições de consulta só podem ser conhecidas na página específica.
Além disso, observe a serialização e a desserialização aqui. A serialização aqui é apenas usar o mecanismo de reflexão JavaScript para separar os valores de todos os atributos da string (em ordem) da instância com "|"; enquanto a serialização é separar as cordas com "|" e atualizar as propriedades da instância com reflexão (em ordem).
Como usar aula de hashQuery
É muito simples de usar.
O primeiro passo é definir uma subclasse e adicionar todas as condições de consulta que precisam ser usadas aos atributos da string, como nosso código:
(function () {window.taskSearchHashQuery = function () {hashquery.constructor.call (this); this.iterationId = ''; this.assignedUserID = ''; tastsatus = ''; task.keyword = '; HashQuery ();}) ();Na segunda etapa, ligue para os métodos HashQuery.ParseFromLocation () e HashQuery.UpDatElocation () na página de consulta. O código a seguir é a nossa página de consulta completa:
(function () {var urls = {list: "/app/task/list"}; var hashQuery = null; var pager = null; $ (document) .ready (function () {hashQuery = new TaskSearchHashQuery (); hashQuery.parsefromlocation (); ObjectUpDateFormByHashQuery (); $ ("#Btnsearch"). Click (function () {updateHashQueryByForm (); hashquery.updatelocation (); // chamado aqui, serialize as condições de consulta e atualize -o para location.hash $ ("#lblCount"). html ("carregamento ..."); pager.reload (); Page.hidesearch ();}); pager = new ListPager ("#listTasks", urls.list); Pager.getPatA e função (index) {Return "" Page.ProjectId + "& iteationId =" + hashQuery.iterationId + "& cessionDUserID =" + hashQuery.assignedUserID + "& status =" + hashQuery.status + "& keyword =" + hashQuery.keyword;}; pager.onLoaded = () () {" + hashQuery.key; $ ("#hfpagertotalCount"). $ ("#ddLusers"). val (); hashquery.status = $ ("#ddlstatuses"). {$ ("#ddliterations").Resumir
Isso é tudo o que sabemos sobre o uso do local.Hash em nosso projeto para salvar o status da página. Gostaria de saber como você lida com essas necessidades em seu projeto da web?
O conteúdo acima é as dicas para salvar o status da página do local. Hash que o editor apresentou a você. Espero que seja útil para todos!