[发明专利]一种前端组件与后端组件转换的方法及装置

说明书

本申请提供一种前端组件与后端组件转换的方法及装置，涉及软件开发技术领域，解决了在JS UI开发框架中，大颗粒度的前端组件无法直接自动转换到较小颗粒度的后端组件的问题。该方法包括：对JS页面文件进行解析，得到JS页面中包括的每个组件对应的标签、样式、事件或者属性；根据JS页面中包括的每个组件创建文档对象模型DOM节点，并根据JS页面的布局结构，得到DOM节点树；将每个DOM节点与对应的多个后端组件进行映射，并将每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上。

本申请要求于2020年11月16日提交国家知识产权局、申请号为202011280677.7、申请名称为“一种前端组件与后端组件转换的方法及装置”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。

技术领域

本申请涉及软件开发技术领域，尤其涉及一种前端组件与后端组件转换的方法及装置。

背景技术

软件开发过程主要包括前端开发与后端开发，其中，基于JavaScript(JS)的用户界面(User Interface，UI)设计框架是一种跨设备的高性能UI开发框架，支持声明式编程和跨设备多态UI，通过建立网站web设计的前端组件与后端组件的转换桥梁，使得开发者能够基于JavaScript前端进行设计，实现快速、高效地进行软件开发。并且，开发出来的web应用能够运行在不同的平台和设备上。

目前，可以通过Flutter框架中的多个微件Widget直接描述每个前端组件的布局和样式，UI设计灵活性较高，应用开发的成本和难度较高。另外，可以采用前端组件与后端组件的一对一映射的转换方法，即通过现有前端组件与后端组件进行一对一的转换。但是在JS UI开发框架中，前端组件和后端组件在设计实现上的颗粒度划分的大小不同，如后端组件实现功能单一，颗粒度较细，而前端组件功能较为丰富，颗粒度大，因此，导致JS UI开发框架中大颗粒度的前端组件无法直接对较细颗粒度的后端组件进行转换。

此外，开发者给前端组件设置通用属性和样式等，但是对应的后端组件没有对应设置的应用程序接口(Application Programming Interface，API)接口，导致设置的通用属性和样式在后端组件上无法生效。另外，上述技术方案中，前端组件不支持组件的扩展，即后端组件包括什么能力，前端组件就对应的具备这种能力，当前端组件需要设计一些页面显示的动效等额外功能时，上述前端组件与后端组件一对一转换的技术无法实现，扩展性较差。

发明内容

本申请提供一种前端组件与后端组件转换的方法及装置，解决了在JS UI开发框架中，大颗粒度的前端组件无法直接转换到较小颗粒度的后端组件的问题。

为达到上述目的，本申请采用如下技术方案：

第一方面，提供一种前端组件与后端组件转换的方法，该方法包括：对JS页面文件进行解析，得到所述JS页面中包括的每个组件对应的标签、样式、事件或者属性；根据所述JS页面中包括的每个组件创建文档对象模型DOM节点，并根据所述JS页面的布局结构，得到DOM节点树；将每个DOM节点与对应的多个后端组件进行映射，并将所述每个组件对应的标签、样式、事件或者属性设置到对应的所述多个后端组件上。

上述技术方案中，通过使用前端组件到后端组件一对多的转换技术，可以自动完成web前端大颗粒度的前端组件到小颗粒度的后端组件的转换，开发者只需要基于web前端进行JS页面开发，而不需要开发者手工设计和拼接前端组件与后端组件，整个转换过程可以由开发框架自动完成，从而降低了开发的难度和成本。开发者能够基于较为流行的前端开发范式进行快速高效开发，复用前端web的相关技术，提升开发效率。

在一种可能的实现方式中，将每个DOM组件与对应的多个后端组件进行映射，具体包括：若DOM组件有对应的后端组件，则DOM组件对应的后端组件由Composed组件与DOM组件对应的至少一个后端组件按照组件树的层次结构组成。