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）：單頁面應用程序