【尚武科技APP開發(fā)原創(chuàng)內(nèi)容】這段時間石家莊很多APP開發(fā)的客戶做的一次分享會上很多客戶，首先我們應該知道混合開發(fā)應用場景到底是什么，為什么要用混合開發(fā)：1、集合優(yōu)勢——如用 Hybrid 開發(fā)方法，就能集Native 和web兩者之所長。一方面，Native 讓開發(fā)者可以充分利用設(shè)備所提供的全部不同的特性和功能。另一方面，Web 語言編寫的所有代碼都可以在不同的移動平臺使用，使得開發(fā)和日常維護過程變得集中式、更簡短、更經(jīng)濟高效。2、HTML5的可用性和功能都在迅速改進。會成為開發(fā)前端 App 的默認技術(shù)。用 HTML 來編寫 App 的大部分代碼，在需要時才使用 Native 代碼，確保今天的投入在明天不會變得過時， HTML 功能變豐富，可以滿足現(xiàn)代企業(yè)一系列更廣泛的要求。
接下來系統(tǒng)的了解一下混合開發(fā)框架和層次結(jié)構(gòu)圖
APP混合開發(fā)結(jié)構(gòu)圖
1）移動終端web殼：是使用操作系統(tǒng)的 API 來創(chuàng)建嵌入式 HTML的渲染引擎。主要功能是定義Android應用程序與網(wǎng)頁之間的接口，允許網(wǎng)頁中的JavaScript調(diào)用Android應用程序，提供基于web的應用程序的Android API，將Web嵌入到Android應用程序中。
2）前端交互js：包括基礎(chǔ)功能js和業(yè)務(wù)功能js。
3）前端適配器：適配不同的終端：Pad、android、ios、wap。
接下來我們最關(guān)心的莫過于性能優(yōu)化的問題了：
1、 單個頁面，我們觀察登錄、首頁以及共用代碼（樣式文件、JS文件、頁面加載loading代碼）等放在index頁面里。頁面展示前顯示fake頁面（過場頁面），首屏加載完后，fake頁面消失。頁面雖然按照業(yè)務(wù)模塊分為不同的頁面，但是展示的時候會在同一個頁面即index頁面展示。具體的說，需要某個功能頁面的時候?qū)㈨撁嬉訟JAX的形式請求到index頁面，使用完畢刪除。
使用一個頁面，公共的CSS和JS只會加載一次。
2）CSS、JavaScript
一般情況下，在本次混合開發(fā)框架開發(fā)中，CSS全部寫在一個文件里。CSS和Jquery Mobile的相關(guān)文件寫在index頁面頭部，其余公用JS等寫在index頁面底部。防止JS阻塞頁面加載。各業(yè)務(wù)邏輯JS寫在各業(yè)務(wù)頁面的底部。開發(fā)完成后，CSS和JS需要進行壓縮，減少用戶使用時初次請求時間。這個是開發(fā)很關(guān)鍵的因素。
3） @font-face
混合開發(fā)中使用@font-face來實現(xiàn)圖標字體化，統(tǒng)一控制圖標的顏色和大小。優(yōu)點在于可以：減少頁面因使用圖片而帶來的流量，大大縮短頁面響應時間；圖標可以隨意改變大小和顏色，而不會導致失真。
4） 本地存儲LocalStorage，HTML5本地存儲LocalStorage，在混合開發(fā)中主要用來存儲最近查詢記錄等。首頁最近查詢來說，用戶每次在綜合查詢中點擊一個模塊，通過LocalStorage將圖標和對應的功能名字存儲起來，如果用戶不清除，LocalStorage中的數(shù)據(jù)是一直存在本地的。下次打開應用的時候從LocalStorage中讀取最近查詢記錄等。這樣可以大大的優(yōu)化整個流程。
使用LocalStorage的好處是，不進行后臺交互，速度快。
5）異步AJAX
通過使用AJAX，顯示頁面時，先顯示框架，然后異步加載內(nèi)容；其次，分頁功能中，先顯示部分簡項列表，上拉獲取更多內(nèi)容。再次，每打開一個新功能，頁面以AJAX的形式獲取新頁面的內(nèi)容并展示出來。交互體驗更好。從性能的角度考慮，速度也更快。
今天我們比較系統(tǒng)的讓用戶從系統(tǒng)結(jié)構(gòu)上面去了解APP混合開發(fā)框架的體系結(jié)構(gòu)，就是讓用戶更清晰的認識混合開發(fā)和更深入了解。