基于路由模式的前端框架設(shè)計與改進
2018-07-12 10:42:54陳辰王萌程旭
電腦知識與技術(shù) 2018年12期
陳辰 王萌 程旭
摘要：現(xiàn)今軟件開發(fā)中對前端開發(fā)的重視度越來越高，要求自然也不斷提高。當(dāng)前流行的前端框架層出不窮，其中單頁的應(yīng)用在整個前端開發(fā)中占有絕對優(yōu)勢，而單頁面的路由選擇問題是困擾不少開發(fā)人員的一大難題，自從有了Ajax的引入減少了很多開發(fā)中的問題，但是在實際項目開發(fā)中，Ajax的使用仍不能滿足項目需求。該文針對前端路由中Ajax的使用回退功能進行改動，以更好地應(yīng)用于項目開發(fā)。
關(guān)鍵詞：前端；路由；Ajax
中圖分類號：TP393 文獻標(biāo)識碼：A 文章編號：1009-3044（2018）12-0053-02
1 概述
Web開發(fā)中，路由是不可或缺的一部分。瀏覽器中當(dāng)前的URL發(fā)生變化時，路由系統(tǒng)就會做出響應(yīng)，來保證當(dāng)前顯示界面與URL相一致[1]。隨著網(wǎng)絡(luò)技術(shù)的發(fā)展，單頁應(yīng)用（SPA）成為前端應(yīng)用的主流形式，而為之提供服務(wù)的前端路由系統(tǒng)也隨之誕生，并且出現(xiàn)了一些獨立的第三方路由系統(tǒng)。
同時，隨著軟硬件技術(shù)水平的大幅提升，人們對Web應(yīng)用的性能也有了更高的要求，需要系統(tǒng)提供更快的響應(yīng)速度。后端路由進行頁面跳轉(zhuǎn)是通過后端的配置文件進行服務(wù)器的訪問判讀跳轉(zhuǎn)頁面的位置進行頁面刷新跳轉(zhuǎn)。
其中頁面可以是服務(wù)端獲取數(shù)據(jù)后和模板組合生成HTM再返回，也可以是后端直接返回HTML模板，然后由前端的js請求數(shù)據(jù)后，再與模板組合生成HTML。而這兩種方式都會使得響應(yīng)速度變慢，不能很好地滿足用戶體驗。
為了解決SPA應(yīng)用無刷新的視圖切換，各大主流框架都有自己的路由模塊，并且解決了網(wǎng)頁加載和展現(xiàn)速度，用戶體驗的問題，實現(xiàn)了SPA應(yīng)用頁面局部加載，也是基于前后端分離方便開發(fā)。但它們同樣沒有完全解決路由使用中的問題，例如前進后退時跳轉(zhuǎn)，緩存應(yīng)用，模塊渲染等等問題。
本文通過對Ajax單頁面路由跳轉(zhuǎn)處理增加回退功能，單頁面刷新不跳轉(zhuǎn)，通過Url鏈接訪問具體頁面。從以上幾方面提高用戶體驗和頁面訪問速度等。
2 背景
路由這個概念最先是后端出現(xiàn)的，前端路由的出現(xiàn)要從Ajax開始。Ajax，全稱 Asynchronous JavaScript And XML，是瀏覽器用來實現(xiàn)異步加載的一種技術(shù)方案。在九十年代初，大多數(shù)的網(wǎng)頁都是直接返回 HTML ，用戶的每次更新操作都需要重新刷新頁面。極其影響交互體驗，隨著網(wǎng)絡(luò)的發(fā)展，迫切需要一種方案來改善這種情況。
1996，微軟首先提出 iframe 標(biāo)簽，iframe 帶來了異步加載和請求元素的概念，隨后在 1998 年，微軟的 Outloook Web App 團隊提出Ajax的基本概念（XMLHttpRequest的前身），并在 IE5 通過 ActiveX 來實現(xiàn)了這項技術(shù)。在微軟實現(xiàn)這個概念后，其他瀏覽器比如 Mozilia，Safari，Opera 相繼以 XMLHttpRequest 來實現(xiàn) Ajax， 兼容問題從此出現(xiàn)，不過在 IE7 發(fā)布時，微軟選擇了妥協(xié)，兼容了 XMLHttpRequest 的實現(xiàn)。
有了 Ajax 后，用戶交互就不用每次都刷新頁面，體驗帶來了極大的提升。
但真正讓這項技術(shù)發(fā)揚光大的，還是后來的 Google Map，它的出現(xiàn)向人們展現(xiàn)了 Ajax 的真正魅力，釋放了眾多開發(fā)人員的想象力，讓其不僅僅局限于簡單的數(shù)據(jù)和頁面交互，也為后來異步交互體驗方式的繁榮發(fā)展帶來了根基。
而異步交互體驗的更高級版本就是 SPA—— 單頁應(yīng)用。單頁應(yīng)用不僅在頁面交互是無刷新的，連頁面跳轉(zhuǎn)都是無刷新的，為了實現(xiàn)單頁應(yīng)用，所以就有了前端路由。
單頁應(yīng)用的概念是伴隨著 MVVM 出現(xiàn)的。最早由微軟提出，然后他們在瀏覽器端用 `Knockoutjs` 實現(xiàn)。但這項技術(shù)的強大之處并未當(dāng)時的開發(fā)者體會到，可能是因為 `Knockoutjs` 實現(xiàn)過于復(fù)雜，導(dǎo)致沒有大面積的擴散。
同樣，這次接力的選手依然是 Google。Google 通過 Angularjs 將 MVVM 及單頁應(yīng)用發(fā)揚光大，讓前端開發(fā)者能夠開發(fā)出更加大型的應(yīng)用，職能變得更大了。隨后前端圈開始得到了爆發(fā)式的發(fā)展，陸續(xù)出現(xiàn)了很多優(yōu)秀的框架。
例如Angularjs的ngRoute、React的React-router和Vue的Vue-Router。Angular通過ngroute模塊提供了視圖的切換，將路由、視圖和控制器很好的對應(yīng)了起來[2]。AngularJS 路由允許我們通過不同的URL 訪問不同的內(nèi)容[3]。當(dāng)Url請求時，根據(jù)路由配置文件的內(nèi)容匹配Url對應(yīng)內(nèi)容，通過模板講內(nèi)容插入到ng-view中去。從一定意義上來說，AngularJS的路由更加傾向通過改變Url來進行頁面的局部刷新。Vue官方提供的路由插件Vue-Router，它是集成在Vue.js中適合單頁面開發(fā)應(yīng)用，Vue是基于路由和組件的單頁面使用，通過路由的設(shè)定訪問路徑，并將路徑和組件映射起來[4]。傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉(zhuǎn)的。在單頁面使用中，vue路由庫是通過路徑間的轉(zhuǎn)換，也可以說通過組件間的轉(zhuǎn)換來完成跳轉(zhuǎn)的。React-Router是ReactJs的一個應(yīng)用組件，是一個很強大的路由庫，它通過定義ReactJS組件
3 設(shè)計與改進
3.1分析
前端路由的實現(xiàn)其實很簡單。本質(zhì)上就是檢測 Url 的變化，截獲 Url 地址，然后解析來匹配路由規(guī)則。現(xiàn)今流行的前端框架都有自己適合的路由選擇機制，如angular的angular-route.js，React的路由庫React-Router，以及Vue的Vue-Router庫，但以上路由的集成都需要引入大量的js文件以及一定量的配置文件。通過框架引入的路由在使用中需要先學(xué)框架的使用方法，在去理解路由的使用，因此會帶來一定量的學(xué)習(xí)成本。由此本文提出一個簡單便捷的路由選擇方法，同時配合回退機制。
其中AngularJS路由原理：當(dāng)點擊鏈接后，只改變Url/#/后面的部分再次訪問該頁面，因為服務(wù)器自動忽略了#后面的內(nèi)容，所以當(dāng)前頁面不會跳轉(zhuǎn)，此時頁面加載時，通過監(jiān)聽相關(guā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"）； //首先調(diào)用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)建服務(wù)器在8888端口監(jiān)聽
console.log（"Server has started."）；
}
exports.start = start；
3.2設(shè)計
Vue作為一套漸進式MVVM框架深度集成了Vue-Router這款路由插件。首先我們需要了解，在傳統(tǒng)的頁面應(yīng)用中，如果想要實現(xiàn)頁面的切換與跳轉(zhuǎn)，只能通過超鏈接的方式來實現(xiàn)。但是在Vue-Router這款Vue官方的路由管理工具中，卻可以通過在路徑之間進行切換，即對組件進行切換來實現(xiàn)這一功能。同時，通過
對于一個單頁面應(yīng)用來說，通過普通的Vue.js我們可以創(chuàng)建大量的組件（components），然后將它們映射到路由（router），并告訴Vue-Router在什么樣的地方應(yīng)該渲染他們。我們可以簡單地來查看這個例子：
3.3改進
改進ajax實現(xiàn)的前端路由。原理：首先通過調(diào)用ajax獲取頁面html代碼，再清空對應(yīng)容器，然后將Dom部署到容器內(nèi)。主要適用于頁面部分的替換（如保留導(dǎo)航條，側(cè)邊欄、底部、菜單欄等），通過將不同頁面的代碼放置于不同html文件中，配合ajax監(jiān)聽點擊事件觸發(fā)頁面的變化來實現(xiàn)前端路由。
$.ajax（{
type："GET"，
url： addr+"adcda.html"，
success：function（data）{
$（"#adc"）.html（""）； //清空容器
$（"#adc"）.html（data）；//填充容器
}
}）
通過項目應(yīng)用后的實踐改進，在ajax跳轉(zhuǎn)地方同時加入“#”錨點的使用，Url鏈接中加入錨點并不影響頁面跳轉(zhuǎn)，同時支持無刷新的頁面跳轉(zhuǎn)使用。這樣可以更好支撐單頁的跳轉(zhuǎn)使用，同時在頁面回退的時候可以找到想要的頁面，不會因為單頁的跳轉(zhuǎn)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 總結(jié)
Ajax的使用是實現(xiàn)路由跳轉(zhuǎn)原理最基礎(chǔ)的方法，本文通過Ajax無刷新的頁面跳轉(zhuǎn)，并借鑒現(xiàn)有的流行框架路由跳轉(zhuǎn)的一些方式方法，改進了Ajax頁面跳轉(zhuǎn)的方式，增加部分功能從而實現(xiàn)頁面的無刷新，可后退的單頁面應(yīng)用。對Ajax的改進這樣檢查減少開發(fā)人員對其他框架的學(xué)習(xí)成本，因為路由的使用在開發(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：路由設(shè)置[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.
