如何實(shí)現(xiàn)單頁面應(yīng)用效果？單頁面應(yīng)用有哪些優(yōu)勢？

單頁面應(yīng)用程序(SPA:Single PageApplication)簡單來講就是只在一個(gè)頁面內(nèi)完成整個(gè)網(wǎng)站的復(fù)雜頁面交互，而不刷新頁面的應(yīng)用。

例如市面上某音樂播放類軟件，在音樂播放的同時(shí)，可以操作其他菜單，而不影響音樂的播放，這種功能運(yùn)用的就是單頁面的思想，如下圖所示。

·事件處理：當(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前端和各種移動(dòng)終端地位對等，后端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。