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

booder發表於2019-02-16
前端路由後端

後端路由

* path（路由分發）
    針對不同的路由對應不同的回撥函式處理(req, res, next)
    * req;獲取請求引數
    * res：返回請求資料
    * next: 呼叫後續的回撥函式

前端路由

* 路由是根據不同的url去請求不同的頁面內容
* 前端路由就是把不同路由對應不同的內容或頁面的任務交給前端來做，之前是通過服務端根據url不同返回不同的頁面來實現。
* 利用H5的history.pushState 和 history.replaceState ，這兩個history新增的api，為前端操控瀏覽器歷史棧提供了可能性
* 這兩個Api都會操作瀏覽器的歷史棧，而不會引起頁面的重新整理。
* 不同的是，pushState會增加一條新的歷史記錄，而replaceState則會替換當前的歷史記錄。
應用：單頁面應用
優點和缺點：
    * 優點： 使用者體驗好，不需要每次向伺服器傳送請求請求頁面資料，響應快
    * 缺點：使用瀏覽器的前進，後退鍵的時候會重新傳送請求，沒有合理地利用快取，

hash值得由來

歷史：
    1、基於Ajax 的 Web 應用最為明顯的特徵在於使用了瀏覽器內部原生支援的 XMLHttpRequest物件與後臺伺服器進行資料通。
    2、由於這種通訊方式不需要頁面的重新整理動作，因而無論與後臺發生了多少次通訊，瀏覽器的 URL 會一直保持在初始地址不變。
    3、這隨之而來的一個問題便是不斷變化的頁面狀態資訊無法記錄到瀏覽器的歷史記錄堆疊中，從而使得使用者無法通過瀏覽器的前進 / 後退按鈕在不同狀態頁面間進行切換。

解決思路：

瀏覽器能夠支援在使用者訪問過的頁面間進行前進 / 後退的操作，依賴於內部維持的 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改變

相關文章