單頁(yè)應(yīng)用程序(SPA)是一種網(wǎng)站設(shè)計(jì)方法，其中每個(gè)新頁(yè)面的內(nèi)容不是通過(guò)加載新的HTML頁(yè)面來(lái)提供的，而是通過(guò)Javascript操作現(xiàn)有頁(yè)面上的DOM元素來(lái)動(dòng)態(tài)生成的。想學(xué)習(xí)單頁(yè)應(yīng)用程序的更多技能，建議參加Web前端培訓(xùn)，你可以得到更加全面系統(tǒng)的學(xué)習(xí)，快速提升自己。
在更傳統(tǒng)的web頁(yè)面體系結(jié)構(gòu)中，index.html頁(yè)面可能鏈接到服務(wù)器上的其他html頁(yè)面，瀏覽器將從頭開(kāi)始下載和顯示這些頁(yè)面。
SPA方法允許用戶在更新或獲取新元素時(shí)繼續(xù)使用頁(yè)面并與之交互，并且可以導(dǎo)致更快的交互和內(nèi)容重新加載。此外，HTML5歷史API允許我們?cè)诓恢匦录虞d頁(yè)面的情況下更改頁(yè)面的URL，從而允許我們?yōu)椴煌囊晥D創(chuàng)建單獨(dú)的URL。
一旦進(jìn)入SPA，應(yīng)用程序就能夠通過(guò)AJAX請(qǐng)求或WebSocket從服務(wù)器動(dòng)態(tài)獲取內(nèi)容。這允許瀏覽器在后臺(tái)向服務(wù)器請(qǐng)求獲取附加內(nèi)容或新“頁(yè)面”時(shí)保持當(dāng)前頁(yè)面的打開(kāi)狀態(tài)。
如果您曾經(jīng)開(kāi)始過(guò)搜索查詢，并且在鍵入時(shí)在輸入表單下方顯示了中間結(jié)果，那么您已經(jīng)看到了在更新這些DOM元素的背景中發(fā)生的動(dòng)態(tài)查詢。事實(shí)上，服務(wù)器查詢可以獲取任何類型的數(shù)據(jù)，通常采用JSON有效負(fù)載、字符串甚至已經(jīng)準(zhǔn)備好呈現(xiàn)的HTML元素的形式。在Web前端培訓(xùn)中，有很多關(guān)于單頁(yè)應(yīng)用程序(SPA)的課程，通過(guò)專業(yè)老師的指導(dǎo)教學(xué)，可以很快掌握SPA的開(kāi)發(fā)技能。
何時(shí)使用單頁(yè)應(yīng)用程序，何時(shí)不使用?
什么時(shí)候應(yīng)該考慮使用單頁(yè)應(yīng)用程序?
首先，如果您希望在用戶和應(yīng)用程序之間進(jìn)行豐富的交互，那么SPA幾乎是必不可少的。第二，如果你想在頁(yè)面上提供實(shí)時(shí)更新，你肯定需要使用這種方法;通知、數(shù)據(jù)流和實(shí)時(shí)圖表都需要使用這種方法。
你應(yīng)該避免使用SPA嗎?
如果您的內(nèi)容是純靜態(tài)的，那么引入SPA會(huì)縮短用戶的加載時(shí)間，要求用戶在能夠查看任何內(nèi)容之前下載并執(zhí)行Javascript負(fù)載。然后，可以通過(guò)簡(jiǎn)單地根據(jù)請(qǐng)求顯示靜態(tài)HTML內(nèi)容來(lái)提高瀏覽器年齡較大或互聯(lián)網(wǎng)連接較慢的用戶的可訪問(wèn)性。最后，如果機(jī)器人程序無(wú)法查看任何標(biāo)題或內(nèi)容，無(wú)法顯示任何HTML內(nèi)容可能會(huì)損害SEO排名。
上面討論的服務(wù)器端呈現(xiàn)方法可以改善加載時(shí)間的情況，并為未啟用Javascript的用戶提供一些基本的可讀性。建議至少為未啟用Javascript的用戶提供內(nèi)容的基本功能，以便他們有機(jī)會(huì)根據(jù)從初始頁(yè)面加載中看到的內(nèi)容來(lái)決定啟用Javascript。參加Web前端培訓(xùn)，有明確清晰的學(xué)習(xí)路線，有系統(tǒng)規(guī)范的實(shí)時(shí)熱門(mén)課程，可以在短時(shí)間內(nèi)盡快掌握SPA的相關(guān)知識(shí)，有助于你更好地進(jìn)行開(kāi)發(fā)工作。
