Detaillierte Erklärung von JavaScript zur Überwachung von Routenänderungen

Es gibt zwei Hauptmethoden, um Routing-Änderungen am Frontend zu implementieren. Das größte Merkmal dieser beiden Methoden besteht darin, die URL-Umschaltung ohne Aktualisierungsfunktion zu implementieren

1. Ändern Sie den Hash und verwenden Sie window.onhashchange zum Zuhören.
2. Durch die Änderung des Verlaufs wird eine JS-Operation ausgeführt, um die Seite zu laden. Der Verlauf ist jedoch nicht so einfach wie Hash, da die Änderung des Verlaufs, abgesehen von einigen Vorwärts- und Rückwärtsoperationen des Browsers (mithilfe der Methoden history.back(), history.forward() und history.go(), um den Rückwärts- und Vorwärtssprung im Benutzerverlaufsdatensatz abzuschließen), das Popstate-Ereignis aktiv auslöst. PushState und replaceState lösen das Popstate-Ereignis nicht aus.

Geschichte

Vor allem, um die Geschichte zu verstehen

pushState() Methode

Es werden drei Parameter benötigt: ein Statusobjekt, ein Titel (derzeit ignoriert) und (optional) eine URL. Lassen Sie uns jeden dieser Parameter im Detail erklären:

Statusobjekt – Das Statusobjekt „state“ ist ein JavaScript-Objekt, das über pushState() neue Verlaufseinträge erstellt. Immer wenn der Benutzer zu einem neuen Status navigiert, wird ein Popstate-Ereignis ausgelöst und die Statuseigenschaft des Ereignisses enthält eine Kopie des Statusobjekts des Verlaufseintrags. Ein Statusobjekt kann alles sein, was serialisiert werden kann. Der Grund dafür ist, dass Firefox Statusobjekte auf der Festplatte des Benutzers speichert, um sie beim Neustart des Browsers durch den Benutzer zu verwenden. Außerdem haben wir für die serialisierte Darstellung des Statusobjekts eine Größenbeschränkung von 640 KB festgelegt. Wenn Sie nach der Serialisierung ein Statusobjekt, das größer als 640 KB ist, an die Methode pushState() übergeben, löst die Methode eine Ausnahme aus. Wenn Sie mehr Speicherplatz benötigen, wird die Verwendung von sessionStorage und localStorage empfohlen.

Titel – Firefox ignoriert diesen Parameter derzeit, wird ihn aber möglicherweise in Zukunft verwenden. Die Übergabe einer leeren Zeichenfolge sollte hier vor zukünftigen Änderungen dieser Methode schützen. Optional können Sie einen Kurztitel für den Status übergeben, zu dem weitergeleitet werden soll.

URL – Dieser Parameter definiert den neuen Verlaufs-URL-Datensatz. Beachten Sie, dass der Browser die URL nicht unmittelbar nach dem Aufruf von pushState() lädt, sondern die URL in einigen Fällen später lädt (die Ressource wird nicht geladen, aber wir können die Ansicht ändern, indem wir auf ihre Änderungen achten, was eine Möglichkeit darstellt, Einzelseiten-Routing zu implementieren, ohne die Seite zu aktualisieren), beispielsweise wenn der Benutzer den Browser erneut öffnet. Die neue URL muss kein absoluter Pfad sein. Wenn die neue URL ein relativer Pfad ist, wird sie als relativ zur aktuellen URL behandelt. Die neue URL muss denselben Ursprung haben wie die aktuelle URL (Same-Origin-Policy), andernfalls löst pushState() eine Ausnahme aus. Dieser Parameter ist optional und entspricht standardmäßig der aktuellen URL.

In gewisser Weise ähnelt der Aufruf von pushState() dem Festlegen von window.location = "#foo", da sowohl neue Verlaufsdatensätze auf der aktuellen Seite erstellt als auch aktiviert werden. Aber pushState() hat folgende Vorteile:

