1. 程式人生 > >Vue系列(1):單頁面應用程序

Vue系列(1):單頁面應用程序

str from logs 引擎 每次 應用 跳轉方式 新手上路 為什麽

前言:關於頁面上的知識點,如有侵權,請看 這裏 。

關鍵詞: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):單頁面應用程序