詳解SPA中前端路由基本原理與實(shí)現(xiàn)方式
在講前端路由之前，先說(shuō)下后端路由，以及為什么出現(xiàn)了前端路由。
后端路由： 瀏覽器在地址欄中切換不同的url時(shí)，每次都向后臺(tái)服務(wù)器發(fā)出請(qǐng)求，服務(wù)器響應(yīng)請(qǐng)求，在后臺(tái)拼接html文件傳給前端顯示，java web中的jsp就是如此實(shí)現(xiàn)的。常用的后臺(tái)MVC模式的基本路由處理流程：瀏覽器輸入一個(gè)url請(qǐng)求，從中找到Controller和Action的值，將請(qǐng)求傳遞給Controller處理，Controller獲取Model數(shù)據(jù)對(duì)象，并且將Model傳遞給View,最后View呈現(xiàn)界面。
例如輸入一個(gè)url：localhost/home/index
其中l(wèi)ocalhost是域名，對(duì)應(yīng)結(jié)構(gòu){controller}/{action}/{id}
- 優(yōu)點(diǎn)：分擔(dān)了前端的壓力，html和數(shù)據(jù)的拼接都是由服務(wù)器完成。
- 缺點(diǎn)：當(dāng)項(xiàng)目十分龐大時(shí)，加大了服務(wù)器端的壓力，同時(shí)在瀏覽器端不能輸入制定的url路徑進(jìn)行指定模塊的訪問(wèn)。另外一個(gè)就是如果當(dāng)前網(wǎng)速過(guò)慢，那將會(huì)延遲頁(yè)面的加載，對(duì)用戶體驗(yàn)不是很友好。
前端路由： 隨著（SPA）單頁(yè)應(yīng)用的不斷普及，前后端開(kāi)發(fā)分離，目前項(xiàng)目基本都使用前端路由，在項(xiàng)目使用期間頁(yè)面不會(huì)重新加載。
- 優(yōu)點(diǎn)：1、用戶體驗(yàn)好，和后臺(tái)網(wǎng)速?zèng)]有關(guān)系，不需要每次都從服務(wù)器全部獲取，界面展現(xiàn)快。2、可以再瀏覽器中輸入指定想要訪問(wèn)的url路徑地址。3.實(shí)現(xiàn)了前后端的分離，方便開(kāi)發(fā)。有很多框架都帶有路由功能模塊。
- 缺點(diǎn)：1、對(duì)SEO不是很友好2、在瀏覽器前進(jìn)和后退時(shí)候重新發(fā)送請(qǐng)求，沒(méi)有合理緩存數(shù)據(jù)。3，初始加載時(shí)候由于加載所有模塊渲染，會(huì)慢一點(diǎn)。
前端路由目前主要有兩種方法：
1、利用url的hash,就是常用的錨點(diǎn)（#）操作，類似頁(yè)面中點(diǎn)擊某小圖標(biāo)，返回頁(yè)面頂部，JS通過(guò)hashChange事件來(lái)監(jiān)聽(tīng)url的改變，IE7及以下需要輪詢進(jìn)行實(shí)現(xiàn)。一般常用框架的路由機(jī)制都是用的這種方法，例如Angualrjs自帶的ngRoute和二次開(kāi)發(fā)模塊ui-router，react的react-route,vue-route…
2、利用HTML5的History模式，使url看起來(lái)類似普通網(wǎng)站，以”/”分割，沒(méi)有”#”，但頁(yè)面并沒(méi)有跳轉(zhuǎn)，不過(guò)使用這種模式需要服務(wù)器端的支持，服務(wù)器在接收到所有的請(qǐng)求后，都指向同一個(gè)html文件，通過(guò)historyAPI，監(jiān)聽(tīng)popState事件，用pushState和replaceState來(lái)實(shí)現(xiàn)。
SPA 前端路由原理與實(shí)現(xiàn)方式
通常 SPA 中前端路由有2中實(shí)現(xiàn)方式，本文會(huì)簡(jiǎn)單快速總結(jié)這兩種方法及其實(shí)現(xiàn)：
- 修改 url 中 Hash
- 利用 H5 中的 history
Hash
我們都知道 url 中可以帶有一個(gè) hash， 比如下面 url 中的 page2
https://www.abc.com/index.html#page2
window 對(duì)象中有一個(gè)事件是 onhashchange，以下幾種情況都會(huì)觸發(fā)這個(gè)事件：
- 直接更改瀏覽器地址，在最后面增加或改變#hash；
- 通過(guò)改變location.href或location.hash的值；
- 通過(guò)觸發(fā)點(diǎn)擊帶錨點(diǎn)的鏈接；
- 瀏覽器前進(jìn)后退可能導(dǎo)致hash的變化，前提是兩個(gè)網(wǎng)頁(yè)地址中的hash值不同。
這個(gè)事件有 2 個(gè)重要的屬性：oldURL 和 newURL，分別表示點(diǎn)擊前后的 url
<!-- 該頁(yè)面路徑為 https://www.abc.com/index.html -->
<a href="#page2" rel="external nofollow" rel="external nofollow" >click me</a>
<script type="text/javascript">
window.onhashchange = function(e){
console.log(e.oldURL); //https://www.abc.com/index.html
console.log(e.newURL); //https://www.abc.com/index.html#page2
}
</script>
這樣我們可以這樣建立一個(gè) DOM
<nav> <a class="item active" href="#page1" rel="external nofollow" data-target="#index">page1</a> <a class="item" href="#page2" rel="external nofollow" rel="external nofollow" data-target="#info">page2</a> <a class="item" href="#page3" rel="external nofollow" data-target="#detail">page3</a> <a class="item" href="#page4" rel="external nofollow" data-target="#show">paga4</a> <a class="item" href="#page5" rel="external nofollow" data-target="#contact">paga5</a> </nav> <div class="container"> <div class="page active" id="index"> <h1>This is index page</h1> </div> <div class="page" id="info"> <h1>This is info page</h1> </div> <div class="page" id="detail"> <h1>This is detail page</h1> </div> <div class="page" id="show"> <h1>This is show page</h1> </div> <div class="page" id="contact"> <h1>This is contact page</h1> </div> </div>
為了好看我們加上 css， 比較重要的樣式已經(jīng)在代碼里標(biāo)出來(lái)了。
body{
padding:0;
margin: 0;
}
h1{
margin: 0 0 0 160px;
}
nav{
width: 150px;
height: 150px;
float: left;
}
nav a{
display: block;
background: #888;
border: 1px solid #fff;
border-top: none;
width: 150px;
font-size: 20px;
line-height: 30px;
text-align: center;
color: #333;
text-decoration: none;
}
.container{
height: 154px;
}
/* page 部分比較重要*/
.page{
display: none;
}
.page.active{
display: block;
}
/* page 部分比較重要*/
nav a.active, .container{
background: #ddd;
border-right-color: #ddd;
}
重點(diǎn)是下面的 javascript，這里 DOM 操作我們借助 jQuery
var containers = $('.container');
var links = $('.item');
window.onhashchange = function(e){
var currLink = $('[href="'+ location.hash + '" rel="external nofollow" ]').eq(0);
var target = currLink.attr('data-target');
currLink.addClass('active').siblings('a.item').removeClass('active');
$(target).addClass('active').siblings('.page').removeClass('active');
}
實(shí)現(xiàn)的邏輯不難，但是利用 hash 總是沒(méi)有所謂前端路由的那種味，必然也不是主流方法。同樣的效果如果需求簡(jiǎn)單不考慮兼容性的話，利用 css3 中 target 偽類就可以實(shí)現(xiàn)，這不是本文的重點(diǎn)，這里就不展開(kāi)了。
history
作為一種主流方法，我們下面看看 history 如何實(shí)現(xiàn)。
history 其實(shí)瀏覽器歷史棧的一個(gè)借口，去過(guò)只有 back(), forward(), 和 go() 方法實(shí)現(xiàn)堆棧跳轉(zhuǎn)。到了 HTML5 ， 提出了 pushState() 方法和 replaceState() 方法，這兩個(gè)方法可以用來(lái)向歷史棧中添加數(shù)據(jù)，就好像 url 變化了一樣（過(guò)去只有 url 變化歷史棧才會(huì)變化），這樣就可以很好的模擬瀏覽歷史和前進(jìn)后退了。而現(xiàn)在的前端路由也是基于這個(gè)原理實(shí)現(xiàn)的。
這里我們先簡(jiǎn)單認(rèn)識(shí)一下 history：
go(n) 方法接受一個(gè)整數(shù)參數(shù)， n大于0會(huì)發(fā)生前進(jìn) n 個(gè)歷史棧頁(yè)面; n小于0會(huì)后退 -n 個(gè)歷史棧頁(yè)面；
forward() 前進(jìn)一個(gè)頁(yè)面
back() 后退一個(gè)頁(yè)面
以上三個(gè)方法會(huì)靜默失敗
pushSate(dataObj, title, url) 方法向歷史棧中寫(xiě)入數(shù)據(jù)，其第一個(gè)參數(shù)是要寫(xiě)入的數(shù)據(jù)對(duì)象（不大于640kB)，第二個(gè)參數(shù)是頁(yè)面的 title, 第三個(gè)參數(shù)是 url (相對(duì)路徑)。這里需要說(shuō)明的有3點(diǎn)：
- 當(dāng) pushState 執(zhí)行一個(gè)瀏覽器的 url 會(huì)發(fā)生變化，而頁(yè)面不會(huì)刷新，只有當(dāng)觸發(fā)的前進(jìn)后退等事件瀏覽器才會(huì)刷新；
- 這里的 url 是受到同源策略限制的，防止惡意腳本模仿其他網(wǎng)站 url 用來(lái)欺騙用戶。所以當(dāng)違背同源策略時(shí)將會(huì)報(bào)錯(cuò);
- 火狐目前會(huì)忽略 title 參數(shù)
replaceState(dataObj, title, url) 這個(gè)和上一個(gè)的區(qū)別就在于它不是寫(xiě)入而是替換棧頂記錄，其余和 pushState 一模一樣
History 還有1個(gè)靜態(tài)只讀屬性：
History.length：當(dāng)然歷史堆棧長(zhǎng)度
還有的都是已經(jīng)廢除的老古董了，這里就不提了
了解了這么多，那么可以研究一下如何利用 history 實(shí)現(xiàn)一個(gè)前端路由了，這里只考慮 javascript 部分，css 部分和上文一致。這里我們修改部分 html:
<a class="item active" href="/page1.html" rel="external nofollow" data-target="#index">page1</a> <a class="item" href="/page2.html" rel="external nofollow" data-target="#info">page2</a> <a class="item" href="/page3.html" rel="external nofollow" data-target="#detail">page3</a> <a class="item" href="/page4/subpage1.html" rel="external nofollow" data-target="#show">paga4-1</a> <a class="item" href="/page5/subpage2.html" rel="external nofollow" data-target="#contact">paga4-2</a>
我們修改了 a 標(biāo)簽的 href，這樣的鏈接看上去才不是錨點(diǎn)了，不過(guò)這個(gè)過(guò)程我們要處理比較多的工作。首先為了簡(jiǎn)單一些，我們的這里僅僅對(duì) .html 或沒(méi)有擴(kuò)展名結(jié)尾的鏈接設(shè)置前端路由：
// 通過(guò)委托的方法組織默認(rèn)事件
var routerRxp = /\.html$|\/[^.]*$|/;
$(document).click(function(e){
var href = e.target.getAttribute('href');
if(href && routrRxp.test(href)){
e.preventDefault();
}
});
而后我們?cè)邳c(diǎn)擊時(shí)把數(shù)據(jù)寫(xiě)入歷史棧，并控制 class 效果：
$(document).click(function(e){
var href = e.target.getAttribute('href');
if(href && routerRxp.test(href)){
var id = e.target.getAttribute('data-target');
history.pushState({targetId: id}, 'History demo', href);
$(id).addClass('active').siblings('.page').removeClass('active');
e.preventDefault();
}
});
到這里，鏈接就可以點(diǎn)擊了，但是瀏覽器的前進(jìn)后退還不能用，我們加入 onpopstate 事件：
$(window).on('popstate',function(e){
var id = e.originalEvent.state.targetId;
$(id).addClass('active').siblings('.page').removeClass('active');
});
這樣前進(jìn)后退就可以用了，但是我們發(fā)現(xiàn)這樣并不能退回主頁(yè)，因?yàn)槲覀兊闹黜?yè)默認(rèn)就是 page1 標(biāo)簽頁(yè)，所以沒(méi)有為主頁(yè)添加 state，簡(jiǎn)單處理就讓其自己刷新好啦：
var indexPage = location.href;
$(window).on('popstate',function(e){
if(location.href === indexPage){
location.reload();
}
var id = e.originalEvent.state.targetId;
$(id).addClass('active').siblings('.page').removeClass('active');
});
注意，這里不能使用重置 location.href 的方法刷新，那樣就不能再前進(jìn)了。
下面附上 history 方法的完整 js 代碼
var indexPage = location.href;
var routerRxp = /\.html$|\/[^.]*$|/;
$(document).click(function(e){
var href = e.target.getAttribute('href');
if(href && routerRxp.test(href)){
var id = e.target.getAttribute('data-target');
history.pushState({targetId: id}, 'History demo', href);
$(id).addClass('active').siblings('.page').removeClass('active');
e.preventDefault();
}
});
$(window).on('popstate',function(e){
if(location.href === indexPage){
location.reload();
}
var id = e.originalEvent.state.targetId;
$(id).addClass('active').siblings('.page').removeClass('active');
});
最后，關(guān)于兩種方法有一些比較重要的特性總結(jié)一下：
- 有的文章提到“Firfox，Chrome在頁(yè)面首次打開(kāi)時(shí)都不會(huì)觸發(fā)popstate事件，但是safari會(huì)觸發(fā)該事件”，經(jīng)實(shí)測(cè)現(xiàn)在的 safari 不存在這個(gè)問(wèn)題。
- Mozilla指出，在 popstate 事件中，e.originalEvent.state 屬性是存在硬盤(pán)里的，觸發(fā)該事件后讀取的歷史棧信息是通過(guò) pushState 或 replaceState 寫(xiě)入的才會(huì)有值，否則改屬性為 null。
- history.state 和 e.originalEvent.state 異曲同工，而且前者可以在該事件之外任何地方隨時(shí)使用。
- 由于 pushSate, onpopstate 屬于 H5 的部分，存在一定兼容問(wèn)題，可以使用 History.js (Github) 的 polyfill 解決這個(gè)問(wèn)題。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了js實(shí)現(xiàn)抽獎(jiǎng)效果的方法實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
下面小編就為大家?guī)?lái)一篇js控制臺(tái)輸出的方法(詳解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11
微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實(shí)例形式分析了微信小程序使用wx.setNavigationBarTitle接口動(dòng)態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
本篇文章給大家詳細(xì)分析了JS拋物線動(dòng)畫(huà)制作過(guò)程以及相關(guān)的代碼實(shí)例分享，有興趣的朋友參考下。2018-02-02
一個(gè)加載js文件的小腳本...2007-06-06
最全的JavaScript開(kāi)發(fā)工具列表 總有一款適合你
最全的JavaScript開(kāi)發(fā)工具列表分享給你，總有一款適合你！2017-06-06
在真正的Web站點(diǎn)和應(yīng)用程序中，幾乎不可能創(chuàng)建名為ClassA和ClassB的類，更可能的是創(chuàng)建表示特定事物（如形狀）的類?？紤]本章開(kāi)頭所述的形狀的例子，Polygon、Triangle和Rectangle類就構(gòu)成了一組很好的探討數(shù)據(jù)。2009-08-08
bootstrap modal+gridview實(shí)現(xiàn)彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實(shí)現(xiàn)彈出框效果，gridview點(diǎn)擊更新彈出填寫(xiě)信息表單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Bootstrap基本組件學(xué)習(xí)筆記之分頁(yè)(12)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之分頁(yè),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JavaScript獲得表單target屬性的方法,涉及javascript操作表單屬性的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04