HTML5中的history API的理解和使用

　　現在前端框架層出不窮，大大的方便了咱們日常工做中的開發，提升了開發的效率，然而，在使用框架的過程當中仍是頗有必要了解其中一些本身感興趣的功能的原生js實現方式。

　　我一直對現在一些框架的路由感興趣，今天就來說講我在前端路由的學習心得。

　　何爲路由？個人理解是在不刷新頁面的狀況下，經過更改頁面的url來執行不一樣的程序操做，常見的前端路由實現方式有：

　　　　　　　　1，經過hash實現（在url後面加入#+路由名），使用hash實現路由的方式仍是很常見的，一些比較火的前端框架中的路由都是經過hash實現，例如：AngularJS。hash實現路由的好處就是兼容性比較好，兼容IE8，很差的地方就是不太美觀的 "#"。

　　　　　　　　2，經過HTML5中historyAPI實現，historyAPI是HTML5中，在老版本的history中優化了一些新的方法和屬性，經過「/***」的方式添加路由，缺點就是兼容性問題了，畢竟是HTML5中新加的東西，隨着瀏覽器的不斷髮展，相信各大瀏覽器廠商都會實現對該API的實現。

 

下面正式開始看看H5中的historyAPI：

　　屬性：

　　　　length：當前窗口的歷史記錄條數。

　　　　scrollRestoration：容許Web應用程序在歷史導航上顯式地設置默認滾動恢復行爲。此屬性能夠是自動的（auto）或者手動的（manual）。

　　　　state：返回一個表示歷史堆棧頂部的狀態的值。這是一種能夠沒必要等待popstate 事件而查看狀態而的方式。

　　方法：

　　　　back()：回到上一條歷史記錄，若是當前位置已是開始的歷史記錄，則無效果，也不會報錯。

　　　　forward()：前往下一條歷史記錄，若是當前位置已是最後一條歷史記錄，則無效果，也不會報錯。

　　　　go(num)：前進或回退指定num條歷史記錄，當num爲負數的時候，表示回退num條歷史記錄，當num爲大於0的數時，表示前進num條歷史記錄。

　　　　pushstate(state,title,url)：向歷史記錄中添加一條記錄。

　　　　　　　　state：存儲json格式的數據，存儲的時間能夠在下面的popstate事件中獲取到，也能夠用state屬性獲取到。

　　　　　　　　title：添加或修改的歷史記錄的標題，可是如今全部的瀏覽器都會忽略這個參數。

　　　　　　　　url：添加或修改的歷史記錄的地址，用於更新瀏覽器的地址欄，並不在意URL是否已經存在地址列表中。更重要的是，它不會從新加載頁面。

　　　　replaceState(state,title,url)：替換當前歷史記錄的值，參數與pushstate方法一致。

　　事件：

　　　　popstate：當切換歷史記錄的時候觸發，即便用go()，forward()，back()方法或使用瀏覽器的前進後退按鈕時會觸發，而pushstate()與replacestate()方法則不會觸發該事件。

 

使用場景：

　　在使用ajax請求數據，而後繪製到頁面時，使用頁面功能時，瀏覽器的前進後退按鈕是沒有用的，這樣用戶體驗很很差，並且也不利於SEO，使用historyAPI則能夠優化這一現象。