Die Hash -Eigenschaft ist eine lesbare und beschreibbare Zeichenfolge, die der Ankerteil der URL ist (der Teil mit der # Nummer).
Grammatik
Ort.Hash
In unserem Projekt gibt es eine große Anzahl von Seiten mit AJAX -Abfrageformular + Ergebnisliste. Da das Abfrageergebnis von AJAX zurückgegeben wird, klickt der Benutzer auf ein Element in der Liste und eingibt die Detail -Seite auf die Schaltfläche Browser zurück, 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 jedes Mal, wenn Sie zur Seite zurückkehren, wieder in die Abfragekriterien eintreten müssen oder wenn Sie zur Seite der Liste gehen müssen, werden die Benutzer mit dieser Erfahrung wirklich verrückt werden.
In unserem Projekt haben wir eine sehr einfache JavaScript -Basisklasse geschrieben, um den Standort zu verarbeiten. Heute werde ich es mit Ihnen teilen.
(Der Inhalt dieses Artikels kann für Anfänger in JavaScript ein bisschen schwierig sein, da er JS-objektorientiertes Wissen wie Definieren von Klassen, Vererbung, virtuelle Methoden, Reflexion usw. beinhaltet)
Schauen wir uns zuerst unsere Bedürfnisse an
Unser Projekt ist ein WeChat-basiertes H5-Task-Management-System. Der zuvertrage Seitenprototyp ist in der folgenden Abbildung dargestellt:
Die Anforderungen sollten sehr klar sein, dh klicken Sie 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 Aufgabendetails einzugeben. Da Administratoren (Projektmanager) in der Regel mehrere Aufgaben gleichzeitig erledigen, wechseln sie ständig zwischen der Seite mit Aufgabendetails und der Seite der Abfrageliste. Wenn das Drücken der zurückgegebenen Taste zu diesem Zeitpunkt den Status der Abfrageseite nicht speichern kann, müssen Sie jedes Mal, wenn Sie zur Abfrageseite zurückkehren, wieder in die Abfragebedingungen eintreten. Diese Erfahrung ist definitiv unerträglich.
Daher müssen wir einen Weg finden, um den Seitenstatus zu speichern, damit die Abfragebedingungen und Ergebnisse immer noch vorhanden sind, wenn der Benutzer die Fallback -Taste drückt.
Lösung
Es gibt viele Ideen zum Speichern von Seitenstatus, aber wir denken, dass die Verwendung von Ort die beste Art und Weise sein sollte.
Die Idee ist wie folgt:
1. Nachdem der Benutzer die Abfragebedingungen und -klicks in OK eingetragen hat, serialisieren wir die Abfragebedingungen in eine Zeichenfolge und fügen die Abfragebedingungen der URL über "#" hinzu, um eine neue URL zu erhalten, und rufen Sie dann den Standort auf.
2. Wenn der Benutzer die Fallback -Taste drückt, um auf die Abfrageseite zurückzufallen, kann auch gesagt werden, dass beim Laden der Seite der Speicherort der Speicherort der Abfragebedingungen deserialisieren und dann die Abfragebedingungen auf das Abfragebetrag aktualisieren und die Abfrage ausführen.
Die Idee ist sehr einfach. Der entscheidende Punkt ist die Methode zur Wiederherstellung von Standort.replace. Mit dieser Methode wird nicht nur die URL der Adressleiste im Browser geändert, sondern vor allem die Aufzeichnung der aktuellen Seite im Fenster. History. Wenn die Methode zur Replace -Vermittlung nicht verwendet wird, fällt jeder Fallback auf den vorherigen Abfragezustand zurück. Natürlich können solche Anforderungen auch für bestimmte Projekte nützlich sein.
Endgültige Lösung
Wenn dieser Artikel nur die oben genannten Lösungsideen teilt, ist er von geringem Wert. Der Wert dieses Artikels sollte die einfache, aber sehr leistungsstarke JavaScript -Klasse sein, 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 () {}; (var p in diesem) {if (! tha.hasownProperty (p) || typeof this [p]! []; für (var p in diesem) {if (! thas.hasownProperty (p) || typeof this [p]! Properties.join ('|'); Ort.RäLe (url);}};}) ();In dieser Klasse gibt es nur 2 Methoden. Die Methode von HashQuery.ParseFromLocation () wird von Standort von Standort deserialisiert. Die Methode von Hashquery.UpDatelocation () serialisiert und aktualisiert die Instanz der aktuellen Hashquery -Unterklasse in die Fenster.Location.
Sie können sehen, dass die HashQuery -Klasse keine Eigenschaften hat, da wir nur eine Basisklasse definieren und die Eigenschaften der Klasse in der Unterklasse definiert sind. Dies ist auch realistisch, da die Abfragebedingungen nur auf der spezifischen Seite bekannt sein können.
Beachten Sie auch die Serialisierung und Deserialisierung hier. Die Serialisierung hier besteht nur darin, den JavaScript -Reflexionsmechanismus zu verwenden, um die Werte aller String -Attribute (in der Reihenfolge) der Instanz mit "|" zu trennen. Während der Serialisierung die Zeichenfolgen mit "|" trennen und dann die Eigenschaften der Instanz mit Reflexion (in der Reihenfolge) aktualisieren soll.
So verwenden Sie Hashquery -Klasse
Es ist sehr einfach zu bedienen.
Der erste Schritt besteht darin, eine Unterklasse zu definieren und alle Abfragebedingungen hinzuzufügen, die für die String -Attribute verwendet werden müssen, z. B. unseren Code:
(function () {window.taskSearchHashQuery = function () {Hashquery.Constructor.call (this); this.iterationId = ''; this.SignedUSerID = ''; this.status = ''; this.Keyword = '';}; HashQuery ();}) ();Rufen Sie im zweiten Schritt die Methoden von HashQuery.ParseFromLocation () und Hashquery.Updatelocation () auf der Abfrageseite an. 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 (); ObjectUpDateFormByHashQuery (); $ ("#Btnsearch"). Click (function () {UpdateHashqueryForm (); location.hash $ ("#lBlCount"). html ("Laden ..."); "& itererationId =" + HashQuery.IrerationID + "& ordnungsgemäßeDuSerID =" + HashQuery.SignedUserid + "& status =" + Hashquery.status + "& keyword =" + Hashquery.Keyword;}; $ ("#hfpagertotAlcount"). Val () + "Aufgaben"); $ ("#HfpagertOtAlCount"). REMET ();}; pager.init (); $ ("#ddlusers"). Val (); {$ ("#Ddliterations").Zusammenfassen
Dies ist alles, was wir über die Verwendung von Location.Hash.Hash in unserem Projekt wissen, um den Seitenstatus zu speichern. Ich frage mich, wie Sie mit solchen Bedürfnissen in Ihrem Webprojekt umgehen.
Der obige Inhalt ist die Tipps zum Speichern von Seitenstatus des Standorts. Hägen Sie, dass der Editor Ihnen vorgestellt wurde. Ich hoffe, es wird für alle hilfreich sein!