PhoneGap架构介绍及NodeJS插件系统设计(一)

  项目开发中基于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，进行通讯。如下图所示：

3、PhoneGap架构 

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

4、PhoneGap插件系统结构

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

 

           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。

直接调用。