單頁應(yīng)用程序是一種web應(yīng)用程序或網(wǎng)站，在使用過程中不需要重新加載頁面，并且在瀏覽器中工作。當你與SPA交互時，只需滾動或點擊圖像即可更新少數(shù)元素。想學(xué)會構(gòu)建單頁面應(yīng)用程序，可以參加Web前端培訓(xùn)，可以在短時間內(nèi)學(xué)有所成，讓你更高效地學(xué)會這項技能。
在單頁應(yīng)用程序中使用了哪些技術(shù)？
各種技術(shù)允許瀏覽器即使在應(yīng)用程序需要服務(wù)器通信時也保持單個頁面。
1.document Hashes
HTML作者可以利用元素ID來隱藏或顯示HTML文檔的不同部分。然后，使用CSS，作者可以使用“#target”選擇器僅顯示瀏覽器導(dǎo)航到的頁面部分。
2.Javascript框架
Web瀏覽器Javascript框架和庫采用了單頁應(yīng)用程序（SPA）原則，如Knockout.js、Ember.js、ExtJS、AngularJS、Meteor.js、React、Vue.js和Svelte，但ExtJS除外。
AngularJS是一個完全的客戶端框架。AngularJS的模板依賴于雙向UI數(shù)據(jù)綁定。簡單地說，數(shù)據(jù)綁定可以定義為每當模型更改時更新視圖和每當視圖更改時升級模型的自動過程。
Ember.js是基于模型-視圖-控制器（MVC）軟件架構(gòu)模式構(gòu)建的客戶端web應(yīng)用程序框架。它允許開發(fā)人員通過將最佳實踐和通用習(xí)慣融入框架來構(gòu)建可擴展的單頁應(yīng)用程序，該框架提供豐富的對象模型、自動更新Handlebars.js支持的模板、聲明性雙向數(shù)據(jù)綁定以及管理應(yīng)用程序狀態(tài)的路由器。在Web前端培訓(xùn)中，有很多關(guān)于Ember.js框架的學(xué)習(xí)和使用，全面系統(tǒng)的課程，封閉式學(xué)習(xí)，專業(yè)老師面授指導(dǎo)教學(xué)，可以在學(xué)習(xí)上少走很多彎路。
ExtJS是另一個允許開發(fā)人員構(gòu)建MVC應(yīng)用程序的客戶端框架。它有它的事件系統(tǒng)、窗口和布局管理，以及幾個UI組件（網(wǎng)格、表單元素、對話框窗口等）。使用ExtJS開發(fā)的應(yīng)用程序可以獨立運行（在瀏覽器中顯示狀態(tài)），也可以與服務(wù)器一起運行（REST API是一個用于服務(wù)其內(nèi)部存儲的示例）。
Meteor.js是一個僅為SPA創(chuàng)建的全棧（客戶端-服務(wù)器）Javascript框架。它的特點是比ReactJS、Angular或Ember更容易綁定數(shù)據(jù)。它使用分布式數(shù)據(jù)協(xié)議和發(fā)布訂閱模式來實時自動復(fù)制客戶數(shù)據(jù)更改，最終降低了開發(fā)人員編寫任何同步代碼的能力。全棧反應(yīng)性保證了從數(shù)據(jù)庫到模板的每一層在需要時自動升級。此外，服務(wù)器端渲染等生態(tài)系統(tǒng)包解決了搜索引擎優(yōu)化（SEO）的挑戰(zhàn)。
React是一個用于構(gòu)建用戶界面的Javascript庫。它由Instagram、Facebook和個人開發(fā)者社區(qū)處理。React采用了一種新的語言，即HTML（HTML的子集）和JS的組合。多個企業(yè)使用React with Redux（Javascript庫），它提供狀態(tài)管理功能（與其他幾個庫一起），并允許開發(fā)人員創(chuàng)建復(fù)雜的應(yīng)用程序。想學(xué)習(xí)如何使用React庫，可以報名參加Web前端培訓(xùn)，理論課程和實操項目一起學(xué)習(xí)，很快就能掌握這些技能。
Vue.js是一個用于構(gòu)建用戶界面的Javascript框架。Vue開發(fā)人員還提供用于狀態(tài)管理的Vuex。
3.Ajax
它允許利用對服務(wù)器的異步請求獲取JSON或XML數(shù)據(jù)。與一些SPA框架的聲明性方法不同，使用Ajax，網(wǎng)站使用Javascript或Javascript庫(包括jQuery)來利用DOM并執(zhí)行HTML元素編輯。Ajax通過jQuery等庫得到了進一步推廣，jQuery提供了更簡單的語法，并規(guī)范了不同瀏覽器之間的Ajax行為，這些瀏覽器在歷史上具有不同的行為。
4.WebSocket
WebSockets是一種雙向?qū)崟r客戶端-服務(wù)器通信技術(shù)，是HTML5規(guī)范的一個元素。對于實時通信，它們的使用在簡單性和性能方面優(yōu)于Ajax。
5.服務(wù)器發(fā)送的事件
服務(wù)器發(fā)送事件（SSE）是一種服務(wù)器可以與瀏覽器客戶端創(chuàng)建數(shù)據(jù)通信的技術(shù)。一旦建立了初始連接，事件流將保持打開狀態(tài)，直到客戶端關(guān)閉。SSE是通過傳統(tǒng)的HTTP傳輸?shù)?，具?/span>WebSocket設(shè)計上缺少的多種功能，如事件ID、自動重新連接和發(fā)送任意事件的能力。參加Web前端培訓(xùn)是入門學(xué)習(xí)SPA技術(shù)的最佳選擇，可以在短時間內(nèi)盡快掌握SPA的相關(guān)知識，有助于你更好地進行開發(fā)工作。
6.瀏覽器插件
盡管此方法已過時，但也可以使用Flash、Silverlight或Java小程序等瀏覽器插件技術(shù)執(zhí)行對服務(wù)器的異步調(diào)用。
數(shù)據(jù)傳輸（Ajax、XML和JSON）
對服務(wù)器的請求通常會導(dǎo)致返回原始數(shù)據(jù)（例如JSON或XML）或新的HTML。如果服務(wù)器返回Javascript，則客戶端上的HTML會更新DOM（文檔對象模型）區(qū)域的某些部分。在返回原始數(shù)據(jù)時，通常使用客戶端Javascript XML/（XSL）進程（在JSON的情況下，是一個模板）將原始數(shù)據(jù)解碼為HTML，稍后將其用于更新DOM的部分區(qū)域。
7.服務(wù)器架構(gòu)
l 精簡服務(wù)器體系結(jié)構(gòu)
從服務(wù)器到客戶端的SPA傳輸邏輯，web服務(wù)器的功能發(fā)展為純數(shù)據(jù)API或web服務(wù)。在某些過程中，這種體系結(jié)構(gòu)轉(zhuǎn)變被稱為“精簡服務(wù)器體系結(jié)構(gòu)”，以強調(diào)復(fù)雜性已經(jīng)從服務(wù)器轉(zhuǎn)移到了客戶端，從而最終降低了整個系統(tǒng)的復(fù)雜性。通過Web前端培訓(xùn)學(xué)習(xí)，可以讓你學(xué)到很多SPA開發(fā)知識和技能，有經(jīng)驗豐富的專業(yè)講師面授指導(dǎo)教學(xué)，實時解決疑難雜癥問題，學(xué)習(xí)起來又快又有效。
l 厚狀態(tài)服務(wù)器體系結(jié)構(gòu)
服務(wù)器將關(guān)鍵狀態(tài)保存在頁面的客戶端狀態(tài)的內(nèi)存中。通過這種方式，當任何請求（通常是用戶操作）到達服務(wù)器時，服務(wù)器發(fā)送適當?shù)?/span>Javascript和/或HTML，并進行實質(zhì)性更改，以使客戶端處于最新的期望狀態(tài)（通常是添加/更新/刪除客戶端DOM的一部分）。
同時，服務(wù)器的狀態(tài)也會升級。大多數(shù)邏輯在服務(wù)器上執(zhí)行，HTML通常也在服務(wù)器上生成。在某些方面，服務(wù)器模擬web瀏覽器，接受事件并在服務(wù)器狀態(tài)中執(zhí)行增量更改，這些更改會自動傳播到客戶端。
這種方法需要更多的服務(wù)器內(nèi)存和服務(wù)器處理，但好處是簡化了開發(fā)模型，因為
1、a)應(yīng)用程序通常在服務(wù)器中完全編碼
2、b)服務(wù)器中的數(shù)據(jù)和UI狀態(tài)在相同的存儲器空間中傳輸，而不需要定制客戶端/服務(wù)器通信橋。
在Web前端培訓(xùn)中，有理論課程+實踐項目一起學(xué)習(xí)，深化所學(xué)知識，積累項目經(jīng)驗，獲得快速提升。
l 厚無狀態(tài)服務(wù)器體系結(jié)構(gòu)
這是有狀態(tài)服務(wù)器方法的一個版本?？蛻舳隧撁嫱ㄟ^Ajax請求將描述其當前狀態(tài)的數(shù)據(jù)傳輸?shù)椒?wù)器，使用這些數(shù)據(jù)，服務(wù)器能夠重建必須修改的頁面部分的客戶端狀態(tài)，并可以開發(fā)關(guān)鍵數(shù)據(jù)或代碼（例如，JSON或Javascript），這些數(shù)據(jù)或代碼返回給客戶端以獲得新的狀態(tài)，通常根據(jù)鼓勵請求的客戶端活動修改頁面DOM樹。
這種方法需要更多的數(shù)據(jù)傳輸?shù)椒?wù)器，并且可能需要更多的計算資源來部分或完全重建服務(wù)器中的客戶端頁面狀態(tài)。同時，該技術(shù)易于擴展，因為服務(wù)器上沒有保存每客戶端頁面數(shù)據(jù)。因此，Ajax請求可以發(fā)送到不同的服務(wù)器節(jié)點，而不需要會話數(shù)據(jù)共享或服務(wù)器關(guān)聯(lián)。
總結(jié)
對單頁應(yīng)用程序開發(fā)的需求正在持續(xù)增長。使用動態(tài)重寫當前頁面的網(wǎng)站或web應(yīng)用程序，而不是從服務(wù)器加載整個新頁面，可以提供出色的用戶體驗。此外，它還減少了用戶旅程中斷的機會，這對網(wǎng)絡(luò)應(yīng)用程序至關(guān)重要，尤其是在數(shù)字商務(wù)中。減少現(xiàn)有頁面之間的延遲時間使網(wǎng)站的行為類似于桌面應(yīng)用程序，提供更流暢和舒適的體驗。對單頁應(yīng)用程序開發(fā)感興趣的同學(xué)，可以參加Web前端培訓(xùn)，幾個月的學(xué)習(xí)就能掌握全面系統(tǒng)的知識和技能，快速上崗。
