利用pushState, popState和location.hash等方法自己實現一個小型路由

ysl_unh 發布于2019-08-20 11:38 / 1837人閱讀

摘要：最后通過這些自己實現小型的路由。對象還提供方法這個方法用以監聽瀏覽器在不同歷史記錄中進行切換，而觸發相應的事件。這時調用方法后頁面回退，同時頁面發生刷新這時無法監聽這個事件。所以可以進行降級使用來進行路由設計。不過，還提供了一個。

這篇文章主要是記錄下HTML5中history提供的pushState, replaceStateAPI。最后通過這些API自己實現小型的路由。

關于window.history提供的API請參見Mozilla文檔

其中history提供的pushState和replaceState2個API提供了操作瀏覽器歷史棧的方法。

其中pushState:

    
    history.pushState(data, null, "#/page=1");
    
    pushState接收3個參數，第一個參數為一個obj,表示瀏覽器
    
    第二個參數是document.title的值，一般設定為`null`
    
    第三個參數string，用以改變 當前url

pushState方法在改變url的同時向瀏覽器歷史棧中壓入新的歷史記錄。

接收url的參數為string類型,用以改變當前地址欄的url.需要注意的一點就是這個參數不能和跨域，即協議，域名，端口必須都是相同的，如果出現跨域的情況，即會提示：

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

Example:

    
    打開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

其中replaceState:

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

replaceState接收的參數pushState相同，但是最終的效果是：地址欄url會根據接收的參數而變化，但是瀏覽器并未在當瀏覽歷史棧中增加瀏覽器的歷史記錄，而是替換當前的瀏覽器歷史記錄。

通過pushState和replaceState雖然能改變URL，但是不會主動觸發瀏覽器reload。

window對象還提供popstate方法:

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

這個方法用以監聽瀏覽器在不同歷史記錄中進行切換，而觸發相應的事件。

在瀏覽器提供的history對象上還有go, back方法，用以模擬用戶點擊瀏覽器的前進后退按鈕。在某個web應用當中，比如點擊了標簽，發生了頁面的跳轉。這時調用history.back();方法后頁面回退，同時頁面發生刷新,這時window.onpopstate無法監聽這個事件。但是如果是通過pushState或者replaceState來改變URL且不發生瀏覽器刷新的話，再使用history.back()或history.go(),這樣popstate事件會被觸發。

    
    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: 通過pushState在url上添加?page=1可以通過location.search去獲取search的內容。不過如果通過location.search去改變url的話是會主動觸發瀏覽器reload的。這個特性可以和下面將的關于hash的內容對比下。

API大致了解了，那么這些方法可以運用到哪些地方呢？一個比較常用的場景是就在單頁應用中，通過這些API完成前端的路由設計，利用pushState, replaceState可以改變url同時瀏覽器不刷新，并且通過popstate監聽瀏覽器歷史記錄的方式，完成一系列的異步動作。

    
    
    
    //路由
    const Router = [];
    
    const addRoute = (path = "", handle = () => {}) => {
        let obj = {
            path,
            handle
        }
        
        Router.push(obj);
    }
    
    
    //添加路由定義
    addRoute("/post", function() {
        //do something
    });
    
    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();
            }
        }
    })

大致的實現思路就是，通過添加路由信息，然后攔截標簽的默認行為，并與注冊的路由信息進行匹配。若匹配成功調用對應的handle方法.

不過pushState和replaceState方法在低版本的IE瀏覽器下兼容性不是很好。所以可以進行降級使用hash來進行路由設計。

hash？請戳我。

可以通過location.hash獲取url上第一個#(fragment)及后面的內容。同時還能通過location.hash改寫其內容，且不會主動觸發瀏覽器reload。有些功能是不是和pushState和replaceState一樣？所以為了兼容到低版本的瀏覽器,可以通過監聽#變化來進行路由設計。

那么如何去監聽呢？比較粗暴的一種方式就是polling。

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

