單頁應(yīng)用

為了你能看懂這篇博客之后的所有內(nèi)容，你必須知道什么是單頁應(yīng)用。

簡(jiǎn)單的講，鏈接跳轉(zhuǎn)時(shí)界面不會(huì)刷新應(yīng)用就是單頁應(yīng)用。它的特點(diǎn)是，用戶在瀏覽或者點(diǎn)擊跳轉(zhuǎn)的時(shí)候感覺不到界面的跳轉(zhuǎn)過程，因?yàn)闊o需等待，所以能極大的提高用戶的體驗(yàn)。

它的發(fā)展大致可以分為三個(gè)階段。

第一階段：沒有ajax的時(shí)代

這個(gè)時(shí)間段，單頁應(yīng)用還沒普及，網(wǎng)站大多采用傳統(tǒng)的服務(wù)端渲染。每一個(gè)url、每一個(gè)表單提交，服務(wù)端都會(huì)返回一個(gè)完整的HTML文件。對(duì)于前端來說，可以做的事情無非就是布局、兼容、切片等工作。這個(gè)階段如果想要模擬無刷新的體驗(yàn)，人們往往會(huì)使用frame標(biāo)簽將頁面進(jìn)行分割，每個(gè)部分都是一個(gè)HTML文件。這種方式缺點(diǎn)很明顯：沒辦法回退；多個(gè)HTML頁面的通信很復(fù)雜；對(duì)SEO不友好；分割頁面的計(jì)算方式很復(fù)雜等等。優(yōu)點(diǎn)也有一些，比如，各個(gè)HTML頁面之間相互獨(dú)立，代碼之間的耦合度不大。

第二階段：ajax的出現(xiàn)+location.hash

這個(gè)階段的單頁應(yīng)用已經(jīng)初現(xiàn)原型了。這個(gè)階段也是前端各種mv*框架層出不窮的階段，也是富應(yīng)用客戶端炒得最火的時(shí)候，各種MVC、MVVM框架開始流行，而服務(wù)端大多向restful方向靠攏了。JavaScript可以通過ajax發(fā)送request，可以監(jiān)聽url中`#`號(hào)部分的變化，這已經(jīng)足夠完成一個(gè)單頁應(yīng)用了。更有甚者，不需要hash，類似于一個(gè)tab切換，直接在瀏覽器內(nèi)存中保存跳轉(zhuǎn)記錄也是可以的。這種做法的優(yōu)點(diǎn)很明顯，不需要分割頁面，不需要用多個(gè)HTML，也支持回退等。缺點(diǎn)還是SEO的問題，因?yàn)橹荒鼙O(jiān)聽和更改url中`#`號(hào)之后的內(nèi)容，所以整個(gè)應(yīng)用對(duì)于后臺(tái)或者搜索引擎來說，只有一個(gè)鏈接。這種做法，時(shí)至今日，采用的人數(shù)還是比較多的，大多是一些對(duì)SEO要求不高的應(yīng)用。因?yàn)閺默F(xiàn)在的眼光來看，這種做法的兼容性是最高的。

第三階段：HTML5 history API的出現(xiàn)

這個(gè)階段，由于HTML5的出現(xiàn)，各大瀏覽器也開始支持history API了，前端程序員可以完全的控制瀏覽器的URL了，所以各大MVC，MVVM框架也都支持通過history API來實(shí)現(xiàn)路由系統(tǒng)了，還支持優(yōu)雅降級(jí)了。這種模式可以配合服務(wù)端將URL完全交由前端管理，這也是前端路由系統(tǒng)發(fā)展的主流方向。至此，單頁應(yīng)用的路由系統(tǒng)也才相對(duì)完善，只是這個(gè)API對(duì)于低版本的瀏覽器支持程度相對(duì)較低，一般的框架都會(huì)提供多種路由模式供使用者選擇。不過，時(shí)代在發(fā)展，低版本瀏覽器早晚會(huì)被淘汰。

單頁應(yīng)用的路由系統(tǒng)

隨著單頁應(yīng)用的流行，前端對(duì)于URL的管理也開始重視起來了。單頁應(yīng)用的路由系統(tǒng)，實(shí)質(zhì)就是一個(gè)管理各種URL的管理器。每個(gè)URL對(duì)應(yīng)一個(gè)HTML片段，或者交由一個(gè)controller/組件進(jìn)行管理，跳轉(zhuǎn)路由之后將HTML片段渲染至指定位置。接下來，我們看看現(xiàn)在兩個(gè)主流框架的實(shí)現(xiàn)方法。

vue-router

vue中的router模塊是跟vue的組件強(qiáng)相關(guān)的，每個(gè)route都對(duì)應(yīng)一個(gè)組件進(jìn)行管理，組件內(nèi)容無非就是些UI操作上的內(nèi)容。如下是vue-router官網(wǎng)的一個(gè)實(shí)例：

const?router?=?new?VueRouter({

routes:?[

{?path:?'/user/:id',?component:?User,

children:?[

{??????????//?當(dāng)?/user/:id/posts?匹配成功

//?UserPosts?會(huì)被渲染在?User?的??中

path:?'posts',

component:?UserPosts

}

]

}

]

})

component字段指定路由對(duì)應(yīng)的渲染組件，沒到匹配到相應(yīng)的路由的時(shí)候，都會(huì)使用該組件將router-view組件的內(nèi)容進(jìn)行替換。另外，它支持三種路由模式：hash、history、abstract。若沒有指定，模式采用的hash模式。更多的配置項(xiàng)可以參看vue-router中文官網(wǎng)。

react-router

react的router跟vue的大同小異，只不過它將router模塊改寫成了組件，引入router之后，只需要像操作組件那樣操作router就行了。比如：

React.render((

),?document.body)

上面代碼的意思很明顯，document.body為渲染區(qū)域，各個(gè)路徑對(duì)應(yīng)一個(gè)組件，匹配到路徑之后就用對(duì)應(yīng)組件渲染document.body。它支持的路由模式有：browserHistory、hashHistory、createMemoryHistory。具體使用還是建議大家參看react-router中文文檔。

結(jié)語

經(jīng)過上面這些講解，我相信大多數(shù)人應(yīng)該知道了什么是單頁應(yīng)用，為何需要路由系統(tǒng)，以及各種路由系統(tǒng)的之間的優(yōu)劣好壞。如果在路由系統(tǒng)的選擇和使用上，大家心里更有把握了，那么這篇文章就值得了！所有的這些，都是為下篇文章《前端單頁應(yīng)用的路由系統(tǒng)–實(shí)現(xiàn)篇》做的一個(gè)鋪墊。

在撰寫這篇文章之前，我已經(jīng)簡(jiǎn)單的實(shí)現(xiàn)了兩種路由模式。有興趣的朋友可以提前參看我的GitHub：https://github.com/lizhiqianduan/single-page-app-router。后面幾篇文章，我主要會(huì)講解hash模式以及history模式的路由系統(tǒng)簡(jiǎn)單的實(shí)現(xiàn)方法，敬請(qǐng)期待！

打賞作者

xiaohei

微信支付

支付寶

總結(jié)

以上是生活随笔為你收集整理的php单页应用,前端单页应用的路由系统 – 介绍篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。