[发明专利]基于虚拟文档对象模型的跨平台前端开发系统及方法

说明书

本发明提供一种基于虚拟文档对象模型的跨平台前端开发系统及方法，系统包括：Dom生成器、布局控制器、交互适配器和动画控制器；针对任一原生平台：Dom生成器通过解析输入的XML生成Virtual Dom树，并通过在Virtual Dom树节点中封装该原生平台的视图控件，生成该原生平台的Real Dom树；布局控制器基于预设的界面布局逻辑计算界面布局结果并同步到该原生平台的视图控件中；交互适配器识别该原生平台底层输入事件，基于预先设置的手势控制逻辑将原生平台底层输入事件转换为触摸事件并在Virtual Dom树中分发；动画控制器基于预先设置的动画控制逻辑通过驱动基于Virtual Dom的动画的每一帧来设置Virtual Dom树节点的属性。本发明具备彻底的跨平台前端开发特性。

技术领域

本发明涉及计算机技术领域，尤其涉及一种基于虚拟文档对象模型的跨平台前端开发系统及方法。

背景技术

现有的针对前端跨平台开发的解决方案主要分为纯webview的版本和原生化混合开发的版本。其中纯webview的版本典型有apache cordova、jquery mobile等，原生化混合开发的版本有Facebook、Reactive Native等。

基于纯webview的apache cordova框架，由于底层实现基于webview，因此其应用本质上仍然是网页，存在性能和体验上的不足。cordova只是通过为webview增加bridge的方式桥接了一些和原生设备交互的调用接口，屏蔽了iOS和android在设备调用接口方面的差异，由于cordova并没有在界面，布局和动画上做更多实现，因此并不是一个完备的跨平台开发框架。

基于原生化混合开发的Reactive Native框架，由于基于原生的渲染容器实现，因此具备更加流畅的交互体验，相比cordova有更好的性能。Reacive Native的缺点在于它的Virtual Dom在android和iOS上的抽象并不一致，这是因为它仅仅是简单的将两个平台各自的控件做了简单的映射变成Virtual Dom，并没有彻底屏蔽平台相关的差异，这就导致了开发人员不得不针对两个平台各自开发一份代码，虽然开发的方法很相似，但却无法实现真正意义的跨平台开发。

可见，cordova的缺点在于本质上网页、性能不足。而Reactive Native的缺点在于没有实现完全一致的Virtual Dom，没有真正实现跨平台开发。

鉴于此，如何实现跨平台前端开发成为目前需要解决的技术问题。

发明内容

为解决上述的技术问题，本发明实施例提供一种基于虚拟文档对象模型的跨平台前端开发系统及方法，用于实现跨平台前端开发。

第一方面，本发明实施例提供一种基于虚拟文档对象模型的跨平台前端开发系统，包括：Dom生成器、布局控制器、交互适配器和动画控制器；其中，针对任一原生平台：

所述Dom生成器，用于通过解析输入的XML生成虚拟文档对象模型Virtual Dom树，并通过在所述Virtual Dom树的节点中封装所述原生平台的视图控件，生成所述原生平台的真实文档对象模型Real Dom树；

所述布局控制器，用于基于预先设置的界面布局逻辑计算界面布局结果，并将所述界面布局结果同步到所述原生平台的视图控件中；

所述交互适配器，用于识别所述原生平台底层的输入事件，基于预先设置的手势控制逻辑将所述原生平台底层的输入事件转换为触摸事件，并将所述触摸事件在所述Virtual Dom树中进行分发；

所述动画控制器，用于基于预先设置的动画控制逻辑，通过驱动基于Virtual Dom的动画的每一帧来设置所述Virtual Dom树的节点的属性；