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 的速度和流暢
- ofollow,noindex" target="_blank">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 新手上路，大家一起加油鴨！