在早期的 Web 應(yīng)用中，前端的作用很弱，業(yè)務(wù)邏輯和數(shù)據(jù)處理都在后端，后端給前端返回一個(gè) HTML 頁(yè)面，前端只負(fù)責(zé)展示。在這種模式下，單個(gè) HTML 頁(yè)面被當(dāng)做一個(gè)功能原件，表單提交，超鏈接跳轉(zhuǎn)都可以用來(lái)重新請(qǐng)求新的 HTML 頁(yè)面，從而達(dá)到給用戶展示新的頁(yè)面的目的。在這種方式中，你可以感覺(jué)到頁(yè)面總是在不停的刷新，一個(gè)點(diǎn)擊可能都需要等待很久，這是因?yàn)?#xff0c;當(dāng)頁(yè)面變化時(shí)，所有資源都需要重新請(qǐng)求。這些問(wèn)題導(dǎo)致了用戶體驗(yàn)不佳，也浪費(fèi)了資源。單頁(yè)應(yīng)用便很好的解決了這些問(wèn)題。

?

1、概念

什么是單頁(yè)應(yīng)用呢？單頁(yè)應(yīng)用的全稱是 single-page application，簡(jiǎn)稱 SPA，它是一種網(wǎng)站應(yīng)用的模型，它可以動(dòng)態(tài)重寫當(dāng)前的頁(yè)面來(lái)與用戶交互，而不需要重新加載整個(gè)頁(yè)面。單頁(yè)應(yīng)用的流暢性讓 Web 應(yīng)用更像桌面端或 Native 應(yīng)用了。相對(duì)于傳統(tǒng)的 Web 應(yīng)用，單頁(yè)應(yīng)用做到了前后端分離，后端只負(fù)責(zé)處理數(shù)據(jù)提供接口，頁(yè)面邏輯和頁(yè)面渲染都交給了前端。前端發(fā)展到現(xiàn)在，單頁(yè)應(yīng)用的使用已經(jīng)很廣泛，目前時(shí)興的 React、Vue、Angular 等前端框架均采用了 SPA 原則。單頁(yè)應(yīng)用意味著前端掌握了主動(dòng)權(quán)，也讓前端代碼更復(fù)雜和龐大，模塊化、組件化以及架構(gòu)設(shè)計(jì)都變得越來(lái)越重要

?

2、工作原理

SPA 的一個(gè)重要實(shí)現(xiàn)就是改變路由時(shí)，頁(yè)面不刷新。實(shí)現(xiàn)這個(gè)功能，通常有兩種方式：使用 window.history 對(duì)象或 location.hash。

?

2.1 history 對(duì)象

window.history 包含了瀏覽器的歷史信息，它有以下幾種常用方法：

• history.back()：與在瀏覽器點(diǎn)擊后退按鈕相同；

• history.forward()：與在瀏覽器中點(diǎn)擊按鈕向前相同；

• history.go(n)：接受一個(gè)整數(shù)作為參數(shù)，移動(dòng)到該整數(shù)指定的頁(yè)面，比如 go(1) 相當(dāng)于 forward()，go(-1) 相當(dāng)于 back()，go(0) 相當(dāng)于刷新當(dāng)前頁(yè)面。

HTML5 對(duì) history 對(duì)象新增了 pushState() 和 replaceState() 方法，這兩個(gè)方法可以往歷史棧中添加數(shù)據(jù)，給用戶的感覺(jué)就是瀏覽器的 url 改變了，但是頁(yè)面并沒(méi)有重新加載。pushState() 是在瀏覽記錄中添加一個(gè)新記錄，replaceState() 則是修改當(dāng)前的瀏覽器記錄，這是二者的細(xì)微差別，使用時(shí)參數(shù)的字段和含義都是一樣的。

?

2.2 hash

hash 是 location 對(duì)象的屬性，它指的是當(dāng)前 url 的錨，也就是從 # 號(hào)開(kāi)始的部分。修改 location.hash 并監(jiān)聽(tīng) window 的 hashchange 事件，也能達(dá)到同樣的目的。

　　　　

3、優(yōu)缺點(diǎn)

SPA 可圈可點(diǎn)，現(xiàn)在已被大家廣泛使用，也得到了主流框架的支持，但是它也有局限性，我們將它的優(yōu)缺點(diǎn)總結(jié)如下。

優(yōu)點(diǎn)：

無(wú)刷新體驗(yàn)，用戶在切換頁(yè)面過(guò)程中不會(huì)頻繁被“打斷”，因?yàn)榻缑婵蚣芏荚诒镜?#xff0c;對(duì)用戶的響應(yīng)非常及時(shí)，因此提升了用戶體驗(yàn)；

分離前后端關(guān)注點(diǎn)，前端負(fù)責(zé)界面顯示，后端負(fù)責(zé)數(shù)據(jù)存儲(chǔ)和計(jì)算，各司其職，不會(huì)把前后端的邏輯混雜在一起；

減輕服務(wù)器壓力，服務(wù)器只用出數(shù)據(jù)就可以，不用管展示邏輯和頁(yè)面合成，吞吐能力會(huì)提高幾倍；

API 共享，同一套后端程序代碼，不用修改就可以用于Web界面、手機(jī)、平板等多種客戶端；

完全的前端組件化，前端開(kāi)發(fā)不再以頁(yè)面為單位，更多地采用組件化的思想，代碼結(jié)構(gòu)和組織方式更加規(guī)范化，便于修改和調(diào)整。

?

缺點(diǎn)：

對(duì) SEO 不太優(yōu)好，盡管可以通過(guò) Prerender 預(yù)渲染優(yōu)化等技術(shù)解決一部分，但是相對(duì)還是不容易索引到它；

易出錯(cuò)，需要使用程序管理前進(jìn)、后退、地址欄等信息；

較高的前端開(kāi)發(fā)門檻，對(duì)技術(shù)能力要求較高，需要對(duì)設(shè)計(jì)模式有一定理解，因?yàn)槊鎸?duì)不是一個(gè)簡(jiǎn)單的頁(yè)面，而是一個(gè)運(yùn)行在瀏覽器環(huán)境里面的桌面軟件。

?

小結(jié)

在本節(jié)中，我們簡(jiǎn)單理解了 SPA 以及 SPA 在路由層面的實(shí)現(xiàn)，需要掌握：

• 理解 SPA 是什么；

• SPA 路由的工作原理；

• 了解 SPA 的優(yōu)缺點(diǎn)

?

另，SPA最重要的兩個(gè)注意點(diǎn)：

頁(yè)面不用刷新

路由的跳轉(zhuǎn)

?

還有一篇帖子：

SPA（單頁(yè)面應(yīng)用）的基本實(shí)現(xiàn)原理

總結(jié)

以上是生活随笔為你收集整理的什么是单页应用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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