La propriété de hachage est une chaîne lisible et écrite qui est la partie ancre de l'URL (la partie commençant par le numéro #).
grammaire
emplacement.
Dans notre projet, il existe un grand nombre de pages avec Ajax Query Form + Result List. Étant donné que le résultat de la requête est renvoyé par Ajax, lorsque l'utilisateur clique sur un élément dans la liste et entre dans la page Détails, il clique sur le bouton Retour du navigateur pour revenir à la page de requête AJAX. À l'heure actuelle, tout le monde sait que le formulaire et les résultats de la page de requête sont revenus à l'état par défaut.
Si vous devez réintégrer les critères de requête chaque fois que vous revenez à la page, ou si vous devez aller sur la page de la liste, les utilisateurs deviendront vraiment fous avec cette expérience.
Dans notre projet, nous avons écrit une classe de base JavaScript très simple pour traiter l'emplacement et enregistrer l'état de la page. Aujourd'hui, je vais le partager avec vous.
(Le contenu de cet article peut être un peu difficile pour les débutants en JavaScript, car il implique des connaissances axées sur les objets JS, comme la définition des classes, l'héritage, les méthodes virtuelles, la réflexion, etc.)
Jetons un coup d'œil à nos besoins en premier
Notre projet est un système de gestion des tâches H5 basé sur WECHAT. Le prototype de page à terminer est illustré dans la figure ci-dessous:
Les exigences doivent être très claires, c'est-à-dire cliquez sur le formulaire de requête, utilisez AJAX pour retourner les résultats de la requête, puis cliquez sur une tâche dans la liste pour saisir la page Détails de la tâche. Étant donné que les administrateurs (chefs de projet) gèrent généralement plusieurs tâches à la fois, ils basculent constamment entre la page Détails de la tâche et la page de liste de requête. Si une appuye sur la touche de retour à ce moment ne peut pas enregistrer l'état de la page de requête, vous devez réintégrer les conditions de requête chaque fois que vous revenez à la page de requête. Cette expérience est définitivement insupportable.
Par conséquent, nous devons trouver un moyen de sauvegarder l'état de la page afin que lorsque l'utilisateur appuie sur la touche de secours, les conditions et les résultats de requête sont toujours là.
Solution
Il existe de nombreuses idées pour enregistrer le statut de page, mais nous pensons que l'utilisation de l'emplacement.hash devrait être le meilleur moyen.
L'idée est la suivante:
1. Après que l'utilisateur entre dans les conditions de requête et clique sur OK, nous sérialisons les conditions de requête dans une chaîne, puis ajoutons les conditions de requête à l'URL via "#" pour obtenir une nouvelle URL, puis appelez l'emplacement.replace (nouvelle URL) pour modifier l'adresse dans la barre d'adresse du navigateur.
2. Lorsque l'utilisateur appuie sur la touche de secours pour retomber sur la page de requête, il peut également être dit que lorsque la page se charge, désérialisez l'emplacement. Passez-vous dans des conditions de requête, puis mettez à jour les conditions de requête vers le formulaire de requête et exécutez la requête.
L'idée est très simple. Le point clé est la méthode de la localisation. Cette méthode ne consiste pas seulement à modifier l'URL de la barre d'adresse dans le navigateur, mais plus important encore, elle remplacera l'enregistrement de la page actuelle dans Window.History. Si la méthode d'emplacement. Bien sûr, ces exigences peuvent également être utiles pour certains projets.
Solution finale
Si cet article ne partage que les idées de solution ci-dessus, elle sera de peu de valeur. La valeur de cet article devrait être la classe JavaScript simple mais très puissante que nous avons écrite.
Si vous comprenez la solution ci-dessus, jetez un œil à cette classe JavaScript simple:
(function () {if (window.hashquery) {return;} window.hashquery = function () {}; hashQuery.prototype = {paSefromLocation: function () {if (location.hash === '' || location.hash.length ===) {return;} var les propriétés = localisation.hash.subStr (). (var p dans ceci) {if (! this.hasownproperty (p) || typeof this [p]! = 'string') {continu;} if (index <propriétés.length) {this [p] = propriétés [index]; if (this [p] === '-') {this [p] = '';}} index ++;}}, ledAtElocation: Fonction () {varterties = index ++;}}}, ledAllocation: Fonction ().) []; pour (var p dans ceci) {if (! this.hasownproperty (p) || typeof this [p]! = 'string') {continu;} var value = this [p]; Properties.push (value === ''? '-': value);} var url = location.origin + location.pathenom + emplacement.search + "#" + propriétés.join ('|'); location.replace (url);}};}) ();Il n'y a que 2 méthodes dans cette classe. La méthode HashQuery.ParsefromLocation () désérialise de l'emplacement.hash à une instance de la sous-classe HashQuery. La méthode hashQuery.updatelocation () sérialise et met à jour l'instance de la sous-classe HashQuery actuelle à Window.Location.
Vous pouvez voir que la classe HashQuery n'a pas de propriétés, car nous ne définissons qu'une classe de base, et les propriétés de la classe sont définies dans la sous-classe. Ceci est également réaliste, car les conditions de requête ne peuvent être connues que sur la page spécifique.
Notez également la sérialisation et la désérialisation ici. La sérialisation ici est simplement d'utiliser le mécanisme de réflexion JavaScript pour séparer les valeurs de tous les attributs de chaîne (dans l'ordre) de l'instance avec "|"; tandis que la sérialisation consiste à séparer les chaînes avec "|", puis à mettre à jour les propriétés de l'instance avec la réflexion (dans l'ordre).
Comment utiliser la classe HashQuery
C'est très simple à utiliser.
La première étape consiste à définir une sous-classe et à ajouter toutes les conditions de requête nécessaires pour être utilisées aux attributs de chaîne, tels que notre code:
(function () {window.tasksearchhashquery = function () {hashQuery.Constructor.Call (this); this.iterationId = ''; this.assigneDuserid = ''; this.status = ''; this.keyword = '';}; tasksearchhashhquery.constructor = tasksearchhashQuery; tasksearchhashQuery.pototyPer = tasksearchhashQuery; tasksearchhashquery.pototypeur = tasksearchhashquery; HashQuery ();}) ();Dans la deuxième étape, appelez les méthodes HashQuery.PaSefromLocation () et HashQuery.Updatelocation () sur la page de requête. Le code suivant est notre page de requête complète:
(function () {var urls = {list: "/ app / task / list"}; var hashQuery = null; var pager = null; $ (document) .ready (function () {hashQuery = new tasksearchhashQuery (); hashQuery.ParsfromLocation (); // appelée ici, Deerialize ObjectupDateFormByHashQuery (); $ ("# btnsearch"). Cliquez sur (fonction () {updateHashQueryByform (); hashQuery.updatelocation (); // appelé ici, sérialiser les conditions de requête et la mettre à jour jusqu'à emplacement.hash $ ("# lblcount"). html ("chargement ..."); pager.reload (); page.Hidesearch ();}); pager = new listPager ("# listTasks", urls.list)) Page.Projectid + "& itérationId =" + HashQuery.IterationId + "& AssignedUserId =" + HashQuery.AssigneDuserid + "& Status =" + HashQuery.Status + "& Keyword =" + HashQuery.Keyword;}; Pager.onloaded = function () {$ ("# # lblcount"). $ ("# hfpagertotalcount"). val () + "tasks"); $ ("# hfpagertotalCount"). retire ();}; pager.init ();}); fonction updatehashquerybyform () {hashQuery.iterationId = $ ("# ddliterations"). $ ("# ddlusers"). Val (); hashQuery.status = $ ("# ddlstatus"). val (); hashQuery.keyword = $ ("# txtkeyword"). Val ();}; fonction updateFormByHashQuery () {$ ("# ddliterations"). Val (hashQuery.iterationId); $ ("# ddlusers"). Val (hashQuery.AssignedUserId); $ ("# ddlstatus"). val (hashQuery.status)) ("# txtkey").Résumer
C'est tout ce que nous savons sur l'utilisation de l'emplacement.hash dans notre projet pour enregistrer l'état de la page. Je me demande comment vous traitez de tels besoins dans votre projet Web?
Le contenu ci-dessus est les conseils pour enregistrer l'état de la page de l'emplacement. J'espère que ce sera utile à tous!