android平台phonegap框架实现原理

最近研究了下phonegap手机快速开发框架原理，重点探究了android平台上的phonegap框架源码，在参考cutesource写的phonegap源码分析后，更加深入理解了phonegap框架原理，其中有些思想或许在以后有帮助，故总结下phonegap框架中关键点。

1.  Phonegap如何实现跨平台？

Phonegap在每个移动平台（iOS、android、blackberry、…）中都实现了一套后台框架，分别与各平台系统API进行交互，从而调用其native API，对应用开发人员提供了统一的JS调用接口，即phonegap API，开发人员只需要采用html、js、css等web技术即可进行移动平台快速开发。

Phonegap的“一次编写，到处运行”是指应用程序开发只需编写前端代码，并且可完全复用到其他平台，复用到其他平台时需要另外搭建相应的开发环境才能运行。

2.  Phonegap框架实现原理

下图借用了cutesource文章中的原图做了小小改动，增加了同步/异步返回流程。

图 Phonegap框架原理图

Phonegap框架实现原理有如下几个关键点：

1)   基于移动终端上内嵌的浏览器即WebView来渲染解析HTML，在phonegap框架的WebView中重点重写了onJsPrompt方法，来捕获前端的业务请求操作（phonegap.js文件中exec函数中的prompt操作），从而将Web前端与后台Java程序连接起来。

2) 基于Plugin的模式来封装调用Native API，用户可以扩展自定义Plugin功能。

3)  同步/异步请求操作的区别：WebView捕获到请求操作后，根据捕获的参数去调用对应的plugin。

如果是同步请求，则直接将结果立即返回到前端，即phonegap.js文件exec函数中

var r = prompt(JSON.stringify(args),"gap:"+JSON.stringify([service, action, callbackId, true]));会立即获得调用返回结果；

如果是异步请求，则将结果存入Callback的链表中，从而通过XHR通道传到前端，即phonegap.js文件PhoneGap.JSCallback函数中

var msg = decodeURIComponent(xmlhttp.responseText);会获得调用返回结果。

4)  CallbackServer监听服务线程

CallbackServer线程在phonegap框架被首次加载时就启动，然后会同时监听前端的XHR请求和链表中有无数据，当有XHR请求来时，若链表为空，线程会最多等待10s，在等待过程如果链表中有数据来，会唤醒等待的线程，从而立即将链表中数据传到前端；若10s后没有数据，则将空数据返回到前端，从而发起下一轮XHR请求；这就是所谓的“基于服务器推技术”模型。如下图phonegap中数据流图。

 

图 Phonegap数据流程图

3.扩展自定义功能插件开发注意事项：

自定义插件类在继承Plugin时，要考虑重写其isSynch方法及其是否异步/同步返回值，否则在使用自定义插件时会出现问题。