Vue系列(1):單頁面應用程序
前言:關於頁面上的知識點,如有侵權,請看 這裏 。
關鍵詞:SPA、單個 HTML 文件、全靠 JS 操作、Virtual DOM、hash/history api 路由跳轉、ajax 響應、按需加載、MVVM
SPA
我們先來看一下在百科上面的解釋吧,emmmm,一般呢,我每次搜索一些不懂的詞,都會習慣先去看百科裏面的解釋,反正我從來都不奢望能看懂,只是指望有個大概的框架的,哈哈~
“單頁面應用(SPA:single-page application),就是只有一張Web頁面的應用,是加載單個HTML頁面並在用戶與應用程序交互時動態更新該頁面的web應用程序。” -- from 百度百科
“單頁應用(英語:single-page application,縮寫 SPA)是一種網絡應用程序或網站的模型,它通過動態重寫當前頁面來與用戶交互,而非傳統的從服務器重新加載整個新頁面。這種方法避免了頁面之間切換打斷用戶體驗,使應用程序更像一個桌面應用程序。在單頁應用中,所有必要的代碼(HTML、JavaScript和CSS)都通過單個頁面的加載而檢索,或者根據需要(通常是為響應用戶操作)動態裝載適當的資源並添加到頁面。盡管可以用位置散列或HTML5歷史API來提供應用程序中單獨邏輯頁面的感知和導航能力,但頁面在過程中的任何時間點都不會重新加載,也不會將控制轉移到其他頁面。與單頁應用的交互通常涉及到與網頁伺服器後端的動態通信。” -- from 維基百科
是不是雲裏霧裏?
What:SPA是什麽?
簡單點~說話的方式簡單點~
- 整個 webapp 只有單個HTML文件,所有操作都在這張頁面上完成,由 js 來按需加載 HTML、CSS 和 JS
- 多個HTML頁面文件的幻覺呢,都是通過 js 來操作 dom 節點來動態實現的(所以跳轉到一個新頁面實質上就是,刪除本頁面 dom 節點,新增新頁面 dom 節點。從這裏呢引出了一個虛擬 dom 的概念,這個以後會說到的)
- 不同頁面之間的跳轉幻覺呢,也是通過 js 控制 hash 或者 history api(go、back) 來進行路由 (這就是一個更加明確前後端分離的賣點了)
- 最後通過 ajax 拉取數據實現響應功能
特點:
- 速度:更好的用戶體驗,讓用戶在 webapp 感受到 native app 的速度和流暢
- MVVM:經典的 MVVM 開發模式,,前後端各負其責
- ajax:業務邏輯全部都在本地操作,數據都需要通過 ajax 同步提交
- 路由:在 URL 中采用 # 號來作為當前視圖的地址(http://xxx.com/#/),改變 # 號後的參數來載入不同的頁面片段。(頁面並不會重載!)
優點:
- 分離前後端關註點,前端負責界面顯示,包括頁面跳轉邏輯;後端則只負責數據管理(存儲和計算),各司其職,不會把前後端的邏輯混雜在一起。
- 減輕服務器的壓力,服務器只用出數據就可以,不用管展示邏輯和頁面合成,吞吐能力提高好幾倍。
- 同一套後端程序代碼/接口,可以多處復用,不僅是同一個應用不用修改就可以用於web界面、手機、平板等多種客戶端,同時也可以復用在不同應用上。
缺點:
- SEO問題:對 SEO 不友好,但是可以通過 Prerender 等技術解決一部分
- 前進、後退、地址欄等,需要程序進行管理
- 書簽,需要程序來進行控制
Why:為什麽要用SPA?
SPA 與 MPA 的對比:
單頁應用程序(SPA) | 多頁應用程序(MPA) | |
---|---|---|
SPA如圖 : MPA如圖 : |
||
應用組成 | 一個外殼頁面和多個頁面片段組成 | 由多個完整頁面構成 |
跳轉方式 | 片段跳轉:把一個頁面片段刪除或者隱藏,加載另一個頁面片段並顯示出來。這是片段之間的模擬跳轉,並沒有離開殼頁面 | 頁面跳轉:從一個頁面跳轉到另一個頁面 |
URL模式 | http://xxx.com/index.html#page1 http://xxx.com/index.html#page2 |
http://xxx.com/page1.html http://xxx.com/page2.html |
刷新方式 | 頁面片段局部刷新 | 整頁刷新 |
跳轉後公共資源是否重載 | 否 | 是 |
頁面間傳遞數據 | 因為在一個頁面上,所以可以設置全局常量來記錄這些固定的數據,所以頁面片段傳遞數據很容易實現 | 依賴 URL, cookie, localStorage,實現麻煩 |
頁面切換轉場畫面 | 容易實現 | 無法實現 |
用戶體驗 | 頁面片段間切換快,轉場畫面佳,用戶體驗好,包括在移動設備上 | 頁面間切換加載慢,不流暢,用戶體驗差,特別是在移動設備上 |
SEO | 需要單獨方案做,有點麻煩 | 可以直接做 |
特別適用範圍 | 對體驗要求高的應用,特別是移動應用 | 需要對搜索引擎友好的網站 |
開發難度 | 高一些,MVVM 模式框架 | 低一些,框架選擇容易 |
維護成本 | 相對容易 | 相對復雜 |
How:怎麽實現 SPA ?
MVVM框架: 諸如 AngularJS、Vue.js、React、Ember.js、Meteor.js、ExtJS 等面向網頁瀏覽器的 JavaScript 框架采納了單頁應用(SPA)原則。
目前聽到最多的還是前面的三大框架:Angular、Vue 和 React。
當然,本系列我們還是主要討論Vue,而且我也還要一邊鞏固熟練使用 Vue ,一邊 Angular 新手上路,大家一起加油鴨!
Vue系列(1):單頁面應用程序