最近研究了下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方法及其是否异步/同步返回值,否则在使用自定义插件时会出现问题。