Vor kurzem lerne ich Rückgrat. Wenn Sie lernen, das Rückgrat zu verstehen, müssen Sie zuerst Spa verstehen. Beim Verständnis von Spa müssen Sie zunächst verstehen, wie einseitige Anwendungen die URL ändern können, ohne die Seite zu aktualisieren.
Im Vergleich zu Sprüngen zu verschiedenen Seiten kann Ajax das Browsing -Erlebnis des Benutzers erheblich verbessert haben. Es ist sehr angenehm, den weißen Bildschirm zwischen dem Seitenschalter nicht zu sehen. Viele frühere AJAX -Anwendungen unterstützten jedoch nicht die Vorwärts- und Rückwärtsbewegung des Browsers, wodurch die Benutzer sofort in ihre ursprüngliche Position zurückkehrten, unabhängig davon, wo sie auf der Website stöbern, und die Benutzer konnten den Browserverlauf nicht durch die Vorwärts- und Rückwärtsbewegung des Browsers wechseln.
Für das erste Problem ist es ziemlich einfach zu lösen. Verwenden Sie einfach Cookies oder LocalStorage, um den Anwendungsstatus aufzuzeichnen. Lesen Sie diesen Status beim Aktualisieren der Seite und senden Sie dann die entsprechende AJAX -Anfrage, um die Seite zu ändern. Das zweite Problem ist jedoch sehr problematisch. Lassen Sie uns zuerst über die Lösung moderner Browser sprechen.
HTML5 -Lösung
Um zu verstehen, wie HTML5 voranschreiten und rückwärts gehen kann, müssen Sie zunächst Geschichtenobjekte und Standortobjekte verstehen.
Geschichtsobjekt
Geschichtsobjekteigenschaften
1.Length: Gibt die Anzahl der URLs in der Browser -Verlaufsliste zurück. Für jede Seite, die der Benutzer auf dem aktuellen Tag besucht, wird diese Nummer durch 1. Aus Datenschutzgründen ist der spezifische URL -Inhalt nicht sichtbar.
2.State: Objekte, die sich auf die aktuelle URL beziehen, können nur durch Pushstate und Ersatz hinzugefügt oder geändert werden. Wir können es verwenden, um Informationen im Zusammenhang mit URLs zu speichern.
Verlaufsobjektmethode
1.History.back ()
Diese Methode hat keine Parameter. Nach dem Auslösen kehrt es zur vorherigen Seite zurück, was dem Klicken auf die Back -Taste des Browsers entspricht.
2.History.forward ()
Diese Methode hat keine Parameter. Nach dem Auslösen kehrt es zu der Seite zurück, die Sie vor Ihrem Durchsuchen durchsuchen. Dies entspricht dem Klicken auf die Taste des Browsers.
3.History.go (Nummer)
Diese Methode akzeptiert einen Parameter der Formungsvariablen, historisch.
4.History.pushstate (Staat, Titel, URL)
Der Schlüssel zum Ändern der URL und zum nicht erfrischenden Seite ist es. Diese Methode ändert den Standort.HREF der aktuellen Seite und ändert das aktuelle History -State -Objekt. Nach der Ausführung wird die Länge von Geschichte um 1. erhöht. Diese Methode akzeptiert drei Parameter.
1.State: Das Objekt, das sich auf die aktuelle URL bezieht.
2.Title: Seitentitel, aber alle Browser ignorieren ihn. Um den Titel zu ändern, müssen Sie immer noch document.titel verwenden.
3.URL: Eine URL mit der gleichen Domäne wie die aktuelle Seite, location.href wird zu diesem Wert.
5.History.replacestate (Staat, Titel, URL)
Diese Methode ist die gleiche wie oben, ändert jedoch die Geschichte nicht, sondern wird nur die Geschichte und location.href ändern.
Beachten Sie, dass der dritte Parameter-Pushstate und das Ersatz für die Domäne können und nicht das Popstate-Ereignis und das ONHASHChange-Ereignis des Browsers ausgelöst werden (getestet unter Chrome33).
Standortobjekt
Zusätzlich zum Klicken auf die Schaltfläche Vorwärts/Rückseite und Verlauf können Sie die URL auch über die Standortmethode ändern und die Standorteigenschaften ändern:
Eigenschaften des Standortobjekts (lesen und schreiben):
1.host:Domain Name + Portnummer
2.HOSTNAME: Domain -Name
3.port: Portnummer
4.Protokoll: Protokoll
5.REF: Voller Weg
6.ORIGIN: Protokoll + Domänenname + Port
7.HASH: URL (Hash) Beginnend mit dem Pfundzeichen (#)
8.PathName: Dokumentpfad + Dokumentname
9.Search :(?) Der folgende Inhalt
Sie können den Zweck der Aktualisierungsfreie erreichen, indem Sie den Standort oder Ort ändern.
Methoden des Standortobjekts:
1.Sign: Ändern Sie den Wert der URL und fügen Sie die aktuelle URL in die Geschichte hinzu. Die Länge erhöht sich um 1. Standort.
2.Relad: Aktualisieren Sie die Seite.
3.Replace: Ändern Sie den Wert von URL, aber die Geschichte bleibt unverändert. Die gleiche Verwendung der Verwendung zuordnen.
Popstate -Event
Wenn sich die URL ändert, z. B. wenn der Benutzer auf die Taste vorwärts/zurück klickt, histor. Sie können es verwenden, um die URL zu überwachen, um verschiedene Funktionen zu implementieren.
Die Codekopie lautet wie folgt:
window.onpopstate = function () {
// do sth
}
ONHASHChange -Event
Wenn Sie den Hash -Wert ändern, wird das Popstate -Ereignis ausgelöst und das Popstate -Ereignis nicht unbedingt das ONHASHChange -Ereignis ausgelöst. Nach dem Testen:
1..
2. Wenn Hash und Standort zusammen ändern, wird es nicht ausgelöst, wie z.
Wie man alte Browser schreibt
Alte Browser unterstützen nicht Pushstate und ersetzt, sodass die Art und Weise, wie die URL über Popstate überwacht wird (tatsächlich unterstützt es diese Methode nicht). Dann können Sie nur den Inhalt hinter URL# ändern, um keine Aktualisierung zu erzielen, aber sie unterstützen OnhashChange nicht, sodass Sie Änderungen in der URL gleichgültig sind (außer dass die Seite zur entsprechenden ID -Position der Seite scrollt). Dann können Sie nur den ultimativen Schritt verwenden: Umfrage und SetInterval, um den Wert der URL anzuhören. So was:
Die Codekopie lautet wie folgt:
var prevhash = window.location.hash;
var callback = function () {...}
window.setInterval (function () {
if (window.location.hash! = prevHash) {
prevHash = window.location.hash;
Rückruf (Prevhash);
}
}, 100);
Natürlich ist dieses Schreiben sehr frustrierend. Wenn Sie nicht in Betracht ziehen, mit der ID auf der Seite auf das A -Tag zu klicken, um den Hash zu ändern, können Sie das Entwurfsmuster verwenden, um die Überwachungs -URL elegant zu implementieren. Zum Beispiel verwendet das klassische Beobachtermuster eine Klasse, um die Funktion des Wechsels des Hashs zu implementieren, und dann alle Klassen (Beobachter), die sich die Änderungen in der URL anhören möchten, um diese (Beobachter) Klasse zu abonnieren.
Die Codekopie lautet wie folgt:
// Ändern Sie die URL -Klasse
Funktion urlChanger () {
var _this = this;
this.observers = [];
// einen Beobachter hinzufügen
this.addobserver = function (obj) {...}
// den Beobachter löschen
this.deleteObserver = function (obj) {...}
// Beobachter benachrichtigen
this._notifyObservers = function () {
var length = _this.observers.length;
console.log (Länge)
für (var i = 0; i <länge; i ++) {
_this.observers [i] .Update ();
}
}
// die URL ändern
this.changeurl = function (Hash) {
window.location.hash = Hash;
_this._notifyObServers ();
}
}
// Hörklasse
Funktion OneOfObServers () {
var _this = this;
this.update = function () {...}
}
//erreichen
var o1 = neuer urlChanger ();
var o2 = new OneOfObServers ();
O1.Addobserver (O2);
O1.Changeurl ('Fun/arg1/arg2/');
// O2 hat es getan ...