Phonegap已把原始碼提交到apache，成為一個非常受關注的開源框架cordova，它的跨平臺的特性有點當年Java的味道和勢頭，成為移動平臺上比較主流的解決方案。今日品味了一下它在android端的原始碼，看看它到底是如何結合native和web的。

首先我們總體上看看phonegap給我們提供的主要特性：

• 在本地儲存和渲染HTML
• 以Native App的方式來執行
• 用JS呼叫Native功能

對於這樣一款產品，如果讓我開發，我感覺最優先要解決的問題是：

• 如何執行和渲染HTML
• web端如何高效地呼叫Native API（同步和非同步）
• 提供怎樣的擴充套件機制來相容新出的Native功能

從上圖我們看出它架構上的關鍵點：

• 基於WebView來渲染HTML
• 基於Plugin的模式來封裝Native API，包括Phonegap本身提供的和開發者自己定製的
• 以覆蓋prompt方法的形式來實現Web端對Android端的呼叫
• 以XHR或JSONP的方式來實現Android端向Web端返回非同步呼叫的結果

1）基於WebView來渲染HTML

這點比較簡單，大家都想得到，它實際上就是個內嵌的瀏覽器，各個移動平臺也提供了這樣的元件，在Android上就是WebView。

但Phonegap對WebView做了些改造，它通過擴充套件WebViewClient和WebChromeClient改變了些標準行為，它用CordovaWebViewClient擴充套件WebViewClient，並複寫shouldOverrideUrlLoading、onPageStarted、onPageFinished等方法，使得它擴充套件了web純url網頁呼叫的行為，具備了通過geo:xxx呼叫intent，通過sms:xxx發簡訊等能力。另外，它用CordovaChromeClient擴充套件WebChromeClient，並複寫了onJsAlert、onJsConfirm等方法，用Native的風格的視窗來相應js端alert、confirm的呼叫，使其更像是一個native的程式。更關鍵的是它複寫了prompt，並通過這個方法來實現js對android端的呼叫，下面會詳細談這點。

總之，它就是基於CordovaWebViewClient和CordovaChromeClient擴充套件了WebView，使其具備標準的HTML執行渲染能力外，更具備Native化的樣式和能力。這塊的程式碼我就不具體去講了，比較簡單。

2）基於Plugin的模式來封裝Native API

這點也比較簡單，但凡想讓使用者去擴充套件，都會想到以Plugin的模式來構架，http://wiki.phonegap.com/w/page/36752779/PhoneGap%20Plugins，這篇官方文件比較詳細地講解了如何使用和開發Plugin。

它的結構也比較扁平，總共三個類Plugin, PluginManager和PluginResult，一個配置檔案plugin.xml，具體職責我就不多說，看看名字就知道了。

3）以覆蓋prompt方法的形式來實現Web端對Android端的呼叫

這點是我學這個框架最想看的地方，雖然有點失望（感覺有點猥瑣），但還是比較實用和直接。

WebChromeClient提供了一個onJsPrompt方法，這個方法是當web端呼叫prompt方法時就會調到。於是乎，它就把這個方法給改了，改成Android向Web端暴露的介面，當Web要呼叫任何Android(Java)端的方法時，就調prompt，onJsPrompt被調後，它再去解析引數來代理後續的行為。這時，它就主要是呼叫Plugin，通過Plugin來滿足Web端的需求。時序圖如下圖所示：

前面比較好理解，但最後一步為啥要向一個server sendJavascript呢？這就是它實現非同步呼叫的機制。

4）以XHR或JSONP的方式來實現Android端向Web端返回非同步呼叫的結果

同步呼叫就不多說了，它沒有上面時序圖的最後一步，plugin.execute後就直接返回結果，通過JsPromptResult.confirm向js回撥。

而非同步呼叫是這個框架裡難度最大的一個，而卻是Native API呼叫大部分的適用場景，比如Camera，這都會啟動Native端其他程式，等這些程式操作完了後，還需要得到它們的執行結果，比如拿到拍照後的相片。

Phonegap實際上是基於長揹包的方式來實現Android端向web端的反推。長揹包我就不多解釋了，查查comet就能瞭解，它的機制就是在web端發起ajax的週期性呼叫，Android端起一個本地Socket Server，並保持一個JS佇列，如果有請求來，它就把佇列裡的JS返回，web端再執行這個JS，通過這個方式模擬了Android端向web端推動執行結果。而上圖中的sendJavascript實際上就是把執行結果用JSON的形式存在佇列裡等著web端來取。

但XHR（或Ajax）有跨域的限制，比如如果web端的html不是本地的file而是從遠端（URL）下載下來的，那麼它就不能向本地的server發起ajax請求（因為不同域），所以它提供了一個備選方案：JSONP，這也是一個標準的解決ajax跨域的方案，實際上就是把JS下載下來執行，這個就不多說了，可以通過關鍵字JSONP繼續深究。

總的來說，這塊採用的還是比較通用的解決方案，不過值得考量的是，這樣頻繁的輪詢ajax是否會對效能和電池有所影響，除此之外，基本和直接Native程式是差不多的，這比直接呼叫HTML5確實優化不少。

這是我對phonegap在android端的原始碼分析，後面還想再看看在IOS和Windows Phone上是如何實現的，不過我得趕緊熟悉一下Objective-C和C#，分析完後再後續跟上。