【尚武科技APP開(kāi)發(fā)原創(chuàng)內(nèi)容】這段時(shí)間石家莊很多APP開(kāi)發(fā)的客戶(hù)做的一次分享會(huì)上很多客戶(hù)，首先我們應(yīng)該知道混合開(kāi)發(fā)應(yīng)用場(chǎng)景到底是什么，為什么要用混合開(kāi)發(fā)：1、集合優(yōu)勢(shì)——如用 Hybrid 開(kāi)發(fā)方法，就能集Native 和web兩者之所長(zhǎng)。一方面，Native 讓開(kāi)發(fā)者可以充分利用設(shè)備所提供的全部不同的特性和功能。另一方面，Web 語(yǔ)言編寫(xiě)的所有代碼都可以在不同的移動(dòng)平臺(tái)使用，使得開(kāi)發(fā)和日常維護(hù)過(guò)程變得集中式、更簡(jiǎn)短、更經(jīng)濟(jì)高效。2、HTML5的可用性和功能都在迅速改進(jìn)。會(huì)成為開(kāi)發(fā)前端 App 的默認(rèn)技術(shù)。用 HTML 來(lái)編寫(xiě) App 的大部分代碼，在需要時(shí)才使用 Native 代碼，確保今天的投入在明天不會(huì)變得過(guò)時(shí)， HTML 功能變豐富，可以滿(mǎn)足現(xiàn)代企業(yè)一系列更廣泛的要求。

       接下來(lái)系統(tǒng)的了解一下混合開(kāi)發(fā)框架和層次結(jié)構(gòu)圖

       APP混合開(kāi)發(fā)結(jié)構(gòu)圖

       1）移動(dòng)終端web殼：是使用操作系統(tǒng)的 API 來(lái)創(chuàng)建嵌入式 HTML的渲染引擎。主要功能是定義Android應(yīng)用程序與網(wǎng)頁(yè)之間的接口，允許網(wǎng)頁(yè)中的JavaScript調(diào)用Android應(yīng)用程序，提供基于web的應(yīng)用程序的Android API，將Web嵌入到Android應(yīng)用程序中。

       2）前端交互js：包括基礎(chǔ)功能js和業(yè)務(wù)功能js。

       3）前端適配器：適配不同的終端：Pad、android、ios、wap。

       接下來(lái)我們最關(guān)心的莫過(guò)于性能優(yōu)化的問(wèn)題了：

       1、 單個(gè)頁(yè)面，我們觀(guān)察登錄、首頁(yè)以及共用代碼（樣式文件、JS文件、頁(yè)面加載loading代碼）等放在index頁(yè)面里。頁(yè)面展示前顯示fake頁(yè)面（過(guò)場(chǎng)頁(yè)面），首屏加載完后，fake頁(yè)面消失。頁(yè)面雖然按照業(yè)務(wù)模塊分為不同的頁(yè)面，但是展示的時(shí)候會(huì)在同一個(gè)頁(yè)面即index頁(yè)面展示。具體的說(shuō)，需要某個(gè)功能頁(yè)面的時(shí)候?qū)㈨?yè)面以AJAX的形式請(qǐng)求到index頁(yè)面，使用完畢刪除。

       使用一個(gè)頁(yè)面，公共的CSS和JS只會(huì)加載一次。

       2）CSS、JavaScript
       一般情況下，在本次混合開(kāi)發(fā)框架開(kāi)發(fā)中，CSS全部寫(xiě)在一個(gè)文件里。CSS和Jquery Mobile的相關(guān)文件寫(xiě)在index頁(yè)面頭部，其余公用JS等寫(xiě)在index頁(yè)面底部。防止JS阻塞頁(yè)面加載。各業(yè)務(wù)邏輯JS寫(xiě)在各業(yè)務(wù)頁(yè)面的底部。開(kāi)發(fā)完成后，CSS和JS需要進(jìn)行壓縮，減少用戶(hù)使用時(shí)初次請(qǐng)求時(shí)間。這個(gè)是開(kāi)發(fā)很關(guān)鍵的因素。

       3） @font-face
       混合開(kāi)發(fā)中使用@font-face來(lái)實(shí)現(xiàn)圖標(biāo)字體化，統(tǒng)一控制圖標(biāo)的顏色和大小。優(yōu)點(diǎn)在于可以：減少頁(yè)面因使用圖片而帶來(lái)的流量，大大縮短頁(yè)面響應(yīng)時(shí)間；圖標(biāo)可以隨意改變大小和顏色，而不會(huì)導(dǎo)致失真。

       4） 本地存儲(chǔ)LocalStorage，HTML5本地存儲(chǔ)LocalStorage，在混合開(kāi)發(fā)中主要用來(lái)存儲(chǔ)最近查詢(xún)記錄等。首頁(yè)最近查詢(xún)來(lái)說(shuō)，用戶(hù)每次在綜合查詢(xún)中點(diǎn)擊一個(gè)模塊，通過(guò)LocalStorage將圖標(biāo)和對(duì)應(yīng)的功能名字存儲(chǔ)起來(lái)，如果用戶(hù)不清除，LocalStorage中的數(shù)據(jù)是一直存在本地的。下次打開(kāi)應(yīng)用的時(shí)候從LocalStorage中讀取最近查詢(xún)記錄等。這樣可以大大的優(yōu)化整個(gè)流程。

       使用LocalStorage的好處是，不進(jìn)行后臺(tái)交互，速度快。

       5）異步AJAX
       通過(guò)使用AJAX，顯示頁(yè)面時(shí)，先顯示框架，然后異步加載內(nèi)容；其次，分頁(yè)功能中，先顯示部分簡(jiǎn)項(xiàng)列表，上拉獲取更多內(nèi)容。再次，每打開(kāi)一個(gè)新功能，頁(yè)面以AJAX的形式獲取新頁(yè)面的內(nèi)容并展示出來(lái)。交互體驗(yàn)更好。從性能的角度考慮，速度也更快。

       今天我們比較系統(tǒng)的讓用戶(hù)從系統(tǒng)結(jié)構(gòu)上面去了解APP混合開(kāi)發(fā)框架的體系結(jié)構(gòu)，就是讓用戶(hù)更清晰的認(rèn)識(shí)混合開(kāi)發(fā)和更深入了解。