這篇文章主要是記錄下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應用當中，比如點選了<a>標籤，發生了頁面的跳轉。這時呼叫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監聽瀏覽器歷史記錄的方式，完成一系列的非同步動作。

    <a data-href="/post"></a>
    <a data-href="/login"></a>
    
    //路由
    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();
            }
        }
    })

大致的實現思路就是，通過<a>新增路由資訊，然後攔截<a>標籤的預設行為，並與註冊的路由資訊進行匹配。若匹配成功呼叫對應的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來進行路由設計的。它相對於頁面跳轉來說：

1. 頁面只需要載入一次。後面的頁面切換可以通過ajax去請求資料。頁面體驗更加流暢；

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

3. 可進行按需載入...