前端路由與後端路由的思考

後端路由

* path（路由分發）
    針對不一樣的路由對應不一樣的回調函數處理(req, res, next)
    * req;獲取請求參數
    * res：返回請求數據
    * next: 調用後續的回調函數

前端路由

* 路由是根據不一樣的url去請求不一樣的頁面內容
* 前端路由就是把不一樣路由對應不一樣的內容或頁面的任務交給前端來作，以前是經過服務端根據url不一樣返回不一樣的頁面來實現。
* 利用H5的history.pushState 和 history.replaceState ，這兩個history新增的api，爲前端操控瀏覽器歷史棧提供了可能性
* 這兩個Api都會操做瀏覽器的歷史棧，而不會引發頁面的刷新。
* 不一樣的是，pushState會增長一條新的歷史記錄，而replaceState則會替換當前的歷史記錄。
應用：單頁面應用
優勢和缺點：
    * 優勢： 用戶體驗好，不須要每次向服務器發送請求請求頁面數據，響應快
    * 缺點：使用瀏覽器的前進，後退鍵的時候會從新發送請求，沒有合理地利用緩存，

hash值得由來

歷史：
    一、基於Ajax 的 Web 應用最爲明顯的特徵在於使用了瀏覽器內部原生支持的 XMLHttpRequest對象與後臺服務器進行數據通。
    二、因爲這種通訊方式不須要頁面的刷新動做，於是不管與後臺發生了多少次通訊，瀏覽器的 URL 會一直保持在初始地址不變。
    三、這隨之而來的一個問題即是不斷變化的頁面狀態信息沒法記錄到瀏覽器的歷史記錄堆棧中，從而使得用戶沒法經過瀏覽器的前進 / 後退按鈕在不一樣狀態頁面間進行切換。

解決思路：

瀏覽器可以支持在用戶訪問過的頁面間進行前進 / 後退的操做，依賴於內部維持的 history 對象。
出於安全性的考慮，瀏覽器並不容許 JavaScript 腳本對該對象進行增刪改之類寫操做，
而只是能夠經過 history. back/forward() 等方法進行訪問。既然在頁面狀態發生變化時，
沒法經過腳本直接去影響瀏覽器的歷史信息，那麼只有經過 URL 的變化來觸發瀏覽器增長一條新的歷史記錄。
這也就是說須要將 Ajax 應用的不一樣頁面狀態與 URL 進行一種一對一的映射，而且可以在回退或前進到某一 URL 之時，
應用自己可以在頁面無刷新的狀況下跳轉到正確的頁面狀態。如何對 Ajax 應用的初始 URL 進行改變，
而同時這種變化的切換又不會引發頁面的從新加載呢？答案只有一個，那就是藉助用於頁面內資源片斷定位目的
的「片斷標識符」（fragment identifier），即 URL 中「#」符號後的字符串（hash string）。當瀏覽器向
服務器端請求資源時，片斷標識符並不會連同 base URL 一同發往服務器端，而只是在獲得服務器返回的結果
以後幫助瀏覽器快速定位到被相應的錨點（anchor）所標識的資源片斷，即便沒法找個對應的錨點，瀏覽器也並
不會報錯。正是基於瀏覽器的這一特性，構建片斷標識符與頁面狀態之間的映射關係成爲了解決此類問題的基礎。

• hash值

  • 將任意長度的二進制字符串經過必定的算法映射成一個固定長度的較小二進制字符串，這個字符串就是對應的hash值，主要特色就是惟一的，不可逆的。

• 前端路由的hash值(#)----->angular

  • hash一般應用在spa單頁面應用中。由於經過不一樣的hash值映射的url來是的瀏覽器添加一條不一樣的url歷史記錄。

  • 經過瀏覽器的pushstate、replaceState來操做，請求不一樣的瀏覽器記錄達到請求不一樣的頁面的效果

  • H5中提供的兩個操做hash值得API來操做hash值

  • window.location.hash讀取#值

  • window.onhashchange = func 監聽hash改變