Location.hash-Techniken zum Speichern des Seitenstatus_Javascript-Techniken

Das Hash-Attribut ist eine lesbare und beschreibbare Zeichenfolge, die den Ankerteil der URL darstellt (der Teil, der mit dem #-Zeichen beginnt).

Grammatik

location.hash

In unserem Projekt gibt es eine große Anzahl von Ajax-Abfrageformularen + Ergebnislistenseiten. Da die Abfrageergebnisse von Ajax zurückgegeben werden, klickt der Benutzer auf ein Element in der Liste, um die Detailseite aufzurufen, und klickt dann im Browser zurück Klicken Sie auf die Schaltfläche, um zur Ajax-Abfrageseite zurückzukehren. Zu diesem Zeitpunkt weiß jeder, dass das Formular und die Ergebnisse der Abfrageseite in den Standardzustand zurückgekehrt sind.

Wenn Sie die Abfragebedingungen jedes Mal erneut eingeben müssen, wenn Sie zur Seite zurückkehren, oder sogar zu einer bestimmten Seite in der Liste gehen müssen, werden Benutzer von dieser Erfahrung wirklich verrückt werden.

In unserem Projekt haben wir eine sehr einfache JavaScript-Basisklasse geschrieben, um location.hash zu verarbeiten und den Seitenstatus zu speichern. Ich werde sie heute mit Ihnen teilen.

(Der Inhalt dieses Artikels ist für JavaScript-Anfänger möglicherweise etwas schwierig, da er objektorientierte JS-Kenntnisse erfordert, z. B. Definition von Klassen, Vererbung, virtuelle Methoden, Reflexion usw.)

Werfen wir zunächst einen Blick auf unsere Bedürfnisse

Unser Projekt ist ein H5-Aufgabenverwaltungssystem basierend auf WeChat. Der Prototyp der zu vervollständigenden Seite ist wie folgt:

Die Anforderungen sollten sehr klar sein. Klicken Sie also auf das Abfrageformular, verwenden Sie Ajax, um die Abfrageergebnisse zurückzugeben, und klicken Sie dann auf eine Aufgabe in der Liste, um die Seite mit den Aufgabendetails aufzurufen. Da Administratoren (Projektmanager) normalerweise mehrere Aufgaben gleichzeitig bearbeiten, wechseln sie ständig zwischen der Seite mit den Aufgabendetails und der Seite mit der Abfrageliste. Wenn der Status der Abfrageseite zu diesem Zeitpunkt nicht durch Drücken der Eingabetaste gespeichert werden kann, wird dies der Fall sein Es ist notwendig, jedes Mal zur Abfrageseite zurückzukehren. Die Erfahrung, die Abfragebedingungen erneut einzugeben, ist definitiv unerträglich.

Wir müssen also eine Möglichkeit finden, den Seitenstatus zu speichern, sodass die Abfragebedingungen und Ergebnisse immer noch vorhanden sind, wenn der Benutzer die Zurück-Taste drückt.

Lösungsideen

Es gibt viele Ideen zum Speichern des Seitenstatus, aber wir glauben, dass die Verwendung von location.hash die beste Methode sein sollte.

Die Idee ist wie folgt:

1. Nachdem der Benutzer die Abfragebedingungen eingegeben und auf OK geklickt hat, serialisieren wir die Abfragebedingungen in eine Zeichenfolge, fügen die Abfragebedingungen über „#“ am Ende der URL hinzu, um eine neue URL zu erhalten, und rufen dann den Standort auf. Ersetzen Sie (neue URL), um die Adresse in der Adressleiste des Browsers zu ändern.

2. Wenn der Benutzer die Zurück-Schaltfläche drückt, um zur Abfrageseite zurückzukehren, was auch als Laden der Seite bezeichnet werden kann, deserialisieren Sie location.hash in Abfragebedingungen und aktualisieren Sie dann die Abfragebedingungen im Abfrageformular Führen Sie die Abfrage aus.

Die Idee ist sehr einfach. Diese Methode ändert nicht nur die URL der Adressleiste im Browser, sondern, was noch wichtiger ist, ersetzt den Datensatz der aktuellen Seite in window.history. Wenn die Methode location.replace nicht verwendet wird, wird bei jedem Rollback auf die vorherige Abfragebedingung zurückgegriffen. Natürlich kann eine solche Anforderung für einige Projekte nützlich sein.

Endlösung

Wenn dieser Artikel nur die oben genannten Lösungsideen teilt, ist er nicht von großem Wert. Der Wert dieses Artikels sollte in der einfachen, aber leistungsstarken JavaScript-Klasse liegen, die wir geschrieben haben.

Wenn Sie die obige Lösung verstehen, schauen Sie sich diese einfache JavaScript-Klasse an:

(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);
}
};
})(); 

Diese Klasse verfügt nur über zwei Methoden. Die Methode HashQuery.parseFromLocation() deserialisiert die Instanz der HashQuery-Unterklasse von location.hash, und die Methode HashQuery.updateLocation() serialisiert und aktualisiert die Instanz der aktuellen HashQuery-Unterklasse im Fenster . Standort.

Sie können sehen, dass die HashQuery-Klasse keine Attribute hat. Das liegt daran, dass wir nur eine Basisklasse definiert haben und die Attribute der Klasse in den Unterklassen definiert sind. Dies ist auch realistisch, da die Abfragebedingungen nur wissen, welche Attribute sich auf der jeweiligen Seite befinden.

Achten Sie auch hier auf Serialisierung und Deserialisierung. Die Serialisierung verwendet hier nur den JavaScript-Reflektionsmechanismus, um die Werte aller Zeichenfolgenattribute (in der Reihenfolge) der Instanz durch „|“ zu trennen, während die Serialisierung darin besteht, die Zeichenfolge durch „|“ zu trennen und dann die Reflexion zum Aktualisieren zu verwenden es den Eigenschaften zuordnen (in der Reihenfolge).

So verwenden Sie die HashQuery-Klasse

Es ist sehr einfach zu bedienen.

Der erste Schritt besteht darin, eine Unterklasse zu definieren und die erforderlichen Abfragebedingungen zu den Zeichenfolgenattributen hinzuzufügen, wie zum Beispiel unseren Code:

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

Der zweite Schritt besteht darin, die Methoden HashQuery.parseFromLocation() und HashQuery.updateLocation() auf der Abfrageseite aufzurufen. Der folgende Code ist unsere vollständige Abfrageseite:

(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);
};
})(); 

Résumé

Ce sont toutes les connaissances sur l'utilisation de location.hash pour enregistrer l'état de la page dans notre projet. Je ne sais pas comment chacun gère de tels besoins dans ses projets WEB ?

Le contenu ci-dessus est la technique de sauvegarde du statut de la page location.hash introduite par l'éditeur. J'espère qu'il sera utile à tout le monde !