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

ysl_unh 發(fā)布于2019-08-20 11:38 / 1844人閱讀

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

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

關(guān)于window.history提供的API請參見Mozilla文檔

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

其中pushState:

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

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

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

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接收的參數(shù)pushState相同，但是最終的效果是：地址欄url會根據(jù)接收的參數(shù)而變化，但是瀏覽器并未在當(dāng)瀏覽歷史棧中增加瀏覽器的歷史記錄，而是替換當(dāng)前的瀏覽器歷史記錄。

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

window對象還提供popstate方法:

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

這個方法用以監(jiān)聽瀏覽器在不同歷史記錄中進行切換，而觸發(fā)相應(yīng)的事件。

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

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

    history.back(); //瀏覽器后退

    window.addEventListener("popstate", function(e) {
        //在popstate事件觸發(fā)后,事件對象event保存了當(dāng)前瀏覽器歷史記錄的狀態(tài).
        //e.state保存了pushState添加的state的引用
        console.log(e.state);  //輸出 {page: 1}
    });

PS: 通過pushState在url上添加?page=1可以通過location.search去獲取search的內(nèi)容。不過如果通過location.search去改變url的話是會主動觸發(fā)瀏覽器reload的。這個特性可以和下面將的關(guān)于hash的內(nèi)容對比下。

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

    
    
    
    //路由
    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;
    }
    
    
    //攔截默認(rèn)的a標(biāo)簽行為
    document.addEventListener("click", function(e) {
        let dataset = e.target.dataset;
        if(dataset) {
            if(routeHandle(dataset.href)) {
                //阻止默認(rèn)行為
                e.preventDefault();
            }
        }
    })

大致的實現(xiàn)思路就是，通過添加路由信息，然后攔截標(biāo)簽的默認(rèn)行為，并與注冊的路由信息進行匹配。若匹配成功調(diào)用對應(yīng)的handle方法.

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

hash？請戳我。

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

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

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

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

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

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

稍微總結(jié)下：

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

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

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

可進行按需加載...

等等一些實用的好處吧。

項目地址

項目地址請戳我

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/80680.html

發(fā)表評論

登陸后可評論

0條評論

ysl_unh

男|高級講師

我要關(guān)注我要私信

TA的文章

[CSS]《CSS揭秘》第三章——形狀

閱讀 1879·2019-08-30 15:53
對vertical-align的理解

閱讀 3204·2019-08-30 15:44
半小時擼一個抽獎程序

閱讀 2813·2019-08-26 13:31
vue表格組件

閱讀 1957·2019-08-26 12:10
訂閱發(fā)布模式和觀察者模式的區(qū)別

閱讀 802·2019-08-26 11:01
windows下mongoDB的環(huán)境配置

閱讀 2133·2019-08-23 15:32
Understand .sync in Vue

閱讀 1590·2019-08-23 13:43
頂級測試框架Jest指南：跑通一個完美的程序，就是教出一群像樣的學(xué)生

閱讀 2545·2019-08-23 11:58

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

**從了解Hash和Html5 History 到簡單實現(xiàn)路由**

從history api看主流框架的路由機制

**SPA中前端路由基本原理與實現(xiàn)方式**

**SPA中前端路由基本原理與實現(xiàn)方式**

前端路由跳轉(zhuǎn)基本原理

發(fā)表評論

0條評論

ysl_unh

男|高級講師

TA的文章

[CSS]《CSS揭秘》第三章——形狀

對vertical-align的理解

半小時擼一個抽獎程序

vue表格組件

訂閱發(fā)布模式和觀察者模式的區(qū)別

windows下mongoDB的環(huán)境配置

Understand .sync in Vue

頂級測試框架Jest指南：跑通一個完美的程序，就是教出一群像樣的學(xué)生

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！