囉嗦

最近學習Vue，實現了一個簡單的應用，也對前後端分離有了不同的認識，但在這之前，還是對使用Vue做開發認識侷限於傳統Web開發。如果也有這種感覺的話，這篇文章十分適合你。

這裡我將說下單頁面應用於傳統web應用，先來看張圖：

（畫圖工具畫的，有推薦的，可以寫在評論區，O(∩_∩)O謝謝）

傳統 web 應用，通過瀏覽器URL的不同，渲染不同的html ；單頁面應用，通過通過AJAX訪問資料API，後通過不同的實現方式，渲染介面，常見的 component 方式。

單頁面應用，類似於移動客戶端開發，通過呼叫資料API實現

單頁面應用

單頁面應用（SPA）是旨在對Web應用發動革命的軟體運動中可信度很高的一種。此類應用有望進行更加模組化的開發，令應用更加容易地適配與多個裝置，並擁有更好的應用生命週期管理—這些幾乎是軟體架構師希望的全部。（百度百科）

什麼鬼？！不過寫的不錯，比如：

• 模組化
• 適配
• 生命週期管理

我自己的理解 , 單頁面應用（Single Page Application - SPA） ，通過一個入口（index.html），一次性載入（懶載入）所需的資源（js , css , img , font），所有操作通過 js 實現，包括 路由機制、網路請求和介面渲染 ，使用期間無需重新載入其他頁面。

懶載入 ： 用的時候，再去載入

如下圖所示：

問題 ：怎麼實現 如圖最底層的模組？

目前常見的如 Angular , React , Vue , 不常見的 Ember , Knockout , Polymer

優勢：

• 前後端分離，架構清晰
• 前端單獨開發，單獨測試
• 良好的互動體驗，區域性渲染，避免不必要的跳轉和渲染
• 通過API方式獲取資料，減少伺服器壓力

架構

一個好的開發架構，不管是在維護還是開發都會是事半功倍，如果在需求不明確的情況下，也是推薦使用SPA開發，因為不管是新增還是刪減功能，都會是十分容易，說不定專案會越做越大。

這篇文章中的，也是最常見的一種架構，文章寫得不錯，推薦下。

簡單工作流

一個好的工作流可以讓開發事半功倍。

• 進行產品功能、原型設計
• 後端資料庫設計
• 根據產品確定前後端的API（or RESTful API），以文件方式紀錄
• 前後端就可以針對API文件同時進行開發
• 前後端最後進行連線測試

完