詳解SPA中前端路由基本原理與實現(xiàn)方式
在講前端路由之前,先說下后端路由,以及為什么出現(xiàn)了前端路由。
后端路由: 瀏覽器在地址欄中切換不同的url時,每次都向后臺服務(wù)器發(fā)出請求,服務(wù)器響應(yīng)請求,在后臺拼接html文件傳給前端顯示,java web中的jsp就是如此實現(xiàn)的。常用的后臺MVC模式的基本路由處理流程:瀏覽器輸入一個url請求,從中找到Controller和Action的值,將請求傳遞給Controller處理,Controller獲取Model數(shù)據(jù)對象,并且將Model傳遞給View,最后View呈現(xiàn)界面。
例如輸入一個url:localhost/home/index
其中l(wèi)ocalhost是域名,對應(yīng)結(jié)構(gòu){controller}/{action}/{id}
- 優(yōu)點(diǎn):分擔(dān)了前端的壓力,html和數(shù)據(jù)的拼接都是由服務(wù)器完成。
- 缺點(diǎn):當(dāng)項目十分龐大時,加大了服務(wù)器端的壓力,同時在瀏覽器端不能輸入制定的url路徑進(jìn)行指定模塊的訪問。另外一個就是如果當(dāng)前網(wǎng)速過慢,那將會延遲頁面的加載,對用戶體驗不是很友好。
前端路由: 隨著(SPA)單頁應(yīng)用的不斷普及,前后端開發(fā)分離,目前項目基本都使用前端路由,在項目使用期間頁面不會重新加載。
- 優(yōu)點(diǎn):1、用戶體驗好,和后臺網(wǎng)速沒有關(guān)系,不需要每次都從服務(wù)器全部獲取,界面展現(xiàn)快。2、可以再瀏覽器中輸入指定想要訪問的url路徑地址。3.實現(xiàn)了前后端的分離,方便開發(fā)。有很多框架都帶有路由功能模塊。
- 缺點(diǎn):1、對SEO不是很友好2、在瀏覽器前進(jìn)和后退時候重新發(fā)送請求,沒有合理緩存數(shù)據(jù)。3,初始加載時候由于加載所有模塊渲染,會慢一點(diǎn)。
前端路由目前主要有兩種方法:
1、利用url的hash,就是常用的錨點(diǎn)(#)操作,類似頁面中點(diǎn)擊某小圖標(biāo),返回頁面頂部,JS通過hashChange事件來監(jiān)聽url的改變,IE7及以下需要輪詢進(jìn)行實現(xiàn)。一般常用框架的路由機(jī)制都是用的這種方法,例如Angualrjs自帶的ngRoute和二次開發(fā)模塊ui-router,react的react-route,vue-route…
2、利用HTML5的History模式,使url看起來類似普通網(wǎng)站,以”/”分割,沒有”#”,但頁面并沒有跳轉(zhuǎn),不過使用這種模式需要服務(wù)器端的支持,服務(wù)器在接收到所有的請求后,都指向同一個html文件,通過historyAPI,監(jiān)聽popState事件,用pushState和replaceState來實現(xiàn)。
SPA 前端路由原理與實現(xiàn)方式
通常 SPA 中前端路由有2中實現(xiàn)方式,本文會簡單快速總結(jié)這兩種方法及其實現(xiàn):
- 修改 url 中 Hash
- 利用 H5 中的 history
Hash
我們都知道 url 中可以帶有一個 hash, 比如下面 url 中的 page2
https://www.abc.com/index.html#page2
window 對象中有一個事件是 onhashchange,以下幾種情況都會觸發(fā)這個事件:
- 直接更改瀏覽器地址,在最后面增加或改變#hash;
- 通過改變location.href或location.hash的值;
- 通過觸發(fā)點(diǎn)擊帶錨點(diǎn)的鏈接;
- 瀏覽器前進(jìn)后退可能導(dǎo)致hash的變化,前提是兩個網(wǎng)頁地址中的hash值不同。
這個事件有 2 個重要的屬性:oldURL 和 newURL,分別表示點(diǎn)擊前后的 url
<!-- 該頁面路徑為 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>
這樣我們可以這樣建立一個 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)出來了。
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'); }
實現(xiàn)的邏輯不難,但是利用 hash 總是沒有所謂前端路由的那種味,必然也不是主流方法。同樣的效果如果需求簡單不考慮兼容性的話,利用 css3 中 target 偽類就可以實現(xiàn),這不是本文的重點(diǎn),這里就不展開了。
history
作為一種主流方法,我們下面看看 history 如何實現(xiàn)。
history 其實瀏覽器歷史棧的一個借口,去過只有 back(), forward(), 和 go() 方法實現(xiàn)堆棧跳轉(zhuǎn)。到了 HTML5 , 提出了 pushState() 方法和 replaceState() 方法,這兩個方法可以用來向歷史棧中添加數(shù)據(jù),就好像 url 變化了一樣(過去只有 url 變化歷史棧才會變化),這樣就可以很好的模擬瀏覽歷史和前進(jìn)后退了。而現(xiàn)在的前端路由也是基于這個原理實現(xiàn)的。
這里我們先簡單認(rèn)識一下 history:
go(n) 方法接受一個整數(shù)參數(shù), n大于0會發(fā)生前進(jìn) n 個歷史棧頁面; n小于0會后退 -n 個歷史棧頁面;
forward() 前進(jìn)一個頁面
back() 后退一個頁面
以上三個方法會靜默失敗
pushSate(dataObj, title, url) 方法向歷史棧中寫入數(shù)據(jù),其第一個參數(shù)是要寫入的數(shù)據(jù)對象(不大于640kB),第二個參數(shù)是頁面的 title, 第三個參數(shù)是 url (相對路徑)。這里需要說明的有3點(diǎn):
- 當(dāng) pushState 執(zhí)行一個瀏覽器的 url 會發(fā)生變化,而頁面不會刷新,只有當(dāng)觸發(fā)的前進(jìn)后退等事件瀏覽器才會刷新;
- 這里的 url 是受到同源策略限制的,防止惡意腳本模仿其他網(wǎng)站 url 用來欺騙用戶。所以當(dāng)違背同源策略時將會報錯;
- 火狐目前會忽略 title 參數(shù)
replaceState(dataObj, title, url) 這個和上一個的區(qū)別就在于它不是寫入而是替換棧頂記錄,其余和 pushState 一模一樣
History 還有1個靜態(tài)只讀屬性:
History.length:當(dāng)然歷史堆棧長度
還有的都是已經(jīng)廢除的老古董了,這里就不提了
了解了這么多,那么可以研究一下如何利用 history 實現(xiàn)一個前端路由了,這里只考慮 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)了,不過這個過程我們要處理比較多的工作。首先為了簡單一些,我們的這里僅僅對 .html 或沒有擴(kuò)展名結(jié)尾的鏈接設(shè)置前端路由:
// 通過委托的方法組織默認(rèn)事件 var routerRxp = /\.html$|\/[^.]*$|/; $(document).click(function(e){ var href = e.target.getAttribute('href'); if(href && routrRxp.test(href)){ e.preventDefault(); } });
而后我們在點(diǎn)擊時把數(shù)據(jù)寫入歷史棧,并控制 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)這樣并不能退回主頁,因為我們的主頁默認(rèn)就是 page1 標(biāo)簽頁,所以沒有為主頁添加 state,簡單處理就讓其自己刷新好啦:
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在頁面首次打開時都不會觸發(fā)popstate事件,但是safari會觸發(fā)該事件”,經(jīng)實測現(xiàn)在的 safari 不存在這個問題。
- Mozilla指出,在 popstate 事件中,e.originalEvent.state 屬性是存在硬盤里的,觸發(fā)該事件后讀取的歷史棧信息是通過 pushState 或 replaceState 寫入的才會有值,否則改屬性為 null。
- history.state 和 e.originalEvent.state 異曲同工,而且前者可以在該事件之外任何地方隨時使用。
- 由于 pushSate, onpopstate 屬于 H5 的部分,存在一定兼容問題,可以使用 History.js (Github) 的 polyfill 解決這個問題。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
微信小程序?qū)崿F(xiàn)的動態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的動態(tài)設(shè)置導(dǎo)航欄標(biāo)題功能,結(jié)合實例形式分析了微信小程序使用wx.setNavigationBarTitle接口動態(tài)設(shè)置導(dǎo)航欄標(biāo)題的相關(guān)操作技巧,需要的朋友可以參考下2019-01-01最全的JavaScript開發(fā)工具列表 總有一款適合你
最全的JavaScript開發(fā)工具列表分享給你,總有一款適合你!2017-06-06bootstrap modal+gridview實現(xiàn)彈出框效果
這篇文章主要介紹了bootstrap modal+gridview實現(xiàn)彈出框效果,gridview點(diǎn)擊更新彈出填寫信息表單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08Bootstrap基本組件學(xué)習(xí)筆記之分頁(12)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之分頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12