Cross-platform front-end development system and method based on virtual document object model

Abstract

The invention provides a cross-platform front-end development system and method based on a virtual document object model. The system comprises a Dom generator, a layout controller, an interaction adaptor and an animation controller; aiming at any native platform, the Dom generator generates a Virtual Dom tree by analyzing an input XML, a view control of the native platform is encapsulated in a Virtual Dom tree node, and a Real Dom tree of the native platform is generated; the layout controller calculates an interface layout result based on preset interface layout logic and synchronizes the result into the view control of the native platform; the interaction adaptor recognizes native platform bottom layer input events, and the native platform bottom layer input events are transformed into touch events based on preset gesture control logic and are distributed in the Virtual Dom tree; the animation controller sets attributes of the Virtual Dom tree node based on the preset animation control logic by driving each frame of an animation based on the Virtual Dom. The cross-platform front-end development system and method have thorough cross-platform front-end development characteristics.

Description

technical field [0001] The invention relates to the field of computer technology, in particular to a cross-platform front-end development system and method based on a virtual document object model. Background technique [0002] Existing solutions for front-end cross-platform development are mainly divided into pure webview version and native hybrid development version. Among them, the pure webview version typically includes apache cordova, jquery mobile, etc., and the native hybrid development version includes Facebook, Reactive Native, etc. [0003] The Apache Cordova framework based on pure webview, because the underlying implementation is based on webview, so its application is still a web page in essence, and there are performance and experience deficiencies. Cordova just bridges some call interfaces that interact with native devices by adding a bridge to webview, shielding the difference between iOS and android in terms of device call interfaces. Since cordova does not...

AI Technical Summary

Problems solved by technology

The disadvantage of Reacive Native is that the abstraction of its Virtual Dom on android and iOS is not consistent, because it simply maps the controls of the two platforms into Virtual Dom, and does not completely shield the platform-related difference, which leads to developers having to develop a code for each of the two platforms. Although the development methods are very similar, it is impossible to achieve true cross-platform development

[0005] It can be seen that the disadvantage of cordova is that the essence of web pages and insufficient performance

The disadvantage of Reactive Native is that it does not implement a fully consistent Virtual Dom, and does not truly achieve cross-platform development.

Images