【前端】--單頁面應用

單頁面應用

概念

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

工做原理

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

history 對象

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)

state 是狀態對象，能夠用 history.state 讀取；title 表示新頁面的標題，可是如今的全部瀏覽器都會忽略這個字段，因此能夠傳 null；url 是新頁面的地址，必須是和當前頁面在同一個域。當用戶點擊瀏覽器上的前進和後退按鈕時，或者調用上述 window.history 的 back、forward 和 go 方法，就會觸發 popstate 事件。該事件只針對同一個文檔，若是瀏覽歷史的切換致使加載了不一樣的文檔，popstate 事件將不會被觸發。popstate 事件回調函數的參數中的 state 屬性指向 pushState() 和 replaceState() 方法爲當前頁面提供的狀態，也就是 pushState() 和 replaceState() 方法使用時傳的第一個參數 state。

hash

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

優缺點

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

優勢有：

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

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

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

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

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

缺點有：

對 SEO 不太優好，儘管能夠經過 Prerender 預渲染優化等技術解決一部分，可是相對仍是不容易索引到它；易出錯，須要使用程序管理前進、後退、地址欄等信息；