基于路由模式的前端框架設計與改進

陳辰 王萌 程旭

摘要：現(xiàn)今軟件開發(fā)中對前端開發(fā)的重視度越來越高，要求自然也不斷提高。當前流行的前端框架層出不窮，其中單頁的應用在整個前端開發(fā)中占有絕對優(yōu)勢，而單頁面的路由選擇問題是困擾不少開發(fā)人員的一大難題，自從有了Ajax的引入減少了很多開發(fā)中的問題，但是在實際項目開發(fā)中，Ajax的使用仍不能滿足項目需求。該文針對前端路由中Ajax的使用回退功能進行改動，以更好地應用于項目開發(fā)。

關鍵詞：前端；路由；Ajax

中圖分類號：TP393 文獻標識碼：A 文章編號：1009-3044（2018）12-0053-02

1 概述

Web開發(fā)中，路由是不可或缺的一部分。瀏覽器中當前的URL發(fā)生變化時，路由系統(tǒng)就會做出響應，來保證當前顯示界面與URL相一致[1]。隨著網(wǎng)絡技術的發(fā)展，單頁應用（SPA）成為前端應用的主流形式，而為之提供服務的前端路由系統(tǒng)也隨之誕生，并且出現(xiàn)了一些獨立的第三方路由系統(tǒng)。

同時，隨著軟硬件技術水平的大幅提升，人們對Web應用的性能也有了更高的要求，需要系統(tǒng)提供更快的響應速度。后端路由進行頁面跳轉是通過后端的配置文件進行服務器的訪問判讀跳轉頁面的位置進行頁面刷新跳轉。

其中頁面可以是服務端獲取數(shù)據(jù)后和模板組合生成HTM再返回，也可以是后端直接返回HTML模板，然后由前端的js請求數(shù)據(jù)后，再與模板組合生成HTML。而這兩種方式都會使得響應速度變慢，不能很好地滿足用戶體驗。

為了解決SPA應用無刷新的視圖切換，各大主流框架都有自己的路由模塊，并且解決了網(wǎng)頁加載和展現(xiàn)速度，用戶體驗的問題，實現(xiàn)了SPA應用頁面局部加載，也是基于前后端分離方便開發(fā)。但它們同樣沒有完全解決路由使用中的問題，例如前進后退時跳轉，緩存應用，模塊渲染等等問題。

本文通過對Ajax單頁面路由跳轉處理增加回退功能，單頁面刷新不跳轉，通過Url鏈接訪問具體頁面。從以上幾方面提高用戶體驗和頁面訪問速度等。

2 背景

路由這個概念最先是后端出現(xiàn)的，前端路由的出現(xiàn)要從Ajax開始。Ajax，全稱 Asynchronous JavaScript And XML，是瀏覽器用來實現(xiàn)異步加載的一種技術方案。在九十年代初，大多數(shù)的網(wǎng)頁都是直接返回 HTML ，用戶的每次更新操作都需要重新刷新頁面。極其影響交互體驗，隨著網(wǎng)絡的發(fā)展，迫切需要一種方案來改善這種情況。

1996，微軟首先提出 iframe 標簽，iframe 帶來了異步加載和請求元素的概念，隨后在 1998 年，微軟的 Outloook Web App 團隊提出Ajax的基本概念（XMLHttpRequest的前身），并在 IE5 通過 ActiveX 來實現(xiàn)了這項技術。在微軟實現(xiàn)這個概念后，其他瀏覽器比如 Mozilia，Safari，Opera 相繼以 XMLHttpRequest 來實現(xiàn) Ajax， 兼容問題從此出現(xiàn)，不過在 IE7 發(fā)布時，微軟選擇了妥協(xié)，兼容了 XMLHttpRequest 的實現(xiàn)。

有了 Ajax 后，用戶交互就不用每次都刷新頁面，體驗帶來了極大的提升。

但真正讓這項技術發(fā)揚光大的，還是后來的 Google Map，它的出現(xiàn)向人們展現(xiàn)了 Ajax 的真正魅力，釋放了眾多開發(fā)人員的想象力，讓其不僅僅局限于簡單的數(shù)據(jù)和頁面交互，也為后來異步交互體驗方式的繁榮發(fā)展帶來了根基。

