前端路由的两种实现原理
2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>
History API
這里不細(xì)說每一個 API 的用法，大家可以看 MDN 的文檔：https://developer.mozilla.org...
重點(diǎn)說其中的兩個新增的API?history.pushState?和?history.replaceState
這兩個 API 都接收三個參數(shù)，分別是
-
狀態(tài)對象（state object）?— 一個JavaScript對象，與用pushState()方法創(chuàng)建的新歷史記錄條目關(guān)聯(lián)。無論何時用戶導(dǎo)航到新創(chuàng)建的狀態(tài)，popstate事件都會被觸發(fā)，并且事件對象的state屬性都包含歷史記錄條目的狀態(tài)對象的拷貝。
-
標(biāo)題（title）?— FireFox瀏覽器目前會忽略該參數(shù)，雖然以后可能會用上。考慮到未來可能會對該方法進(jìn)行修改，傳一個空字符串會比較安全。或者，你也可以傳入一個簡短的標(biāo)題，標(biāo)明將要進(jìn)入的狀態(tài)。
-
地址（URL）?— 新的歷史記錄條目的地址。瀏覽器不會在調(diào)用pushState()方法后加載該地址，但之后，可能會試圖加載，例如用戶重啟瀏覽器。新的URL不一定是絕對路徑；如果是相對路徑，它將以當(dāng)前URL為基準(zhǔn)；傳入的URL與當(dāng)前URL應(yīng)該是同源的，否則，pushState()會拋出異常。該參數(shù)是可選的；不指定的話則為文檔當(dāng)前URL。
相同之處是兩個 API 都會操作瀏覽器的歷史記錄，而不會引起頁面的刷新。
不同之處在于，pushState會增加一條新的歷史記錄，而replaceState則會替換當(dāng)前的歷史記錄。
我們拿大百度的控制臺舉例子（具體說是我的瀏覽器在百度首頁打開控制臺。。。）
我們在控制臺輸入
window.history.pushState(null,?null,?"https://www.baidu.com/?name=orange");好，我們觀察此時的 url 變成了這樣
我們這里不一一測試，直接給出其它用法，大家自行嘗試
window.history.pushState(null, null, "https://www.baidu.com/name/orange"); //url: https://www.baidu.com/name/orangewindow.history.pushState(null, null, "?name=orange"); //url: https://www.baidu.com?name=orangewindow.history.pushState(null, null, "name=orange"); //url: https://www.baidu.com/name=orangewindow.history.pushState(null, null, "/name/orange"); //url: https://www.baidu.com/name/orangewindow.history.pushState(null, null, "name/orange"); //url: https://www.baidu.com/name/orange注意:這里的 url 不支持跨域，當(dāng)我們把?www.baidu.com?換成?baidu.com?時就會報錯。
Uncaught DOMException: Failed to execute?'pushState'?on?'History': A history state object?with?URL?'https://baidu.com/?name=orange'?cannot be created?in?a?document?with?origin?'https://www.baidu.com'?and URL?'https://www.baidu.com/?name=orange'.回到上面例子中，每次改變 url 頁面并沒有刷新，同樣根據(jù)上文所述，瀏覽器會產(chǎn)生歷史記錄
這就是實(shí)現(xiàn)頁面無刷新情況下改變 url 的前提，下面我們說下第一個參數(shù)?狀態(tài)對象
如果運(yùn)行?history.pushState()?方法，歷史棧對應(yīng)的紀(jì)錄就會存入?狀態(tài)對象，我們可以隨時主動調(diào)用歷史條目
此處引用 mozilla 的例子
<!DOCTYPE HTML> <!-- this starts off as http://example.com/line?x=5 --> <title>Line Game - 5</title> <p>You are at coordinate <span id="coord">5</span> on the line.</p> <p><a href="?x=6" onclick="go(1); return false;">Advance to 6</a> or<a href="?x=4" onclick="go(-1); return false;">retreat to 4</a>? </p> <script>var currentPage = 5; // prefilled by server！！！！function go(d) {setupPage(currentPage + d);history.pushState(currentPage, document.title, '?x=' + currentPage);}onpopstate = function(event) {setupPage(event.state);}function setupPage(page) {currentPage = page;document.title = 'Line Game - ' + currentPage;document.getElementById('coord').textContent = currentPage;document.links[0].href = '?x=' + (currentPage+1);document.links[0].textContent = 'Advance to ' + (currentPage+1);document.links[1].href = '?x=' + (currentPage-1);document.links[1].textContent = 'retreat to ' + (currentPage-1);} </script>我們點(diǎn)擊?Advance to ？?對應(yīng)的 url 與模版都會 +1，反之點(diǎn)擊?retreat to ？?就會都 -1，這就滿足了 url 與模版視圖同時變化的需求
實(shí)際當(dāng)中我們不需要去模擬 onpopstate 事件，官方文檔提供了 popstate 事件，當(dāng)我們在歷史記錄中切換時就會產(chǎn)生 popstate 事件。對于觸發(fā) popstate 事件的方式，各瀏覽器實(shí)現(xiàn)也有差異，我們可以根據(jù)不同瀏覽器做兼容處理。
hash
我們經(jīng)常在 url 中看到 #，這個 # 有兩種情況，一個是我們所謂的錨點(diǎn)，比如典型的回到頂部按鈕原理、Github 上各個標(biāo)題之間的跳轉(zhuǎn)等，路由里的 # 不叫錨點(diǎn)，我們稱之為 hash，大型框架的路由系統(tǒng)大多都是哈希實(shí)現(xiàn)的。
同樣我們需要一個根據(jù)監(jiān)聽哈希變化觸發(fā)的事件 —— hashchange 事件
我們用?window.location?處理哈希的改變時不會重新渲染頁面，而是當(dāng)作新頁面加到歷史記錄中，這樣我們跳轉(zhuǎn)頁面就可以在 hashchange 事件中注冊 ajax 從而改變頁面內(nèi)容。
這里我在 codepen 上模擬了一下原理:?http://codepen.io/orangexc/pe...點(diǎn)擊預(yù)覽
hashchange 在低版本 IE 需要通過輪詢監(jiān)聽 url 變化來實(shí)現(xiàn)，我們可以模擬如下
(function(window) {// 如果瀏覽器不支持原生實(shí)現(xiàn)的事件，則開始模擬，否則退出。if ( "onhashchange" in window.document.body ) { return; }var location = window.location,oldURL = location.href,oldHash = location.hash;// 每隔100ms檢查hash是否發(fā)生變化setInterval(function() {var newURL = location.href,newHash = location.hash;// hash發(fā)生變化且全局注冊有onhashchange方法（這個名字是為了和模擬的事件名保持統(tǒng)一）；if ( newHash != oldHash && typeof window.onhashchange === "function" ) {// 執(zhí)行方法window.onhashchange({type: "hashchange",oldURL: oldURL,newURL: newURL});oldURL = newURL;oldHash = newHash;}}, 100); })(window);大型框架的路由當(dāng)然不會這么簡單，angular 1.x 的路由對哈希、模版、處理器進(jìn)行關(guān)聯(lián)，大致如下
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {$routeProvider.when('/article', {templateUrl: '/article.html',controller: 'ArticleController'}).otherwise({redirectTo: '/index'});$locationProvider.html5Mode(true); }])這套路由方案默認(rèn)是以 # 開頭的哈希方式，如果不考慮低版本瀏覽器，就可以直接調(diào)用?$locationProvider.html5Mode(true)?利用 H5 的方案而不用哈希方案。
總結(jié)
兩種方案我推薦 hash 方案，因?yàn)檎疹櫟降图墳g覽器，就是不美觀（多了一個 #），兩者兼顧也不是不可，只能判斷瀏覽器給出對應(yīng)方案啦，不過也只支持 IE8+，更低版本兼容見上文！
這個鏈接的 demo 含有判斷方法：http://sandbox.runjs.cn/show/...?。同時給出 Github 倉庫地址:?minrouter，推薦大家讀下源碼，僅僅 117 行，精辟！
如果在上面鏈接測試時你的 url 里多了一個 #，說明你的瀏覽器該更新啦。
文章出自 orange 的 個人博客?http://orangexc.xyz/
轉(zhuǎn)載于:https://my.oschina.net/ZhenyuanLiu/blog/1802350
總結(jié)
以上是生活随笔為你收集整理的前端路由的两种实现原理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Spring第三篇【Core模块之对象依
- 下一篇： 设计师学习HTML/CSS之路-11