前端hash路由基本原理,及代碼的基本實現
阿新 • • 發佈：2018-01-31
alt ide class javascrip r.js border pop display 早期
路由就是指隨著瀏覽器地址欄的變化，展示給用戶的頁面也不相同。
早期的路由都是後端實現的，直接根據 url 來 reload 頁面，頁面變得越來越復雜服務器端壓力變大，隨著 ajax 的出現，頁面實現非 reload 就能刷新數據，也給前端路由的出現奠定了基礎。我們可以通過記錄 url 來記錄 ajax 的變化，從而實現前端路由。（可以根據不同的url來展示不同的頁面，很好的優化了頁面的交互體驗。）
目前有兩種方式：
1：H5的history的新API（pushstate、replacestate、popstate）;由於不兼容IE10以下，本文不進行討論；可自行查看官網：https://developer.mozilla.org/en-US/docs/Web/API/History
2：hash路由基本實現原理：
* 瀏覽器不會識別url中#後面的內容，所以改變#後面的內容不會觸發reload；
* 通過hashchange我們可以監聽到#後面內容的改變，然後就可以進行ajax等操作。實現頁面的改變
下面代碼展示
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*css代碼比較混亂，大家不用在意這裏*/ * { margin: 0; padding: 0; } .container { box-sizing: border-box; } .leftSide { display: flex; align-items: center; justify-content: center; width: 50%; height: 300px; background-color: #bbb; } .rightSide { display: flex; align-items: center; justify-content: center; float: right; width: 50%; height: 300px; background-color: #5bb; } </style> </head> <body> <div class="container"> <div class="rightSide"> <div id="myPage"> </div> </div> <div class="leftSide"> <ul> <li><a href="#/">默認 </a></li> <li><a href="#/blue"> 藍</a></li> <li><a href="#/black">黑 </a></li> </ul> </div> </div> </body> <script type="text/javascript" src="./myRouter.js"></script> </html>
(function() { class Router { constructor() { this.routes = {}; this.currentUrl = ""; } init() { window.addEventListener(‘load‘, () => this.refresh(), false); window.addEventListener(‘hashchange‘,() => this.refresh(), false); } refresh() { this.currentUrl = location.hash.slice(1) || "/"; if (typeof this.routes[this.currentUrl] === ‘function‘) { this.routes[this.currentUrl](); }else { this.routes["/404"](); } } route(path, callback) { this.routes[path] = callback; } }; function changeView(str) { document.getElementById("myPage").innerHTML=str; } var router=new Router(); router.init(); router.route("/", () => changeView("<h1>默認頁面</h1>")); router.route("/blue", () => changeView("<h1>blue頁面</h1>")); router.route("/black", () => changeView("<h1>black頁面</h1>")); router.route("/404",() => changeView("<h1>404 請求的頁面不存在</h1>")); })()
以上就是hash路由的最簡單。最基本的實現；
最終的效果如下;通過點擊不同的按鈕，觸發url中hash部分的改變，改變頁面
前端hash路由基本原理,及代碼的基本實現