而異步交互體驗的更高級版本就是 SPA—— 單頁應用。單頁應用不僅在頁面交互是無刷新的，連頁面跳轉都是無刷新的，為了實現(xiàn)單頁應用，所以就有了前端路由。

單頁應用的概念是伴隨著 MVVM 出現(xiàn)的。最早由微軟提出，然后他們在瀏覽器端用 `Knockoutjs` 實現(xiàn)。但這項技術的強大之處并未當時的開發(fā)者體會到，可能是因為 `Knockoutjs` 實現(xiàn)過于復雜，導致沒有大面積的擴散。

同樣，這次接力的選手依然是 Google。Google 通過 Angularjs 將 MVVM 及單頁應用發(fā)揚光大，讓前端開發(fā)者能夠開發(fā)出更加大型的應用，職能變得更大了。隨后前端圈開始得到了爆發(fā)式的發(fā)展，陸續(xù)出現(xiàn)了很多優(yōu)秀的框架。

例如Angularjs的ngRoute、React的React-router和Vue的Vue-Router。Angular通過ngroute模塊提供了視圖的切換，將路由、視圖和控制器很好的對應了起來[2]。AngularJS 路由允許我們通過不同的URL 訪問不同的內容[3]。當Url請求時，根據(jù)路由配置文件的內容匹配Url對應內容，通過模板講內容插入到ng-view中去。從一定意義上來說，AngularJS的路由更加傾向通過改變Url來進行頁面的局部刷新。Vue官方提供的路由插件Vue-Router，它是集成在Vue.js中適合單頁面開發(fā)應用，Vue是基于路由和組件的單頁面使用，通過路由的設定訪問路徑，并將路徑和組件映射起來[4]。傳統(tǒng)的頁面應用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉的。在單頁面使用中，vue路由庫是通過路徑間的轉換，也可以說通過組件間的轉換來完成跳轉的。React-Router是ReactJs的一個應用組件，是一個很強大的路由庫，它通過定義ReactJS組件及相關子組件來實現(xiàn)頁面路由的映射、參數(shù)的解析和傳遞。通過簡單的API就可以實現(xiàn)代碼懶加載，動態(tài)路由匹配，路徑過渡處理等幾大特性。是對ngroute和Vue-Router的一大改進。

3 設計與改進

3.1分析

前端路由的實現(xiàn)其實很簡單。本質上就是檢測 Url 的變化，截獲 Url 地址，然后解析來匹配路由規(guī)則。現(xiàn)今流行的前端框架都有自己適合的路由選擇機制，如angular的angular-route.js，React的路由庫React-Router，以及Vue的Vue-Router庫，但以上路由的集成都需要引入大量的js文件以及一定量的配置文件。通過框架引入的路由在使用中需要先學框架的使用方法，在去理解路由的使用，因此會帶來一定量的學習成本。由此本文提出一個簡單便捷的路由選擇方法，同時配合回退機制。

其中AngularJS路由原理：當點擊鏈接后，只改變Url/#/后面的部分再次訪問該頁面，因為服務器自動忽略了#后面的內容，所以當前頁面不會跳轉，此時頁面加載時，通過監(jiān)聽相關事件的改變，來加載不同的頁面代碼最終實現(xiàn)前端路由。

實現(xiàn)方式：

angular.module（'routingDemoApp'，['ngRoute']） //包含了ngRoute模塊實現(xiàn)路由功能

.config（['$routeProvider'， function（$routeProvider）{

$routeProvider //通過configAPI把$routeProvider注入到

.when（'/'，{templateUrl：'home.html'}） //配置函數(shù)中來定義路由規(guī)則。

.when（'/a'，{templateUrl：'a.html'}）

.when（'/b'，{templateUrl：'b.html'}）

.when（'/c'，{templateUrl：'c.html'}）

.otherwise（{template：'404.html'}）；

}]）；

vue路由機制

var http = require（"http"）； //首先調用http模塊和url模塊并且實例化賦值給變量

var url = require（"url"）；

