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

 路由是一個單頁應用的核心，大部分前端框架都實現了一個複雜的路由庫，包括動態路由，路由鉤子，組件生命週期甚至服務器端渲染等複雜的功能。可是對於前端開發者而言，路由組件的核心是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() {					// 經過一個函數調用最終的callback
	var 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推薦路由）的源碼。

 

更多信息關注：