單頁面應用（SPA）

此篇咱們來瞅一瞅SPA，啥是SPA啊，實際上一點也不神祕，就是單頁應用，可能有的同窗又會問了，啥是單頁面應用，彆着急，咱們慢慢來看

首先咱們先來了解一下單頁應用出現背景

背景：

在早期的 Web 應用中，前端的做用很弱，業務邏輯和數據處理都在後端，後端給前端返回一個 HTML 頁面，前端只負責展現。在這種模式下，單個 HTML 頁面被當作一個功能原件，表單提交，超連接跳轉均可以用來從新請求新的 HTML 頁面，從而達到給用戶展現新的頁面的目的。在這種方式中，你能夠感受到頁面老是在不停的刷新，一個點擊可能都須要等待好久，這是由於，當頁面變化時，全部資源都須要從新請求。這些問題致使了用戶體驗不佳，也浪費了資源。單頁應用便很好的解決了這些問題

概念：

什麼是單頁應用呢？單頁應用的全稱是 single-page application，簡稱 SPA，它是一種網站應用的模型，它能夠動態重寫當前的頁面來與用戶交互，而不須要從新加載整個頁面。單頁應用的流暢性讓 Web 應用更像桌面端或 Native 應用了。相對於傳統的 Web 應用，單頁應用作到了先後端分離，後端只負責處理數據提供接口，頁面邏輯和頁面渲染都交給了前端。前端發展到如今，單頁應用的使用已經很普遍，目前時興的 React、Vue、Angular 等前端框架均採用了 SPA 原則。單頁應用意味着前端掌握了主動權，也讓前端代碼更復雜和龐大，模塊化、組件化以及架構設計都變得愈來愈重要

工做原理:

SPA 的一個重要實現就是改變路由時，頁面不刷新。實現這個功能，一般有兩種方式：使用 window.history 對象或 location.hash。

　　

　　window.history 包含了瀏覽器的歷史信息，它有如下幾種經常使用方法：

• • 　　history.back()：與在瀏覽器點擊後退按鈕相同；

• • 　　history.forward()：與在瀏覽器中點擊按鈕向前相同；

• • 　　history.go(n)：接受一個整數做爲參數，移動到該整數指定的頁面，好比 go(1) 至關於 forward()，go(-1) 至關於 back()，go(0) 至關於刷新當前頁面。

  • 　　HTML5 對 history 對象新增了 pushState() 和 replaceState() 方法，這兩個方法能夠往歷史棧中添加數據，給用戶的感受就是瀏覽器的 url 改變了，可是頁面並無從新加載。pushState() 是在瀏覽記錄中添加一個新記錄，replaceState() 則是修改當前的瀏覽器記錄，這是兩者的細微差異，使用時參數的字段和含義都是同樣的。

    window.history.pushState(state, title, url)

　　hash 是 location 對象的屬性，它指的是當前 url 的錨，也就是從 # 號開始的部分。修改 location.hash 並監聽 window 的 hashchange 事件，也能達到一樣的目的。

　　　　SPA 可圈可點，如今已被你們普遍使用，也獲得了主流框架的支持，可是它也有侷限性，咱們將它的優缺點總結以下。

優缺點：

　　優勢有：

• 無刷新體驗，用戶在切換頁面過程當中不會頻繁被「打斷」，由於界面框架都在本地，對用戶的響應很是及時，所以提高了用戶體驗；

• 分離先後端關注點，前端負責界面顯示，後端負責數據存儲和計算，各司其職，不會把先後端的邏輯混雜在一塊兒；

• 減輕服務器壓力，服務器只用出數據就能夠，不用管展現邏輯和頁面合成，吞吐能力會提升幾倍；

• API 共享，同一套後端程序代碼，不用修改就能夠用於Web界面、手機、平板等多種客戶端；

• 徹底的前端組件化，前端開發再也不以頁面爲單位，更多地採用組件化的思想，代碼結構和組織方式更加規範化，便於修改和調整。

 

　　缺點有：

• 對 SEO 不太優好，儘管能夠經過 Prerender 預渲染優化等技術解決一部分，可是相對仍是不容易索引到它；

• 易出錯，須要使用程序管理前進、後退、地址欄等信息；

• 較高的前端開發門檻，對技術能力要求較高，須要對設計模式有必定理解，由於面對不是一個簡單的頁面，而是一個運行在瀏覽器環境裏面的桌面軟件。

　　轉載自：https://www.yuque.com/fe9/basic/ag975a