一种前端组件与后端组件转换的方法及装置制造方法及图纸

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

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


[0002]本申请涉及软件开发
，尤其涉及一种前端组件与后端组件转换的方法及装置。

技术介绍

[0003]软件开发过程主要包括前端开发与后端开发，其中，基于JavaScript(JS)的用户界面(User Interface，UI)设计框架是一种跨设备的高性能UI开发框架，支持声明式编程和跨设备多态UI，通过建立网站web设计的前端组件与后端组件的转换桥梁，使得开发者能够基于JavaScript前端进行设计，实现快速、高效地进行软件开发。并且，开发出来的web应用能够运行在不同的平台和设备上。
[0004]目前，可以通过Flutter框架中的多个微件Widget直接描述每个前端组件的布局和样式，UI设计灵活性较高，应用开发的成本和难度较高。另外，可以采用前端组件与后端组件的一对一映射的转换方法，即通过现有前端组件与后端组件进行一对一的转换。但是在JS UI开发框架中，前端组件和后端组件在设计实现上的颗粒度划分的大小不同，如后端组件实现功能单一，颗粒度较细，而前端组件功能较为丰富，颗粒度大，因此，导致JS UI开发框架中大颗粒度的前端组件无法直接对较细颗粒度的后端组件进行转换。
[0005]此外，开发者给前端组件设置通用属性和样式等，但是对应的后端组件没有对应设置的应用程序接口(Application Programming Interface，API)接口，导致设置的通用属性和样式在后端组件上无法生效。另外，上述技术方案中，前端组件不支持组件的扩展，即后端组件包括什么能力，前端组件就对应的具备这种能力，当前端组件需要设计一些页面显示的动效等额外功能时，上述前端组件与后端组件一对一转换的技术无法实现，扩展性较差。

技术实现思路

