项目开发中基于google的chromium浏览器框架做定制开发,通过node-webkit与nodejs的配合,达到可以使用前端语言(Javascript)进行UI开发,使用C++语言做Native开发,其中的一大重要模块便是基于nodejs的插件系统设计,项目的核心功能都以nodejs插件的形式进行封装,nodejs插件系统便于前端与Native插件之间通信的桥梁。为了在架构上设计更加合理,参考了PhoneGap的架构设计,所以本篇先介绍以下PhoneGap的架构是怎样的。

一、PhoneGap架构分析

1、PhoneGap 介绍

         PhoneGap是一个标准的开源框架,基于HTML,CSS和JavaScript的,创建跨平台移动应用的快速开发平台。它支持iPhone、Android、Palm、Symbian、WP7、Bada和Blackberry等平台。其实本质上来讲,PhoneGap只是加载原生应用的webView外壳,然后将外部的页面进行载入,所以其实际运行效果和通过网页访问效果一致;但因为有webview这个桥梁,所以又可以访问原生接口,这样就解决了HTML5不能访问设备api的问题。

2、PhoneGap运行原理

      它实现跨平台的方式基本上就是使用内置的浏览器内核来运HTML, CSS和Javascript,例如在iOS中就是创建一个UIWebview来加载index.html。

 html,css实现页面布局,通过JavaScript与原生系统API,进行通讯。如下图所示:

插件树插件化架构 插件式开发架构设计_Web

3、PhoneGap架构 

      应用运行在WebView组件上 ->通过PhoneGap在各平台的扩展 ->最终访问设备本地资源。

插件树插件化架构 插件式开发架构设计_PhoneGap_02

4、PhoneGap插件系统结构

           PhoneGap的插件系统主要包括两部分,如下图所示:

 

插件树插件化架构 插件式开发架构设计_Web_03

           CustomPlugin主要是用户定义的javascript脚本模块,由PhoneGap的javascirpt引擎进行解析,它更多的应用在前端。

Custom NativePlugin则是面向原生操作。以下主要对此作介绍!

 

           PhoneGap插件管理采用标准的工厂模式,通过xml进行解析和扩展,从而完成整个工作流的架构。

       主要包含的模块有:

Plugin类:

是所有插件的基类,在其中定义了插件的基本方法,但并不实现

PluginManager类:

插件管理类,完成的功能包括:

①   根据xml文件动态加载插件及插件对象的初始化。

②   使用HASH字典来保存加载的插件。

③   提供标准接口供JS环境调用,并根据调用参数匹配出目标插件(HASH查找),调用目标插件的目标方法。

④   目标插件接口的同步和异步调用方式。

PluginResult类:

结果返回类的标准化,定义了多种返回状态类型,主要返回内容以JSON串的形式体现。

 

 

5、PhoneGap通信过程分析

PhoneGap的通信主要是从应用前端(WebView)到PhoneGap中间层到插件层最后到原生API。

前端到PhoneGap中间层的通信:

①   PhoneGap暴露方法给Web前端:Web前端调用prompt方法,prompt自动调用onJsPrompt方法,PhoneGap中间层重载onJsPrompt方法,从而调用到PhoneGap中间层的方法。

②   以XHR或JSONP的方式实现android端向Web端返回异步调用的结果

 

PhoneGap中间层到插件层:

①   同步调用:直接调用插件的目标方法,执行结果直接返回

②   异步调用:PhoneGap中间层开启一个线程,在线程中执行插件的目标方法;执行结果通过消息发送(sendJavaScript,类似于windows的SendMessage消息机制)的方式返回。

插件层到原生API。

直接调用。