Verwenden Sie Methoden wie pushState, popState und location.hash, um selbst eine kleine Route zu implementieren

In diesem Artikel werden hauptsächlich die vom Verlauf in HTML5 bereitgestellten PushState- und ReplacementStateAPIs aufgezeichnet. Implementieren Sie schließlich selbst ein kleines Routing über diese APIs.

Informationen zur von window.history bereitgestellten API finden Sie in der Mozilla-Dokumentation.

Die von History bereitgestellten APIs pushState und replaceState stellen Methoden zum Betreiben des Browser-Verlaufsstapels bereit.

Die pushState:

history.pushState(data, null, '#/page=1');
    
    pushState接收3个参数，第一个参数为一个obj,表示浏览器
    
    第二个参数是document.title的值，一般设定为`null`
    
    第三个参数string，用以改变 当前url

pushState-Methode verschiebt neue Verlaufsdatensätze in den Browser-Verlaufsstapel, während die URL geändert wird.

Der Parameter, der die URL empfängt, ist vom Typ String und wird zum Ändern der URL der aktuellen Adressleiste verwendet. Zu beachten ist, dass dieser Parameter nicht mit domänenübergreifend identisch sein kann, d. h. Das Protokoll, der Domänenname und der Port müssen identisch sein. Wenn es sich um eine domänenübergreifende Verbindung handelt, wird Folgendes angezeigt:

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://www.baidu.com/' cannot be created in a document with origin 'http://commanderXL.com' and URL

Beispiel:

打开www.baidu.com

    history.pushState(null, null, '?page=1')    //地址栏变成 www.baidu.com/?page=1
    
    history.pushState(null, null, '#page=2');    //地址栏变成 www.baidu.com/#page=2

wobei replaceState:

history.replaceState(null, null, '#page=2');

replaceState empfängt den gleichen Parameter pushState, aber den endgültigen Der Effekt ist: Die URL der Adressleiste ändert sich entsprechend den empfangenen Parametern, der Browser fügt jedoch den Browserverlauf nicht zum hinzu aktuellen Browserverlaufsstapel, ersetzt jedoch den aktuellen Browserverlauf.

Obwohl die URL über pushState und replaceState geändert werden kann, wird dadurch kein aktives Neuladen des Browsers ausgelöst.

Das Fensterobjekt stellt auch die Popstate-Methode bereit:

window.addEventListener('popstate', function() {
        
    });

Diese Methode wird verwendet, um darauf zu warten, dass der Browser zwischen verschiedenen historischen Datensätzen wechselt und entsprechende Ereignisse auslöst.

Es gibt auch Go- und Back-Methoden für das vom Browser bereitgestellte Verlaufsobjekt, um zu simulieren, dass der Benutzer auf die Vor- und Zurück-Schaltflächen des Browsers klickt. Wenn in einer bestimmten Webanwendung beispielsweise auf das Tag geklickt wird, erfolgt ein Seitensprung. Zu diesem Zeitpunkt kehrt die Seite nach dem Aufruf der Methode „history.back()“ zurück und die Seite wird gleichzeitig aktualisiert. Zu diesem Zeitpunkt kann window.onpopstate dieses Ereignis nicht überwachen. Wenn die URL jedoch über pushState oder replaceState ohne Browseraktualisierung geändert wird, verwenden Sie History.back() oder History.go(), damit das Popstate-Ereignis ausgelöst wird.

history.pushState({page: 1}, null, '?page=1');
    history.pushState({page: 2}, null, '?page=2');

    history.back(); //浏览器后退

    window.addEventListener('popstate', function(e) {        //在popstate事件触发后,事件对象event保存了当前浏览器历史记录的状态.
        //e.state保存了pushState添加的state的引用
        console.log(e.state);  //输出 {page: 1}
    });

PS: Fügen Sie ?page=1 über pushState zur URL hinzu, um den Suchinhalt über location.search abzurufen. Wenn Sie jedoch die URL über location.search ändern, wird dadurch aktiv ein Neuladen des Browsers ausgelöst. Diese Funktion kann mit dem folgenden Inhalt zum Hashing verglichen werden.

Da wir nun ein allgemeines Verständnis der API haben, wo können diese Methoden angewendet werden? Ein häufiges Szenario besteht darin, dass in einer Single-Page-Anwendung das Front-End-Routing-Design über diese APIs abgeschlossen wird. PushState und replaceState können zum Ändern der URL verwendet werden, ohne den Browser zu aktualisieren, und eine Reihe von Prozessen können durch Überwachung des Browsers abgeschlossen werden Geschichte durch Popstate.

addRoute('/login', function() {
        //do something
    })
    
    
    //路由处理
    const routeHandle = (path) => {
        Router.forEach((item, index) => {
            if(item.path === path) {
                item.handle.apply(null, [path]);
                return true;
            }
        })
        return false;
    }
    
    
    //拦截默认的a标签行为
    document.addEventListener('click', function(e) {
        let dataset = e.target.dataset;
        if(dataset) {
            if(routeHandle(dataset.href)) {
                //阻止默认行为
                e.preventDefault();
            }
        }
    })

Die allgemeine Idee besteht darin, Routing-Informationen über hinzuzufügen, dann das Standardverhalten des abzufangen und es mit den registrierten Routing-Informationen abzugleichen. Wenn der Abgleich erfolgreich ist, wird die entsprechende Handle-Methode aufgerufen.

Allerdings sind die Methoden pushState und replaceState nicht sehr kompatibel mit niedrigeren Versionen von IE-Browsern. Daher können Sie ein Downgrade durchführen und Hash für das Routing-Design verwenden.

Hash? Bitte stups mich an.

Sie können das erste # (Fragment) und den folgenden Inhalt auf der URL über location.hash abrufen. Gleichzeitig kann der Inhalt über location.hash neu geschrieben werden, ohne dass der Browser aktiv neu geladen werden muss. Sind einige Funktionen mit pushState und replaceState identisch? Um mit Browsern niedrigerer Versionen kompatibel zu sein, kann das Routing-Design daher durch Überwachung von # Änderungen durchgeführt werden.

Wie überwacht man also? Eine der groberen Methoden ist die Umfrage.

var oldHash = location.hash;
    setTimeInterval(function() {        if(oldHash !== location.hash) {            
            //do something
        
            oldHash = location.hash;
        }
    }, 100);

H5 bietet jedoch auch eine API: Hashchange. Es kann die obige Abfragemethode direkt ersetzen, um Änderungen in # zu überwachen.

window.addEventListener('hashchange', function() {
        routeHandle(locaiton.hash);
    });

Dieses kleine Routing-Design finden Sie auf meinem Github.

Um es kurz zusammenzufassen:

Das Obige stellt hauptsächlich einige APIs vor, die durch die Geschichte und das damit verbundene Wissen bereitgestellt werden Hash. Normalerweise kann es in SPA verwendet werden, indem es Hash für das Routing-Design verwendet. Im Vergleich zu Seitensprüngen:

Die Seite muss nur einmal geladen werden. Ein späterer Seitenwechsel kann Daten über Ajax anfordern. Das Seitenerlebnis ist flüssiger;

kann den lokalen Cache verwenden, um das Seitenerlebnis zu optimieren. Der Wechsel zwischen verschiedenen Seiten ist reibungsloser;

kann bei Bedarf geladen werden...

und bietet weitere praktische Vorteile.