[0006]本申请提供一种前端组件与后端组件转换的方法及装置，解决了在JS UI开发框架中，大颗粒度的前端组件无法直接转换到较小颗粒度的后端组件的问题。
[0007]为达到上述目的，本申请采用如下技术方案：
[0008]第一方面，提供一种前端组件与后端组件转换的方法，该方法包括：对JS页面文件进行解析，得到所述JS页面中包括的每个组件对应的标签、样式、事件或者属性；根据所述JS页面中包括的每个组件创建文档对象模型DOM节点，并根据所述JS页面的布局结构，得到DOM节点树；将每个DOM节点与对应的多个后端组件进行映射，并将所述每个组件对应的标签、样式、事件或者属性设置到对应的所述多个后端组件上。
[0009]上述技术方案中，通过使用前端组件到后端组件一对多的转换技术，可以自动完成web前端大颗粒度的前端组件到小颗粒度的后端组件的转换，开发者只需要基于web前端进行JS页面开发，而不需要开发者手工设计和拼接前端组件与后端组件，整个转换过程可以由开发框架自动完成，从而降低了开发的难度和成本。开发者能够基于较为流行的前端开发范式进行快速高效开发，复用前端web的相关技术，提升开发效率。
[0010]在一种可能的实现方式中，将每个DOM组件与对应的多个后端组件进行映射，具体包括：若DOM组件有对应的后端组件，则DOM组件对应的后端组件由Composed组件与DOM组件对应的至少一个后端组件按照组件树的层次结构组成。
[0011]上述可能的实现方式中，按照一定的前端组件与后端组件的映射规则，将前端组件转换为Composed组件与DOM组件对应的后端组件，实现前端组件与后端组件之间的自动转换，降低开发难度，提升开发效率。
[0012]在一种可能的实现方式中，将每个DOM组件与对应的多个后端组件进行映射，具体包括：若DOM组件没有对应的后端组件，则DOM组件对应的后端组件由根据DOM组件的属性和样式的至少一个后端组件按照组件树的层次结构进行拼接。
[0013]上述可能的实现方式中，若DOM组件没有对应的后端组件的情况下，可以根据一定的前端组件与后端组件的映射规则，自定义用其他后端组件按照组件树映射规则拼接，实现当引擎中前端组件没有对应的后端组件，也能够进行前端组件与后端组件之间的自动转换，降低开发难度，提升开发效率。
[0014]在一种可能的实现方式中，将JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上，包括：将JS页面对应的通用的标签、样式、事件或者属性映射到DOM组件对应的后端容器组件上。
[0015]上述可能的实现方式中，通过在组件树中插入一个容器类组件作为后端组件的父节点，能够将JS页面对应的通用样式、属性等设置到对应的后端容器组件上，从而实现开发者给前端组件设置的通用样式、属性等在后端组件上能够生效，进一步提升开发效率。
[0016]在一种可能的实现方式中，将JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上，包括：将JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性映射到DOM组件对应的组件树的子节点上。
[0017]在一种可能的实现方式中，该方法还包括：在DOM组件对应的组件树的子节点上挂载扩展功能的后端组件，其中，扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。
[0018]上述可能的实现方式中，通过引入扩展功能的后端组件，将其挂载在需要扩展功能的组件树上，从而获得更加丰富的网页设计效果，提升开发效率和灵活性。
[0019]第二方面，提供一种前端组件与后端组件转换的装置，该装置包括：页面解析模块，用于对JS页面文件进行解析，得到JS页面中包括的每个组件对应的标签、样式、事件或者属性；DOM组件生成模块，用于根据JS页面中包括的每个前端组件创建对应的文档对象模型DOM组件；后端组件映射模块，用于将每个DOM组件与对应的多个后端组件进行映射，并将JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上。
[0020]在一种可能的实现方式中，后端组件映射模块，具体用于：若DOM组件有对应的后端组件，则DOM组件对应的后端组件由Composed组件与DOM组件对应的至少一个后端组件按
照组件树的层次结构组成。
[0021]在一种可能的实现方式中，后端组件映射模块，具体用于：若DOM组件没有对应的后端组件，则DOM组件对应的后端组件由根据DOM组件的属性和样式的至少一个后端组件按照组件树的层次结构进行拼接。
[0022]在一种可能的实现方式中，后端组件映射模块，具体用于：将JS页面对应的通用的标签、样式、事件或者属性映射到DOM组件对应的后端容器组件上。
[0023]在一种可能的实现方式中，后端组件映射模块，具体用于：将JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性映射到DOM组件对本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种前端组件与后端组件转换的方法，其特征在于，所述方法包括：对JS页面文件进行解析，得到所述JS页面中包括的每个组件对应的标签、样式、事件或者属性；根据所述JS页面中包括的每个前端组件创建对应的文档对象模型DOM组件；将每个DOM组件与对应的多个后端组件进行映射，并将所述JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的所述多个后端组件上。2.根据权利要求1所述的方法，其特征在于，所述将每个DOM组件与对应的多个后端组件进行映射，包括：若所述DOM组件有对应的后端组件，则所述DOM组件对应的后端组件由Composed组件与所述DOM组件对应的至少一个后端组件按照组件树的层次结构组成。3.根据权利要求1所述的方法，其特征在于，所述将每个DOM组件与对应的多个后端组件进行映射，包括：若所述DOM组件没有对应的后端组件，则所述DOM组件对应的后端组件由根据所述DOM组件的属性和样式的至少一个后端组件按照组件树的层次结构进行拼接。4.根据权利要求1
‑
3任一项所述的方法，其特征在于，所述将所述JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的所述多个后端组件上，包括：将所述JS页面对应的通用的标签、样式、事件或者属性映射到所述DOM组件对应的后端容器组件上。5.根据权利要求1
‑
4任一项所述的方法，其特征在于，所述将所述JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的所述多个后端组件上，包括：将所述JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性映射到所述DOM组件对应的组件树的子节点上。6.根据权利要求1
‑
5任一项所述的方法，其特征在于，所述方法还包括：在所述DOM组件对应的组件树的子节点上挂载扩展功能的后端组件，其中，所述扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。7.一种前端组件与后端组件转换的装置，其特征在于，所述装置包括：页面解析模块，用于对JS页面文件进行解析，得到所述JS页面中包括的每个组件对应的标签、样式、事件或者属性；DOM组件生成模块，用于根据所述J...

【专利技术属性】
技术研发人员：陈本智，张晓峰，兰守忍，李浩，
申请(专利权)人：华为技术有限公司，
类型：发明
国别省市：