單頁面應用程序(SPA:Single PageApplication)簡單來講就是只在一個頁面內完成整個網站的復雜頁面交互,而不刷新頁面的應用。
例如市面上某音樂播放類軟件,在音樂播放的同時,可以操作其他菜單,而不影響音樂的播放,這種功能運用的就是單頁面的思想,如下圖所示。
單頁面應用程序
·事件處理:當用戶操作頁面時,如何捕獲用戶操作并做出相應的處理。
單頁面應用的實 現使用了著名的MVC架構模式。MVC是“模型(Model)-視圖(View)-控制器(Controller)”的縮寫,分別對應上述技術點——“模型”對應數據來源,“視圖”對應數據渲染,“控制器”對應事件處理。
要實現單頁面應用的效果,需要以下幾個技術要點:
1.數據的來源:通過Ajax技術不刷新頁面獲取新數據。
2.數據的渲染通過復雜的JavaScript+DOM操作來更新界面,將新數據渲染在界面上。
3.事件的處理當用戶有操作時,要如何捕獲用戶操作,并做出相應的處理。
單頁面應用的實現使用了著名的MVC架構模式,MVC是模型(Model)-視圖(View)t控制器(Controller)的縮寫,分別對應上述技術點,“模型”對應數據的來源,“視圖””對應數據的渲染,“控制器”對應事件的處理。
關于單頁面應用的優勢和劣勢,開發論壇爭論不休,但是筆者認為,總體來說,單頁面應用利大于弊。單頁面應用的優點大致歸納為以下幾點:
①單頁面應用具有桌面應用的即時性,網站的可移植性和可訪問性。
②用戶體驗好,內容的改變不需要重新加載整個頁面,響應速度更快。
③基于不需要重新加載,單頁面應用對服務器壓力較小。
④前后端分離,后端不再負責模板渲染、輸出頁面工作,Web前端和各種移動終端地位對等,后端API通用化。
⑤對前端人員JavaScript技能要求更高,促使團隊技能提升。
單頁面應用帶來上述優點的同時,也產生了許多問題,例如代碼量大、需要更好的代碼組織方式、DOM操作多且復雜、模板引擎這種簡單的實現方法性能較低、對開發人員要求頗高。因此,隨著單頁面應用開發過程中遇到的問題越來越多,使得開發人員對“單頁面應用框架”產生需求,AngularJS、Ember.js、Meteor.js、Vue.js等單頁面框架應運而生。目前應用較為廣泛的單頁面應用框架就是AngularJS。