function start（route） { // route是router.js中的路由處理函數(shù)

function onRequest（request， response） {

var pathname = url.parse（request.url）.pathname //獲取url字符串

var content = route（pathname）； //傳遞給route函數(shù)url路徑，返回得到對象content

response.writeHead（content.status，{"Content-Type"："text/html"}）；

response.write（content.text）； //將獲取到的代碼寫入到頁面

response.end（）；

}

http.createServer（onRequest）.listen（8011）； 創(chuàng)建服務器在8888端口監(jiān)聽

console.log（"Server has started."）；

}

exports.start = start；

3.2設計

Vue作為一套漸進式MVVM框架深度集成了Vue-Router這款路由插件。首先我們需要了解，在傳統(tǒng)的頁面應用中，如果想要實現(xiàn)頁面的切換與跳轉，只能通過超鏈接的方式來實現(xiàn)。但是在Vue-Router這款Vue官方的路由管理工具中，卻可以通過在路徑之間進行切換，即對組件進行切換來實現(xiàn)這一功能。同時，通過標簽對頁面組件進行動態(tài)的掛載，能夠最終渲染成頁面。在Vue-Router的幫助下，我們可以輕松解決頁面切換的問題。

對于一個單頁面應用來說，通過普通的Vue.js我們可以創(chuàng)建大量的組件（components），然后將它們映射到路由（router），并告訴Vue-Router在什么樣的地方應該渲染他們。我們可以簡單地來查看這個例子：

3.3改進

改進ajax實現(xiàn)的前端路由。原理：首先通過調用ajax獲取頁面html代碼，再清空對應容器，然后將Dom部署到容器內。主要適用于頁面部分的替換（如保留導航條，側邊欄、底部、菜單欄等），通過將不同頁面的代碼放置于不同html文件中，配合ajax監(jiān)聽點擊事件觸發(fā)頁面的變化來實現(xiàn)前端路由。

$.ajax（{

type："GET"，

url： addr+"adcda.html"，

success：function（data）{

$（"#adc"）.html（""）； //清空容器

$（"#adc"）.html（data）；//填充容器

}

}）

通過項目應用后的實踐改進，在ajax跳轉地方同時加入“#”錨點的使用，Url鏈接中加入錨點并不影響頁面跳轉，同時支持無刷新的頁面跳轉使用。這樣可以更好支撐單頁的跳轉使用，同時在頁面回退的時候可以找到想要的頁面，不會因為單頁的跳轉Url的固定而回退到首頁或登錄頁。這種加入錨點的頁面路由配置更加符合實際項目開發(fā)的需求。

var geturl = function （url，id） {

id = id || 'mainContents'；

$.ajax（{

type： "GET"，

url： url，

success： function （data） {

$（"#" + id）.html（data）；

mcurl = url；

window.location.hash=url；

}

}）；

}

window.onhashchange=hashChange；

function hashChange（）{

var loc = location.hash；

if（loc ！= mcurl）{

geturl（loc.replace（'#'，''），''）；

}

}

4 總結

Ajax的使用是實現(xiàn)路由跳轉原理最基礎的方法，本文通過Ajax無刷新的頁面跳轉，并借鑒現(xiàn)有的流行框架路由跳轉的一些方式方法，改進了Ajax頁面跳轉的方式，增加部分功能從而實現(xiàn)頁面的無刷新，可后退的單頁面應用。對Ajax的改進這樣檢查減少開發(fā)人員對其他框架的學習成本，因為路由的使用在開發(fā)中使用可以提高效率。

參考文獻：

[1] 范洪春.深入理解react-router路由系統(tǒng)[EB/OL].知乎：[2018.03.23]. https：//zhuanlan.zhihu.com/p/20381597.

[2] GAMELOFT9. AngularJs路由：ngRoute[EB/OL].CSDN：[2018.03.24]. https：//blog.csdn.net/gameloft9/article/details/50963466.

[3] ljxbbss.angularjs：路由設置[J/OL].CSDN：[2018.3.23]. https：//blog.csdn.net/ljxbbss/article/details/77854048.

[4] keepfool. Vue.js——60分鐘快速入門[EB/OL].博客園：[2018.03.23]. http：//www.cnblogs.com/keepfool/p/5619070.html.