原文：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 新手上路，大家一起加油鴨！

總結

以上是生活随笔為你收集整理的什么是单页面应用程序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。