Techniques Location.hash pour enregistrer les techniques de statut de page_javascript

L'attribut hash est une chaîne lisible et inscriptible qui est la partie d'ancrage de l'URL (la partie commençant par le signe #).

Grammaire

location.hash

Dans notre projet, il existe un grand nombre de formulaires de requête ajax + de pages de liste de résultats puisque les résultats de la requête sont renvoyés par ajax, lorsque l'utilisateur clique sur un élément de la liste pour accéder à la page de détails, puis clique en arrière sur le navigateur. bouton pour revenir à la page de requête ajax, à ce moment 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 ressaisir les conditions de requête à chaque fois que vous revenez à la page, ou même si vous devez vous rendre sur une certaine page de la liste, alors les utilisateurs deviendront vraiment fous de cette expérience.

Dans notre projet, nous avons écrit une classe de base JavaScript très simple pour gérer location.hash afin de sauvegarder l'état de la page. Je vais la partager avec vous aujourd'hui.

(Le contenu de cet article peut être un peu difficile pour les débutants en JavaScript car il implique des connaissances orientées objet JS, telles que la définition des classes, l'héritage, les méthodes virtuelles, la réflexion, etc.)

Jetons d'abord un coup d'œil à nos besoins

Notre projet est un système de gestion de tâches H5 basé sur WeChat. Le prototype de la page à compléter est le suivant :

Les exigences doivent être très claires, c'est-à-dire cliquer sur le formulaire de requête, utiliser ajax pour renvoyer les résultats de la requête, puis cliquer sur une tâche dans la liste pour accéder à la page de 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 basculeront constamment entre la page de détails des tâches et la page de liste de requêtes. À ce stade, si l'état de la page de requête ne peut pas être enregistré en appuyant sur la touche Retour, il le sera. Il est nécessaire de revenir à la page de requête à chaque fois. L'expérience de ressaisir les conditions de requête est définitivement intolérable.

Nous devons donc trouver un moyen de sauvegarder l'état de la page afin que lorsque l'utilisateur appuie sur le bouton de retour, les conditions et les résultats de la requête soient toujours là.

Idées de solutions

Il existe de nombreuses idées pour enregistrer l'état d'une page, mais nous pensons que l'utilisation de location.hash devrait être la meilleure méthode.

L'idée est la suivante :

1. Une fois que l'utilisateur a saisi les conditions de requête et cliqué sur OK, nous sérialisons les conditions de requête dans une chaîne, ajoutons les conditions de requête à la fin de l'URL via "#" pour obtenir une nouvelle URL, puis appelons l'emplacement. replace(new url) pour modifier l'adresse dans la barre d'adresse du navigateur.

2. Lorsque l'utilisateur appuie sur le bouton Retour pour revenir à la page de requête, ce qui peut également être considéré comme lorsque la page est chargée, désérialisez location.hash dans les conditions de requête, puis mettez à jour les conditions de requête dans le formulaire de requête et exécuter la requête.

L'idée est très simple. Le point clé est la méthode location.replace. Cette méthode modifie non seulement l'URL de la barre d'adresse du navigateur, mais plus important encore, remplace l'enregistrement de la page actuelle dans window.history. Si la méthode location.replace n'est pas utilisée, chaque restauration reviendra à la condition de requête précédente. Bien entendu, une telle exigence peut être utile pour certains projets.

Solution finale

Si cet article ne partage que les idées de solutions ci-dessus, il n'aura pas beaucoup de valeur. La valeur de cet article devrait être la classe JavaScript simple mais puissante que nous avons écrite.

Si vous comprenez la solution ci-dessus, jetez un œil à cette simple classe JavaScript :

(function() {
if (window.HashQuery) {
return;
}
window.HashQuery = function() {
};
HashQuery.prototype = {
parseFromLocation: function() {
if (location.hash === '' || location.hash.length === ) {
return;
}
var properties = location.hash.substr().split('|');
var index = ;
for (var p in this) {
if (!this.hasOwnProperty(p) || typeof this[p] != 'string') {
continue;
}
if (index < properties.length) {
this[p] = properties[index];
if (this[p] === '-') {
this[p] = '';
}
}
index++;
}
},
updateLocation: function() {
var properties = [];
for (var p in this) {
if (!this.hasOwnProperty(p) || typeof this[p] != 'string') {
continue;
}
var value = this[p];
properties.push(value === '' &#63; '-' : value);
}
var url = location.origin + location.pathname + location.search + "#" + properties.join('|');
location.replace(url);
}
};
})(); 

Cette classe n'a que 2 méthodes. La méthode HashQuery.parseFromLocation() désérialise l'instance de la sous-classe HashQuery de location.hash, et la méthode HashQuery.updateLocation() sérialise et met à jour l'instance de la sous-classe HashQuery actuelle dans la fenêtre. . emplacement.

Vous pouvez voir que la classe HashQuery n'a aucun attribut. C'est parce que nous avons uniquement défini une classe de base et que les attributs de la classe sont tous définis dans la sous-classe. Ceci est également réaliste, car les conditions de requête savent uniquement quels attributs se trouvent sur la page spécifique.

Veuillez également faire attention à la sérialisation et à la désérialisation ici. La sérialisation utilise ici uniquement 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 la chaîne avec "|" puis à utiliser la réflexion pour mettre à jour. aux propriétés de l'instance (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 les conditions de requête requises aux attributs de chaîne, comme notre code :

(function() {
window.TaskSearchHashQuery = function () {
HashQuery.constructor.call(this);
this.iterationId = '';
this.assignedUserId = '';
this.status = '';
this.keyword = '';
};
TaskSearchHashQuery.constructor = TaskSearchHashQuery;
TaskSearchHashQuery.prototype = new HashQuery();
})(); 

La deuxième étape consiste à appeler les méthodes HashQuery.parseFromLocation() et HashQuery.updateLocation() sur la page de requête. Le code ci-dessous 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.parseFromLocation();//在这里调用的哦，从location反序列化object
updateFormByHashQuery();
$("#btnSearch").click(function() {
updateHashQueryByForm();
hashQuery.updateLocation();//在这里调用的哦，将查询条件序列化之后更新到location.hash
$("#lblCount").html("加载中...");
pager.reload();
page.hideSearch();
});
pager = new ListPager("#listTasks", urls.list);
pager.getPostData = function(index) {
return "pageIndex=" + index + "&pageSize=" + "&projectId=" + page.projectId
+ "&iterationId=" + hashQuery.iterationId
+ "&assignedUserId=" + hashQuery.assignedUserId
+ "&status=" + hashQuery.status
+ "&keyword=" + hashQuery.keyword;
};
pager.onLoaded = function() {
$("#lblCount").html("共 " + $("#hfPagerTotalCount").val() + " 个任务");
$("#hfPagerTotalCount").remove();
};
pager.init();
});
function updateHashQueryByForm() {
hashQuery.iterationId = $("#ddlIterations").val();
hashQuery.assignedUserId = $("#ddlUsers").val();
hashQuery.status = $("#ddlStatuses").val();
hashQuery.keyword = $("#txtKeyword").val();
};
function updateFormByHashQuery() {
$("#ddlIterations").val(hashQuery.iterationId);
$("#ddlUsers").val(hashQuery.assignedUserId);
$("#ddlStatuses").val(hashQuery.status);
$("#txtKeyword").val(hashQuery.keyword);
};
})(); 

Ringkasan

Ini adalah semua pengetahuan tentang menggunakan location.hash untuk menyimpan keadaan halaman dalam projek kami. Saya tidak tahu bagaimana semua orang mengendalikan keperluan sedemikian dalam projek WEB mereka?

Kandungan di atas ialah teknik status halaman simpanan location.hash yang diperkenalkan oleh editor Saya harap ia akan membantu semua orang!