SPA單頁面應用

什麼是單頁應用

• 單頁Web應用，就是隻有一張Web頁面的應用。瀏覽器一開始會加載必需的HTML、CSS和JavaScript，以後全部的操做都在這張頁面完成，這一切都由JavaScript來控制。所以，單頁Web應用會包含大量的JS代碼，模塊化開發和架構設計的重要性不言而喻。

單頁應用得優點

• 操做體驗流暢，媲美本地應用的感受，切換過程當中不會頻繁有被「打斷」的感受。
  由於界面框架都在本地，與服務端的通信基本只有數據，因此便於遷移，能夠用比較小的代價，遷移成桌面產品，或者各類移動端Hybrid產品。
• 徹底的前端組件化，前端開發再也不以頁面爲單位，更多地採用組件化的思想，代碼結構和組織方式更加規範化，便於修改和調整；
• API 共享，若是你的服務是多端的（瀏覽器端、Android、iOS、微信等），單頁應用的模式便於你在多個端共用 API，能夠顯著減小服務端的工做量。容易變化的 UI 部分都已經前置到了多端，只受到業務數據模型影響的 API，更容易穩定下來，便於提供更棒的服務；
• 組件共享，在某些對性能體驗要求不高的場景，或者產品處於快速試錯階段，藉助於一些技術（Hybrid、React Native），能夠在多端共享組件，便於產品的快速迭代，節約資源。

單頁應用得缺點

• 首次加載大量資源，要在一個頁面上爲用戶提供產品的全部功能，在這個頁面加載的時候，首先要加載大量的靜態資源，這個加載時間相對比較長；
• 對搜索引擎不友好，由於界面的絕大部分都是動態生成的，因此搜索引擎很不容易索引它。
• 開發難度相對較高，開發者的JavaScript技能必須過關，同時須要對組件化、設計模式有所認識，他所面對的再也不是一個簡單的頁面，而是一個運行在瀏覽器環境中的桌面軟件。

開發框架

• 爲解決大規模單頁應用代碼邏輯問題，出現了很多MV*（MVC、MVP、MVVM）框架，他們的基本思路都是在JS層建立模塊分層和通訊機制，爲單頁面應用開發提供了必需的模版、路徑解析和處理、後臺服務api訪問、DOM操做等功能。這類框架包括Vue（Vue-router），Backbone，Knockout，AngularJS，Avalon等，並且，它們幾乎都在這些模式上產生了變異，以適應前端開發的特色。mvc、mvp、mvvm使用關係總結
• 框架能極大的提升咱們開發的便利，可是框架通常都限制過多，因此咱們也能夠拋棄框架，直接寫原生代碼。

代碼隔離

• 單頁應用比頁面型網站更加依賴於JavaScript，因爲頁面的單頁化，各類子功能的JavaScript代碼彙集到了同一個做用域，因此代碼的隔離、模塊化變得很重要。

代碼合併與加載策略

• 把更多的公共功能放到首次加載，以減小每次加載的載入量。
• 在單頁應用中，無需像網站型產品同樣，爲了防止文件加載阻塞渲染，把js放到html後面加載，由於它的界面基本都是動態生成的。

路由與狀態的管理

• 單頁應用中，由於界面上的各類功能區塊是動態生成的，因此須要把產品功能劃分爲若干狀態，每一個狀態映射到相應的路由，而後經過根據不一樣的url路徑動態解析路由，匹配功能界面。

緩存與本地存儲

• 在單頁應用的運做機制中，緩存是一個很重要的環節。
• 因爲這類系統的前端部分幾乎全是靜態文件，因此它可以有機會利用瀏覽器的緩存機制，而好比動態加載的界面模板，也徹底能夠作一些自定義的緩存機制，在非首次的請求中直接取緩存的版本，以加快加載速度。
• 在單頁產品中，業務代碼也經常會須要跟本地存儲打交道，存儲一些臨時數據，可使用localStorage或者localStorageDB來簡化本身的業務代碼。

服務端通訊

• 傳統的Web產品一般使用JSONP或者AJAX這樣的方式與服務端通訊，但在單頁Web應用中，有很大一部分採用WebSocket這樣的實時通信方式。

• WebSocket與傳統基於HTTP的通訊機制相比，有很大的優點。它可讓服務端很便利地使用反向推送，前端只響應確實產生業務數據的事件，減小一遍又一遍無心義的AJAX輪詢。

• 因爲WebSocket只在比較先進的瀏覽器上被支持，有一些庫提供了在不一樣瀏覽器中的兼容方案，好比socket.io，它在不支持WebSocket的瀏覽器上會降級成使用AJAX或JSONP等方式，對業務代碼徹底透明、兼容。

內存管理

• 傳統的Web頁面通常是不須要考慮內存的管理的，由於用戶的停留時間相對少，即便出現內存泄漏，可能很快就被刷新頁面之類的操做沖掉了，但單頁應用是不一樣的，它的用戶極可能會把它開一成天，所以，咱們須要對其中的DOM操做、網絡鏈接等部分格外當心。

樣式的規劃

在單頁應用中，由於頁面的集成度高，全部頁面彙集到同一做用域，樣式的規劃也變得重要了。
樣式規劃主要是幾個方面：

1. 基準樣式的分離

• 這裏面主要包括瀏覽器樣式的重設、全局字體的設置、佈局的基本約定和響應式支持。

2. 組件樣式的劃分

• 這裏面是兩個層面的規劃，首先是各類界面組件及其子元素的樣式，其次是一些修飾樣式。組件樣式應當儘可能減小互相依賴，各組件的樣式容許冗餘。

3. 堆疊次序的管理

• 傳統Web頁面的特色是元素多，可是層次少，單頁應用會有些不一樣。

• 在單頁應用中，須要提早爲各類UI組件規劃堆疊次序，也就是z-index，好比說，咱們可能會有各類彈出對話框，浮動層，它們可能組合成各類堆疊狀態。新的對話框的z-index須要比舊的高，才能確保蓋在它上面。

vue + vue-router單頁實例

• html

<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h1>Hello App!</h1> <p> <!-- 使用 router-link 組件來導航. --> <!-- 經過傳入 `to` 屬性指定連接. --> <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 --> <router-link to="/foo">Go to Foo</router-link> <router-link to="/bar">Go to Bar</router-link> </p> <!-- 路由出口 --> <!-- 路由匹配到的組件將渲染在這裏 --> <router-view></router-view> </div> 

• js

// 0. 若是使用模塊化機制編程，導入Vue和VueRouter，要調用 Vue.use(VueRouter) // 1. 定義（路由）組件。 // 也能夠從其餘文件 import 進來 const Foo = { template: '<div>foo</div>' } const Bar = { template: '<div>bar</div>' } // 2. 定義路由 // 每一個路由應該映射一個組件。 其中"component" 能夠是 // 經過 Vue.extend() 建立的組件構造器， // 或者，只是一個組件配置對象。 const routes = [ { path: '/foo', component: Foo }, { path: '/bar', component: Bar } ] // 3. 建立 router 實例，而後傳 `routes` 配置 // 你還能夠傳別的配置參數, 不過先這麼簡單着吧。 const router = new VueRouter({ routes // （縮寫）至關於 routes: routes }) // 4. 建立和掛載根實例。 // 記得要經過 router 配置參數注入路由， // 從而讓整個應用都有路由功能 const app = new Vue({ router }).$mount('#app') // 如今，應用已經啓動了！