Die neue URL kann jede beliebige URL mit demselben Ursprung wie die aktuelle URL sein. Umgekehrt kann die Einstellung window.location beim Ändern des Hashs nur dasselbe Dokument sein.
Wenn Sie die URL nicht ändern möchten, ändern Sie sie nicht. Umgekehrt wird durch die Einstellung window.location = "#foo"; nur dann ein neues Verlaufselement erstellt, wenn der aktuelle Hash nicht #foo ist.
Sie können neuen Verlaufselementen beliebige Daten zuordnen. Der hashbasierte Ansatz kodiert alle relevanten Daten in einer kurzen Zeichenfolge.
Werden die Header anschließend vom Browser weiterverwendet, so können diese Daten verwendet werden (der Hash hingegen nicht).

Beachten Sie, dass pushState() niemals ein Hashchange-Ereignis auslöst, selbst wenn sich die neue URL nur im Hash von der alten URL unterscheidet.

pushState()-Verwendungsszenarien

Der Verlauf kann URLs oder URL-Parameter ändern, ohne sie zu aktualisieren

window.history.replaceState('', '', `${window.location.origin}${window.location.pathname}Typ=a`);

replaceState()-Methode

Die Verwendung von history.replaceState() ist sehr ähnlich zu history.pushState(). Der Unterschied besteht darin, dass replaceState() das aktuelle Verlaufselement ändert, anstatt ein neues zu erstellen. Beachten Sie, dass dies die Erstellung eines neuen Verlaufselements im globalen Browserverlauf nicht verhindert.
machen

Popstate-Veranstaltung

Verwenden Sie window.onpopstate, um auf Rückgabeereignisse zu warten

Fenster.onpopstate = funcRef;

funcRef: (Ereignis: {Status: beliebig}) => void

Immer wenn sich der aktive Verlaufsdatensatz ändert, wird ein Popstate-Ereignis für das entsprechende Fensterobjekt ausgelöst (window.onpopstate). Wenn der aktuell aktive Verlaufseintrag mit der Methode history.pushState() erstellt oder mit der Methode history.replaceState() geändert wurde, enthält die Statuseigenschaft des Popstate-Ereignisobjekts eine Kopie des Statusobjekts des Verlaufseintrags.

**Beachten:

1. Der Aufruf von history.pushState() oder history.replaceState() löst das Popstate-Ereignis nicht aus. Das Popstate-Ereignis wird nur durch bestimmte Browseraktionen ausgelöst, z. B. durch Klicken auf die Zurück- oder Vorwärts-Schaltfläche (oder durch Aufrufen der Methoden history.back(), history.forward(), history.go() in JavaScript). Darüber hinaus löst auch der Anker des a-Tags das Ereignis aus.
2. Beim Laden einer Webseite verhält sich jeder Browser anders, je nachdem, ob das Popstate-Ereignis ausgelöst wird. Chrome und Safari lösen das Popstate-Ereignis aus, Firefox hingegen nicht.

Wie überwache ich PushState und ReplaceState?

Wir können es selbst über den Abonnement-Veröffentlichungsmodus implementieren: Verwenden Sie zuerst Dep und Watch, den Abonnement- und Veröffentlichungsmodus, der eigentlich eine vereinfachte Version der Implementierungsmethode zwischen dem Vue-Quellcode dep und wantcher ist

Klasse Dep { // Abonnementpool-Konstruktor(Name){
        this.id = new Date() //Hier verwenden wir einfach den Zeitstempel als ID des Abonnementpools
        this.subs = [] //Die Sammlung abonnierter Objekte unter diesem Ereignis}
    definiert(){ // Abonnenten hinzufügen Dep.watch.add(this);
    }
    notify() { //Abonnenten über Änderungen benachrichtigen this.subs.forEach((e, i) => {
            wenn(Typ von e.update === 'Funktion'){
                versuchen {
                   e.update.apply(e) //Aktualisierungsfunktion für Abonnenten auslösen} catch(err){
                    console.warr(fehler)
                }
            }
        })
    }
    
}
Dep.watch = null;