不過，H5還提供了一個API: hashchange。它的就可以直接代替上面的polling方法，來監聽#的變化。

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

這個小型的路由設計可以參見我的github.

稍微總結下：

上面主要介紹了history提供的一些API，hash的相關知識。在平時可以運用到SPA當中，Gmail就是通過hash來進行路由設計的。它相對于頁面跳轉來說：

頁面只需要加載一次。后面的頁面切換可以通過ajax去請求數據。頁面體驗更加流暢；

可以利用本地緩存，優化頁面體驗。在不同頁面切換的過程中更加流暢；

可進行按需加載...

等等一些實用的好處吧。

項目地址

項目地址請戳我

云服務器 GPU云服務器數據分析等方法成立一個小型idc公司建一個小型網站多少錢利用自己電腦搭建vps

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80680.html

從了解Hash和Html5 History 到簡單實現路由

摘要：原因在于將狀態對象保存在用戶的磁盤上，以便在用戶重啟瀏覽器時使用，我們規定了狀態對象在序列化表示后有的大小限制。新不必須為絕對路徑。新必須與當前同源，否則會拋出一個異常。注意絕對不會觸發事件，即使新的與舊的僅哈希不同也是如此。 Hash hash 屬性是一個可讀可寫的字符串，該字符串是 URL 的錨部分（從 # 號開始的部分）,在頁面中的hash有多種功能意義: 錨點 url: htt...

Prasanta 2019-08-26 10:36 評論0 收藏0
從history api看主流框架的路由機制

摘要：前端路由庫的作用是改變地址欄，支持瀏覽器前進后退，并同步路由對應的視圖，這里以及其依賴的庫說一下路由機制原文地址前提首先簡單介紹一下前端路由機制所依賴的事件及對應的事件對于支持新增方法的瀏覽器，可以通過設置來在瀏覽器棧中新增一條記錄設置時前端路由庫的作用是改變地址欄，支持瀏覽器前進、后退，并同步路由對應的視圖，這里以react-router及其依賴的history庫說一下路由機制原...

Lyux 2019-08-26 11:36 評論0 收藏0
SPA中前端路由基本原理與實現方式

摘要：部分比較重要部分比較重要重點是下面的，這里操作我們借助實現的邏輯不難，但是利用總是沒有所謂前端路由的那種味，必然也不是主流方法。而現在的前端路由也是基于這個原理實現的。和異曲同工，而且前者可以在該事件之外任何地方隨時使用。 SPA 前端路由原理與實現方式通常 SPA 中前端路由有2中實現方式，本文會簡單快速總結這兩種方法及其實現：修改 url 中 Hash 利用 H5 中的 hi...

alogy 2019-08-02 16:05 評論0 收藏0
SPA中前端路由基本原理與實現方式

摘要：部分比較重要部分比較重要重點是下面的，這里操作我們借助實現的邏輯不難，但是利用總是沒有所謂前端路由的那種味，必然也不是主流方法。而現在的前端路由也是基于這個原理實現的。和異曲同工，而且前者可以在該事件之外任何地方隨時使用。 SPA 前端路由原理與實現方式通常 SPA 中前端路由有2中實現方式，本文會簡單快速總結這兩種方法及其實現：修改 url 中 Hash 利用 H5 中的 hi...

Shimmer 2019-08-23 11:52 評論0 收藏0
前端路由跳轉基本原理

摘要：目前前端三杰都推介單頁面應用開發模式，在路由切換時替換中最小修改的部分，來減少原先因為多頁應用的頁面跳轉帶來的巨量性能損耗。 showImg(https://segmentfault.com/img/bVbn1ZN?w=3069&h=2048); 目前前端三杰 Angular、React、Vue 都推介單頁面應用 SPA 開發模式，在路由切換時替換 DOM Tree 中最小修改的部分 ...

SillyMonkey 2019-08-23 15:05 評論0 收藏0