《移動Web前端高效開發實戰》筆記4--打造單頁應用SPA

標籤：class   解析   理解   ash   list   前端路由   window   java   有一個   

 路由是一個單頁應用的核心，大部分前端架構都實現了一個複雜的路由庫，包括動態路由，路由鉤子，組件生命週期甚至伺服器端渲染等複雜的功能。但是對於前端開發人員而言，路由群組件的核心是URL路徑到函數的映射，瞭解了這個概念，便可以親自實現一個簡單的路由功能。

1．路由的原理

路由（Route）在前端可以理解為URL路徑到函數的映射。當訪問到一個特定的路徑時執行特定的函數。另一個概念Router，用於管理各種Route，也就是匹配路徑到函數的過程。

2．實現路由

Web端實現路由有兩種技術模式。

• 基於Hash
• 基於History API

  Hash路由的路徑中會有一個“#”標誌，即常說的錨點，前端向後端伺服器發送請求時並不會解析Hash部分。路由實現通過監聽頁面window對象的hashChange事情，調用對應的函數，優點是相容性好且完全脫離後端，缺點是因為帶了Hash標誌導致路由不直觀。

    History API通過監聽HTML 5添加的popstate事件，URL格式跟傳統的後端路由一致，這也是這種模式最大的優點。缺點是只有新型瀏覽器支援該特性，且需要後端路由配合，因為當使用者訪問一個History路由實現的路徑時，頁面仍會像後端請求，如果後端沒有設定相應的路由實現邏輯，將返回404錯誤。

    根據前端路由的概念，實現一個路由需要三個部分：儲存路徑和對應的回調方法，監聽瀏覽器的相關事件，根據監聽結果執行路徑對應回調方法。根據這些要求，在開發的路由模組中，設計一個對象通過“Key-Value”模式存放路徑和對應方法，再通過window對象監聽popstate事件，根據當前的路徑從路由對象中選擇執行對應的方法，實現的代碼如下：

 

function Router() {this.routes = {};// 存放路徑和對應方法this.route = function(path, callback) {// 執行個體化後通過調用來增加新的路由this.routes[path] = callback;// 通過key-value存放callback}this.refresh = function() {// 通過一個函數調用最終的callbackvar curUrl = location.hash.slice(1) || ‘/’;// 在Hash模式下擷取路徑// var curUrl = location.pathname;// 在History API模式下擷取路徑this.routes[curUrl]();// 調用最終的callback}this.init = function() {// 初始化方法// 監聽load事件對應第一次頁面載入window.addEventListener(‘load’, this.refresh.bind(this), false);// Hash模式下監聽hashchange事件window.addEventListener(‘hashchange’, this.refresh.bind(this), false);// History API模式下監聽popstate事件// window.addEventListener(‘popstate’, this.refresh.bind(this), false);}}

　　

在實際開發過程中，需要調用route方法添加路由和對應方法，使用代碼如下：

var router = new Router();// 執行個體化Router方法router.init();// init來監聽對應的全域事件router.route(‘/’, function() { … });// 用過route方法添加新的路由和對應方法router.route(‘test’, function() {…});

　　

    這樣就實現了一個功能簡單的單頁路由，對於使用了React或者Vue.js這樣的複雜單頁應用，路由群組件還實現了一系列複雜的功能。本節只實現了一個簡單的路由模組，其他複雜的功能可以參考React Router或者axios（Vue 2.0推薦路由）的源碼。

 

更多資訊關註：

 

《移動Web前端高效開發實戰》筆記4--打造單頁應用SPA