Klasse Watch {
    Konstruktor(Name, Funktion){
        this.name = name; //Der Name der Abonnementnachricht this.id = new Date(); //Hier verwenden wir einfach den Zeitstempel als ID des Abonnenten
        this.callBack = fn; //Wenn die Abonnementnachricht gesendet und geändert wird->die vom Abonnenten ausgeführte Rückruffunktion}
    add(dep) { //Setze den Abonnenten in den Dep-Abonnementpool ein dep.subs.push(this);
    }
    update() { //Aktualisiere die Teilnehmermethode var cb = this.callBack; //Zuweisung um das in der Funktion aufgerufene this nicht zu verändern
        cb(dieser.Name);          
    }
}

Implementieren Sie die History-Methode erneut und fügen Sie die Methode addHistoryListener hinzu

const addHistoryMethod = (Funktion(){
 var historyDep = new Dep() // Einen Abonnementpool erstellen return function (name) {
  wenn(name==='historyChange'){
   var Ereignis = neue Uhr (Name, Funktion);
   Dep.watch = Ereignis;
   historyDep.defind(); //Abonnenten hinzufügen Dep.watch = null;
  }sonst wenn(name==='pushState'||name==='replaceState'){
   var Methode = Verlauf[Name];
   Rückgabefunktion(){
    Methode.anwenden(Verlauf,Argumente)
    historyDep.notify();
   }
  }
 }
})()
window.addHistoryListener = addHistoryMethod('historyChange')
history.pushState = addHistoryMethod('pushState');
history.replaceState = addHistoryMethod('replaceState');

Die Kapselung ist erfolgreich. Testanwendungsbeispiel

window.addHistoryListener('Verlauf',Funktion(){
 console.log('Fensterverlauf geändert')
})
window.addHistoryListener('Verlauf',Funktion(){
 console.log('Fensterverlauf geändert, ich habe es auch gehört') // Mehrere Abhörereignisse können gebunden werden console.log(history.state)
})
history.pushState({foo:bar}, 'Titel', '/Auto')

Aktuellen Status abrufen

Beim Laden der Seite ist möglicherweise ein Statusobjekt ungleich Null vorhanden. Dies kann beispielsweise passieren, wenn die Seite das Statusobjekt festlegt (über die Methoden pushState() oder replaceState()) und der Benutzer dann den Browser neu startet. Wenn die Seite dann neu geladen wird, empfängt die Seite ein Onload-Ereignis, aber kein Popstate-Ereignis. Wenn Sie jedoch die Eigenschaft history.state lesen, erhalten Sie dasselbe Statusobjekt, das Sie erhalten würden, wenn popstate ausgelöst würde.

Sie können das Statusobjekt des aktuellen Verlaufselements lesen, ohne auf das Popstate-Ereignis zu warten. Verwenden Sie dazu einfach die Eigenschaft history.state wie folgt:

sei aktuellerZustand = Verlauf.Zustand;

Kontrast

Zusammenfassen

Der Verlauf ist eine Möglichkeit, ein Routing ohne Aktualisierung zu implementieren, das sich besonders für unsere Einzelseitenentwicklung eignet, um ein stabiles Systemerlebnis zu gewährleisten. Der Verlauf überwacht jedoch nicht das Verhalten von PushState und ReplaceState, sondern nur das Verhalten von Go, Back und Forward. Wir können jedoch den Abonnement-Veröffentlichungsmodus verwenden, Dep und Watch nutzen, die Ereignisse pushState und replaceState neu verpacken und die Benachrichtigungsmethode nach dem Aufruf automatisch auslösen sowie eine addHistoryListener-Methode hinzufügen, um einen Abhör-Callback (Abonnent) hinzuzufügen.

Damit ist dieser Artikel zur Verwendung von JavaScript zur Überwachung von Routenänderungen abgeschlossen. Weitere Informationen zur Verwendung von JavaScript zur Überwachung von Routenänderungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!