單頁面應(yīng)用程序(SPA:Single PageApplication)簡單來講就是只在一個(gè)頁面內(nèi)完成整個(gè)網(wǎng)站的復(fù)雜頁面交互，而不刷新頁面的應(yīng)用。
例如市面上某音樂播放類軟件，在音樂播放的同時(shí)，可以操作其他菜單，而不影響音樂的播放，這種功能運(yùn)用的就是單頁面的思想，如下圖所示。
單頁面應(yīng)用程序
·事件處理：當(dāng)用戶操作頁面時(shí)，如何捕獲用戶操作并做出相應(yīng)的處理。
單頁面應(yīng)用的實(shí) 現(xiàn)使用了著名的MVC架構(gòu)模式。MVC是“模型(Model)-視圖(View)-控制器(Controller)”的縮寫，分別對應(yīng)上述技術(shù)點(diǎn)——“模型”對應(yīng)數(shù)據(jù)來源，“視圖”對應(yīng)數(shù)據(jù)渲染，“控制器”對應(yīng)事件處理。
要實(shí)現(xiàn)單頁面應(yīng)用的效果，需要以下幾個(gè)技術(shù)要點(diǎn)：
1.數(shù)據(jù)的來源：通過Ajax技術(shù)不刷新頁面獲取新數(shù)據(jù)。
2.數(shù)據(jù)的渲染通過復(fù)雜的JavaScript+DOM操作來更新界面，將新數(shù)據(jù)渲染在界面上。
3.事件的處理當(dāng)用戶有操作時(shí)，要如何捕獲用戶操作，并做出相應(yīng)的處理。
單頁面應(yīng)用的實(shí)現(xiàn)使用了著名的MVC架構(gòu)模式，MVC是模型(Model)-視圖(View)t控制器(Controller)的縮寫，分別對應(yīng)上述技術(shù)點(diǎn)，“模型”對應(yīng)數(shù)據(jù)的來源，“視圖””對應(yīng)數(shù)據(jù)的渲染，“控制器”對應(yīng)事件的處理。
關(guān)于單頁面應(yīng)用的優(yōu)勢和劣勢，開發(fā)論壇爭論不休，但是筆者認(rèn)為，總體來說，單頁面應(yīng)用利大于弊。單頁面應(yīng)用的優(yōu)點(diǎn)大致歸納為以下幾點(diǎn)：
①單頁面應(yīng)用具有桌面應(yīng)用的即時(shí)性，網(wǎng)站的可移植性和可訪問性。
②用戶體驗(yàn)好，內(nèi)容的改變不需要重新加載整個(gè)頁面，響應(yīng)速度更快。
③基于不需要重新加載，單頁面應(yīng)用對服務(wù)器壓力較小。
④前后端分離，后端不再負(fù)責(zé)模板渲染、輸出頁面工作，Web前端和各種移動終端地位對等，后端API通用化。
⑤對前端人員JavaScript技能要求更高，促使團(tuán)隊(duì)技能提升。
單頁面應(yīng)用帶來上述優(yōu)點(diǎn)的同時(shí)，也產(chǎn)生了許多問題，例如代碼量大、需要更好的代碼組織方式、DOM操作多且復(fù)雜、模板引擎這種簡單的實(shí)現(xiàn)方法性能較低、對開發(fā)人員要求頗高。因此，隨著單頁面應(yīng)用開發(fā)過程中遇到的問題越來越多，使得開發(fā)人員對“單頁面應(yīng)用框架”產(chǎn)生需求,AngularJS、Ember.js、Meteor.js、Vue.js等單頁面框架應(yīng)運(yùn)而生。目前應(yīng)用較為廣泛的單頁面應(yīng)用框架就是AngularJS。
聲明：本文由網(wǎng)站用戶香香發(fā)表，超夢電商平臺僅提供信息存儲服務(wù)，版權(quán)歸原作者所有。若發(fā)現(xiàn)本站文章存在版權(quán)問題，如發(fā)現(xiàn)文章、圖片等侵權(quán)行為，請聯(lián)系我們刪除。
