CN114968204A - 一种前端组件与后端组件转换的方法及装置 - Google Patents
一种前端组件与后端组件转换的方法及装置 Download PDFInfo
- Publication number
- CN114968204A CN114968204A CN202210442255.8A CN202210442255A CN114968204A CN 114968204 A CN114968204 A CN 114968204A CN 202210442255 A CN202210442255 A CN 202210442255A CN 114968204 A CN114968204 A CN 114968204A
- Authority
- CN
- China
- Prior art keywords
- component
- dom
- page
- end component
- event
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computing Systems (AREA)
- Stored Programmes (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请提供一种前端组件与后端组件转换的方法及装置,涉及软件开发技术领域,解决了在JS UI开发框架中,大颗粒度的前端组件无法直接自动转换到较小颗粒度的后端组件的问题。该方法包括:对JS页面文件进行解析,得到JS页面中包括的每个组件对应的标签、样式、事件或者属性;根据JS页面中包括的每个组件创建文档对象模型DOM节点,并根据JS页面的布局结构,得到DOM节点树;将每个DOM节点与对应的多个后端组件进行映射,并将每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上。
Description
本申请要求于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组件对应的至少一个后端组件按照组件树的层次结构组成。
上述可能的实现方式中,按照一定的前端组件与后端组件的映射规则,将前端组件转换为Composed组件与DOM组件对应的后端组件,实现前端组件与后端组件之间的自动转换,降低开发难度,提升开发效率。
在一种可能的实现方式中,将每个DOM组件与对应的多个后端组件进行映射,具体包括:若DOM组件没有对应的后端组件,则DOM组件对应的后端组件由根据DOM组件的属性和样式的至少一个后端组件按照组件树的层次结构进行拼接。
上述可能的实现方式中,若DOM组件没有对应的后端组件的情况下,可以根据一定的前端组件与后端组件的映射规则,自定义用其他后端组件按照组件树映射规则拼接,实现当引擎中前端组件没有对应的后端组件,也能够进行前端组件与后端组件之间的自动转换,降低开发难度,提升开发效率。
在一种可能的实现方式中,将JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上,包括:将JS页面对应的通用的标签、样式、事件或者属性映射到DOM组件对应的后端容器组件上。
上述可能的实现方式中,通过在组件树中插入一个容器类组件作为后端组件的父节点,能够将JS页面对应的通用样式、属性等设置到对应的后端容器组件上,从而实现开发者给前端组件设置的通用样式、属性等在后端组件上能够生效,进一步提升开发效率。
在一种可能的实现方式中,将JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上,包括:将JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性映射到DOM组件对应的组件树的子节点上。
在一种可能的实现方式中,该方法还包括:在DOM组件对应的组件树的子节点上挂载扩展功能的后端组件,其中,扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。
上述可能的实现方式中,通过引入扩展功能的后端组件,将其挂载在需要扩展功能的组件树上,从而获得更加丰富的网页设计效果,提升开发效率和灵活性。
第二方面,提供一种前端组件与后端组件转换的装置,该装置包括:页面解析模块,用于对JS页面文件进行解析,得到JS页面中包括的每个组件对应的标签、样式、事件或者属性;DOM组件生成模块,用于根据JS页面中包括的每个前端组件创建对应的文档对象模型DOM组件;后端组件映射模块,用于将每个DOM组件与对应的多个后端组件进行映射,并将JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上。
在一种可能的实现方式中,后端组件映射模块,具体用于:若DOM组件有对应的后端组件,则DOM组件对应的后端组件由Composed组件与DOM组件对应的至少一个后端组件按照组件树的层次结构组成。
在一种可能的实现方式中,后端组件映射模块,具体用于:若DOM组件没有对应的后端组件,则DOM组件对应的后端组件由根据DOM组件的属性和样式的至少一个后端组件按照组件树的层次结构进行拼接。
在一种可能的实现方式中,后端组件映射模块,具体用于:将JS页面对应的通用的标签、样式、事件或者属性映射到DOM组件对应的后端容器组件上。
在一种可能的实现方式中,后端组件映射模块,具体用于:将JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性映射到DOM组件对应的组件树的子节点上。
在一种可能的实现方式中,后端组件映射模块,具体还用于:在DOM组件对应的组件树的子节点上挂载扩展功能的后端组件,其中,所述扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。
第三方面,提供一种电子设备,该电子设备包括:处理器;用于存储所述处理器可执行指令的存储器;其中,所述处理器被配置为执行所述指令,以实现如上述第一方面中任一项所述的方法。
第四方面,提供一种计算机可读存储介质,当所述计算机可读存储介质中的指令由电子设备的处理器执行时,使得所述电子设备能够执行如上述第一方面中任一项所述的方法。
第五方面,提供一种计算机程序产品,当所述计算机程序产品在计算机上运行时,使得所述计算机执行如上述第一方面中任一项所述的方法。
可以理解地,上述提供的任一种前端组件与后端组件转换的装置、计算机可读存储介质和计算机程序产品,均可以由上文所提供的对应的方法来实现,因此,其所能达到的有益效果可参考上文所提供的对应的方法中有益效果,此处不再赘述。
附图说明
图1为本申请实施例提供的一种JS UI开发框架的架构图;
图2为本申请实施例提供的一种前端组件与后端组件转换的方法流程示意图;
图3为本申请实施例提供的一种电子设备进行JS页面开发的流程示意图;
图4为本申请实施例提供的一种前端组件与后端组件转换的流程示意图;
图5为本申请实施例提供的一种前端组件与后端组件转换的时序流程示意图;
图6为本申请实施例提供的一种前端组件与后端组件转换的实施效果示意图;
图7为本申请实施例提供的一种前端组件与后端组件转换的装置结构示意图;
图8为本申请实施例提供的另一种前端组件与后端组件转换的装置结构示意图;
图9为本申请实施例提供的一种电子设备的结构示意图。
具体实施方式
以下,术语“第一”、“第二”仅用于描述目的,而不能理解为指示或暗示相对重要性或者隐含指明所指示的技术特征的数量。由此,限定有“第一”、“第二”的特征可以明示或者隐含地包括一个或者更多个该特征。在本实施例的描述中,除非另有说明,“多个”的含义是两个或两个以上。
需要说明的是,本申请中,“示例性的”或者“例如”等词用于表示作例子、例证或说明。本申请中被描述为“示例性的”或者“例如”的任何实施例或设计方案不应被解释为比其他实施例或设计方案更优选或更具优势。确切而言,使用“示例性的”或者“例如”等词旨在以具体方式呈现相关概念。
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
首先,对本申请实施例的应用的JS UI开发框架进行简单介绍,如图1所示,JS UI开发框架的整体架构可以分为四层,包括应用层、前端框架层、引擎层以及平台适配层。
应用层:表示开发者使用JS UI框架开发的JS应用。
前端框架层:主要完成前端页面解析,以及提供Model-View-ViewModel(MVVM)的开发模式、页面路由机制和自定义组件等能力。
引擎层:主要提供动画解析、文档对象模型(Document Object Model,DOM)树构建、布局计算、渲染命令构建与绘制、事件管理等能力。
适配层:主要完成对平台层进行抽象,提供抽象接口,可以对接到系统平台。比如:事件对接、渲染管线对接和系统生命周期对接等。
在JS UI开发框架中,前端组件的设计功能丰富,颗粒度较大,支持通用属性、样式或事件,而后端组件的设计功能单一,设计的颗粒度较小。现有技术不能将大颗粒度的前端组件直接转换到小颗粒度的后端组件,也不能直接将前端组件的通用样式、属性等映射到对应的后端组件上。此外,有些前端组件本身没有对应到后端开发的组件,需要通过多个其他后端组件按一定层次结构来拼接前端组件,即需要支持组件的可扩展性。
基于上述的技术问题,本申请提供一种JS UI前端组件与后端组件的端到端转换,通过前端组件到后端组件的一对多的转换方法,以建立Web前端组件与后端组件转换的桥梁,使得开发者能够基于JS前端(类HML+CSS+Javascript)进行快速高效地开发,得到高性能渲染效果和跨平台能力,同时能复用前端web相关的代码和技术,从而提升开发效率,降低开发成本。
本申请实施例提供一种前端组件与后端组件转换的方法,应用于配置有JS UI开发框架的电子设备。如图2所示,该方法可以包括以下步骤。
S201:电子设备对JS页面文件进行解析,得到JS页面中包括的每个组件对应的标签、样式、事件或者属性。
在步骤S201之前,开发者可以根据网页UI界面的设计需求进行JS页面的设计,得到JS页面文件。每个JS页面包括多个组件的层级关系、每个组件的标签、通用属性、私有属性样式和事件等信息。
具体的,开发者可以根据UI界面的布局结构,通过电子设备编写组件树树状结构,分别根据类超文本标记语言(Hyper Text Markup Language,HTML)、层叠样式表(Cascading Style Sheets,CSS)和Javascript生成对应的文件,并将HTML、CSS和JS三个文件打包成生成一个JS包,即为JS页面文件。
其中,HTML是一种用于创建网页的标准标记语言,也是构成网页文档的主要语言。HTML文本是由HTML命令组成的描述性文本,HTML命令可以用于描述页面中的文字、图形、动画、声音、表格、链接等页面布局以及它们之间的层级关系。HTML文件一般以.htm为扩展名或.html为扩展名。
CSS是一种可以用来表现HTML文件样式的计算机语言,可以用于对JS页面进行美化。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中每一个组件排版的位置进行像素级地精确控制,支持几乎所有的字体字号样式,还拥有对网页对象和模型样式编辑的能力。
Javascript是一种脚本语言,主要用于网页中各个组件的事件交互或者布局绑定等,在网页中的作用可以是控制HTML中的每一个元素,例如,有时要在页面中删除元素,有时要添加新元素,有时要通过与用户的交互获取事件的触发等。Javascript用于实现前端页面的文档对象模型(Document Object Model,DOM)的处理。
其中,DOM是处理可扩展置标语言的标准编程接口,是一种与平台和语言无关的应用程序接口(Application Programming Interface,API),可以动态地访问程序和脚本,更新其内容、结构和文档的风格。DOM是一种基于树结构的API文档,可以包括DOM父节点和多个DOM子节点。
然后,电子设备对JS页面文件进行解析,也就是电子设备根据JS页面文件中的计算机语言,进行对应功能的设置与绑定,得到JS页面中包括的每个组件对应的标签、样式、事件或者属性等。
具体的,电子设备可以根据JS引擎的中的Framework解析每个JS页面,获得每个JS页面对应的组件、样式、属性和事件等信息,并将JS页面中每个组件、样式、属性和事件等信息保存在对应的数据结构中。
S202:电子设备根据JS页面中包括的每个前端组件创建对应的DOM组件。
首先,电子设备可以根据上述解析得到的JS页面中包括的每个组件对应的标签和节点创建出对应的DOM节点,可以为DOMXX,例如,DOMText,DOMImage,DOMDiv等。
电子设备根据JS页面的布局结构,得到和JS页面对应的前端组件的组件树结构,也就是DOM节点树,从而建立DOM节点与后端组件的一对多的组件树映射规则,将DOM节点映射到对应的多个后端组件。
S203:电子设备将每个DOM组件与对应的多个后端组件进行映射,并将JS页面中每个组件对应的标签、样式、事件或属性设置到对应的多个后端组件上。
电子设备将创建的每个DOM组件按照组件树映射规则,对应多个后端组件。
具体的,电子设备通过创建一个前端组件到后端组件转换的桥接层类DOMNode,主要用于生成组件节点、前端组件树等,并将开发者为JS页面设置的通用样式、事件和通用属性等设置给对应的后端容器组件,例如,公共的后端容器组件Box等组件上,以完成前端组件和后端组件的对应。
具体的,当前端组件需支持通用样式时,电子设备可以将后端的公共通用容器组件作为其父组件。例如,公共的通用容器组件为Box组件,即在组件树上,将Box挂载为前端组件对应的后端组件的父节点,开发者设置的通用样式都设置在这类公共通用容器组件上。
电子设备通过前端组件一对多映射到后端组件的映射规则,通过节点变换,可以将功能单一的多个后端组件按照一定层次结构组合成功能丰富的前端组件。
在一种实施方式中,电子设备可以将JS页面通用的标签、样式、事件或者属性等映射到DOM节点对应的后端容器组件上。电子设备可以将JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性等映射到DOM组件对应的组件树的子节点上。
另外,在一种实施方式中,电子设备还可以在DOM组件对应的组件树的子节点上挂载扩展功能的后端组件,其中,扩展功能可以包括动画增强效果、触摸事件、手势事件或者渐变动画效果等。
具体的,例如,前端组件需要支持动画效果时,则电子设备可以在组件树上挂载Transition或Tween等后端动画组件。前端组件需要支持触摸,手势事件,则可以在组件树上挂载TouchEvent或GestureEvent等后端手势组件。前端组件需要支持渐变动画的效果,则可以在组件树上挂载类似Display等后端组件。
在一种实施方式中,前端组件转换为后端组件可以分为以下两种情况:
情况1、如前端组件有对应的后端组件,则前端组件到后端组件转换的方法一般通过组合型Composed组件+对应的后端组件组成。
例如,前端的DOMText节点有对应的后端Text组件,则前端DOMText组件可以由Composed组件对应的后端组件组成,即Composed组件、Box组件和Text组件按树状层次结构组成,其中,Composed组件作为根节点,Box组件作为Composed组件的子节点,Text组件作为Box组件的子节点。
示例性的,如表1所示,DOMImage组件可以由Composed、Box和Image组件按树状层次结构组成,如Composed作为根节点,Box作为Composed的子节点,而Image又作为Box的子节点。DOMSpan由于不需要支持通用样式,只需要用Composed和后端组件Span来构建DOMSpan,例如,根节点Composed下面直接挂载Span后端组件,Box组件不会挂载在Span之上。
情况2、如后端组件中没有对应的前端组件,则前端组件到后端组件转换的方法可以为根据前端组件的功能,自定义用其他多个后端组件按照组件树拼接而成。
示例性的,前端的DOMButton组件没有对应的后端Button组件,则如表1所示,DOMButton组件可以自定义为由Composed组件、Box组件、Text组件和Padding组件这四个后端组件按父子层级关系组成。
表1前端组件DOM节点到后端组件的转换规则
前端组件对应的DOM节点 | 前端组件对应的后端组件组合 |
DOMSpan | Composed+Span |
DOMText | Composed+Box+Text |
DOMImage | Composed+Box+Image |
DOMDiv | Composed+Box+Flex |
DOMPopup | Composed+Box+Popup+GestureEvent |
DOMProgress | Composed+Box+Progress |
DOMSwiper | Composed+Box+Display+Swiper+GestureEvent |
DOMToast | Composed+Box+Tween+Postioned+Stack+Text+Row |
DOMButton | Composed+Box+Text+Padding |
DOMDialog | Composed+Box+Transition+Text |
结合上述的映射规则,电子设备可以在DOM节点中依次创建对应的后端组件,并将JS页面设置的通用属性和样式设置给公共容器组件,而将前端组件的私有属性和样式映射到对应的后端组件上。例如,对于前端的DOMDiv组件,依次创建对应的Composed、Box和Flex等后端组件,并将开发者为JS页面设置的通用属性和样式设置给公共容器组件如Box组件,前端组件的私有属性和样式映射到对应的后端组件,如Flex组件上。
在一种实施方式中,完整的处理流程可以参照图3所示,上述步骤S203之后,电子设备将获得的后端组件树输出到JS UI渲染引擎管线,完成所有组件树的绘制。
通过上述本申请的实施方式,通过使用前端组件到后端组件一对多的转换技术,可以自动完成web前端大颗粒度的前端组件到小颗粒度的后端组件的转换,开发者只需要基于web前端进行JS页面开发,而不需要开发者手工设计和拼接前端组件与后端组件,整个转换过程可以由开发框架自动完成,从而降低了开发的难度和成本。开发者能够基于较为流行的前端开发范式进行快速高效开发,复用前端web的相关技术,提升开发效率。
另外,本申请的上述实施方式中,通过在组件树插入一个容器类组件作为后端组件的父节点,并将JS页面的通用样式、属性等配置到该后端容器组件上,实现开发者给前端组件设置的通用样式、属性等可以在后端组件上生效,配置效果可以显示在对应的后端组件上。并且,本申请通过引入扩展功能的后端组件,挂载在需要进行功能扩展的组件树上,从而可以获得更加丰富的网页设计效果,提升开发效率和灵活性。
示例性的,本申请将结合附图,以前端组件Text和Div到后端组件的转换作为示例,阐述本申请提供的前端组件到后端组件的转换流程。
需要说明的是,前端代码div+css,是目前通用的一种网页设计的实现方式,即通过设计div组件树层次结构,结合css对每个组件的样式设置,可以实现对网页中的一些图片和文字内容进行排版和展示,从而实现展示给用户排版合理、内容丰富的网页。
如图4所示,电子设备通过解析JS页面,获得每个前端组件的标签以及组件树的层次结构,创建标签对应的DOM节点,根据组件树结构将DOM节点转换为多个后端组件,完成前后端组件的对接。
结合图4中的流程,电子设备进行处理的时序图可以参照图5所示,前端组件到后端组件的转换过程可以包括以下步骤。
1、构建JS页面,创建JS Page对象,用于处理DOMNode节点和JS命令。
2、进行JS页面解析。
具体的,将JS页面载入到JS(Quick JS或V8等)引擎中,使用JS Framework将JS页面中每个组件对应的样式,属性,方法等解析出来。
3、根据JS页面创建DOM Document,用于维护前端组件和JS页面对应的组件树结构,并负责创建前端组件对应的DOMXX。如DOMDiv。
4、创建出一个前端组件到后端组件转换的桥接层类DOMNode,主要用于生成组件节点、前端组件树等,并将开发者设置的通用样式和属性设置给后端公共容器组件Box等组件上。
5、根据标签名和节点ID创建每个DOMXX组件,并设计一种一对多的前端组件到后端组件的映射规则,通过节点变换,使用功能单一的多个后端组件按照一定层次结构组合成功能丰富的前端组件。
6、依次创建DOMDiv对应的后端组件,即创建Composed,Box和Flex等后端组件,并将开发者设置的通用属性和样式设置给公共容器组件Box,而将前端组件的私有属性和样式映射到对应的后端组件Flex上。
最后,电子设备可以将转换得到的后端组件树输出到JS UI渲染引擎管线,完成上述组件树的绘制。
示例性的,如图6所示,为电子设备根据开发者基于HTML+CSS+JS开发范式编写的JS代码,通过后端组件Composed,Box和Text按照父子层级关系转换为前端组件Text的示意图,以及该组件树进行渲染后的显示效果。
其中,JS代码中包含前端Text组件,前端Text组件对应设置了字体颜色、字体尺寸和字体样式等,并设置了网页的通用样式,如背景颜色、页面的宽、高和边框颜色等,由于这些样式不是Text的私有样式,不会直接设置在Text对应的后端组件上。通过本申请的上述实施方式,进行前端组件到后端组件的转换方法,可以将Box作为Text的父节点挂载在组件树上,如图6所示。图6为渲染该组件树后的显示效果,从图上可知,Text的字体颜色、字体尺寸和字体样式等私有样式都展现出来了,同时其页面的背景颜色、页面的宽、高和边框颜色等通用样式也能展示出来,上述技术方案的可行性和便捷性较高。
对应于上述实施方式,本申请还提供一种前端组件与后端组件转换的装置,如图7所示,该装置700包括页面解析模块701、DOM组件生成模块702和后端组件映射模块703。
其中,页面解析模块701用于对JS页面文件进行解析,得到JS页面中包括的每个组件对应的标签、样式、事件或者属性。
DOM组件生成模块702用于根据JS页面中包括的每个前端组件创建对应的文档对象模型DOM组件。
后端组件映射模块703用于将每个DOM组件与对应的多个后端组件进行映射,并将JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的多个后端组件上。
在一种实施方式中,后端组件映射模块703具体可以用于:若DOM组件有对应的后端组件,则DOM组件对应的后端组件由Composed组件与DOM组件对应的至少一个后端组件按照组件树的层次结构组成。
在一种实施方式中,后端组件映射模块703具体可以用于:若DOM组件没有对应的后端组件,则DOM组件对应的后端组件由根据DOM组件的属性和样式的至少一个后端组件按照组件树的层次结构进行拼接。
在一种实施方式中,后端组件映射模块703具体可以用于:将JS页面对应的通用的标签、样式、事件或者属性映射到DOM组件对应的后端容器组件上。
在一种实施方式中,后端组件映射模块703具体可以用于:将JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性映射到DOM组件对应的组件树的子节点上。
在一种实施方式中,后端组件映射模块703具体可以用于:在DOM组件对应的组件树的子节点上挂载扩展功能的后端组件,其中,扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。
在一种实施方式中,针对前述实施方式中的具体实施流程,如图8所示的,前端组件与后端组件转换的装置具体可以包括JS页面生成模块、JS页面解析模块、JS组件树维护模块、DOM组件生成模块、DOM组件管理模块、DOM组件到后端组件映射模块、样式属性映射模块和渲染引擎模块。
其中,JS页面生成模块用于编写组件树树状结构,并将HTML、CSS和JS三个文件打包成生成一个JS文件包。
JS页面解析模块用于将JS页面中每个组件,样式,属性,事件等解析出来,并保存在对应的数据结构中。
JS组件树维护模块用于维护开发者创建的前端和JS页面对应的组件树结构。
DOM组件生成模块用于根据解析结果创建DOM组件以及前后端组件的对接。
DOM组件管理模块用于将JS页面前端组件的私有样式和属性设置给后端组件,并负责挂载子节点。
DOM组件到后端组件映射模块用于将创建的DOM组件按照组件树映射规则,转换为前端组件。
样式属性映射模块用于将前端组件的通用样式和属性设置到对应的后端Box组件上。
渲染引擎模块用于将生成的后端组件树节点渲染出来。
需要说明的是,上述的装置700中具体的执行过程和实施例可以参照上述方法实施例中电子设备执行的步骤和相关的描述,所解决的技术问题和带来的技术效果也可以参照前述实施例所述的内容,此处不再一一赘述。
在本实施例中,该装置可以采用集成的方式划分各个功能模块的形式来呈现。这里的“模块”可以指特定电路、执行一个或多个软件或固件程序的处理器和存储器、集成逻辑电路、和/或其他可以提供上述功能的器件。在一个简单的实施例中,本领域的技术人员可以想到上述装置可以采用如图9所示的形式。
本申请另一些实施例提供了一种电子设备,该电子设备可以包括:存储器和一个或多个处理器,该存储器和处理器耦合。该存储器用于存储计算机程序代码,该计算机程序代码包括计算机指令。当处理器执行计算机指令时,电子设备可执行上述方法实施例中的各个功能或者步骤。该电子设备的结构可以参考图9所示的电子设备900的结构。
图9为本申请实施例示出的一种示例性的电子设备900的结构示意图,用于执行上述实施方式中电子设备执行的方法。如图9所示,该电子设备900可以包括至少一个处理器901,通信线路902以及存储器903。
处理器901可以是一个通用中央处理器(central processing unit,CPU),微处理器,特定应用集成电路(application-specific integrated circuit,ASIC),或一个或多个集成电路。
通信线路902可包括一条通路,在上述组件之间传送信息,该通信线路例如可以是总线。
存储器903可以是只读存储器(read-only memory,ROM)或可存储静态信息和指令的其他类型的静态存储设备,随机存取存储器(random access memory,RAM)或者可存储信息和指令的其他类型的动态存储设备,也可以是电可擦可编程只读存储器(electricallyerasable programmable read-only memory,EEPROM)、只读光盘(compact disc read-only memory,CD-ROM)或其他光盘存储、光碟存储(包括压缩光碟、激光碟、光碟、数字通用光碟、蓝光光碟等)、磁盘存储介质或者其他磁存储设备、或者能够用于携带或存储具有指令或数据结构形式的期望的程序代码并能够由计算机存取的任何其他介质,但不限于此。存储器可以是独立存在,通过通信线路902与处理器相连接。存储器也可以和处理器集成在一起。本申请实施例提供的存储器通常为非易失性存储器。其中,存储器903用于存储执行本申请实施例的方案所涉及的计算机程序指令,并由处理器901来控制执行。处理器901用于执行存储器903中存储的计算机程序指令,从而实现本申请实施例提供的方法。
可选的,本申请实施例中的计算机程序指令也可以称之为应用程序代码,本申请实施例对此不作具体限定。
在具体实现中,作为一种实施例,处理器901可以包括一个或多个CPU,例如图9中的CPU0和CPU1。
在具体实现中,作为一种实施例,电子设备900可以包括多个处理器,例如图9中的处理器901和处理器907。这些处理器可以是单核(single-CPU)处理器,也可以是多核(multi-CPU)处理器。这里的处理器可以指一个或多个设备、电路、和/或用于处理数据(例如计算机程序指令)的处理核。
在具体实现中,作为一种实施例,电子设备900还可以包括通信接口904。电子设备可以通过通信接口904收发数据,或者与其他设备或通信网络通信,该通信接口904例如可以为以太网接口,无线接入网接口(radio access network,RAN),无线局域网接口(wireless local area networks,WLAN)或者USB接口等。
在具体实现中,作为一种实施例,电子设备900还可以包括输出设备905和输入设备906。输出设备905和处理器901通信,可以以多种方式来显示信息。例如,输出设备905可以是液晶显示器(liquid crystal display,LCD),发光二级管(light emitting diode,LED)显示设备,阴极射线管(cathode ray tube,CRT)显示设备,或投影仪(projector)等。输入设备906和处理器901通信,可以以多种方式接收用户的输入。例如,输入设备906可以是鼠标、键盘、触摸屏设备或传感设备等。
在具体实现中,电子设备900可以是台式机、便携式电脑、网络服务器、掌上电脑(personal digital assistant,PDA)、移动手机、平板电脑、无线终端设备、嵌入式设备或有图9中类似结构的设备。本申请实施例不限定电子设备900的类型。
在一些实施例中,图9中的处理器901可以通过调用存储器903中存储的计算机程序指令,使得电子设备900执行上述方法实施例中的方法。
示例性的,图7或者图8中的各处理模块的功能/实现过程可以通过图9中的处理器901调用存储器903中存储的计算机程序指令来实现。
在示例性实施例中,还提供了一种包括指令的计算机可读存储介质,上述指令可由电子设备900的处理器901执行以完成上述实施例的方法。因此其所能获得的技术效果可参考上述方法实施例,在此不再赘述。
在上述实施例中,可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件程序实现时,可以全部或部分地以计算机程序产品的形式来实现。该计算机程序产品包括一个或多个计算机指令。在计算机上加载和执行计算机程序指令时,全部或部分地产生按照本申请实施例的流程或功能。计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。
本申请实施例还提供一种计算机存储介质,该计算机存储介质包括计算机指令,当所述计算机指令在上述电子设备上运行时,使得该电子设备执行上述方法实施例中手机执行的各个功能或者步骤。
本申请实施例还提供一种计算机程序产品,当所述计算机程序产品在计算机上运行时,使得所述计算机执行上述方法实施例中手机执行的各个功能或者步骤。
通过以上实施方式的描述,所属领域的技术人员可以清楚地了解到,为描述的方便和简洁,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将装置的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。
在本申请所提供的几个实施例中,应该理解到,所揭露的装置和方法,可以通过其它的方式实现。例如,以上所描述的装置实施例仅仅是示意性的,例如,所述模块或单元的划分,仅仅为一种逻辑功能划分,实际实现时可以有另外的划分方式,例如多个单元或组件可以结合或者可以集成到另一个装置,或一些特征可以忽略,或不执行。另一点,所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口,装置或单元的间接耦合或通信连接,可以是电性,机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的,作为单元显示的部件可以是一个物理单元或多个物理单元,即可以位于一个地方,或者也可以分布到多个不同地方。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外,在本申请各个实施例中的各功能单元可以集成在一个处理单元中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现,也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时,可以存储在一个可读取存储介质中。基于这样的理解,本申请实施例的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来,该软件产品存储在一个存储介质中,包括若干指令用以使得一个设备(可以是单片机,芯片等)或处理器(processor)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括:U盘、移动硬盘、只读存储器(read only memory,ROM)、随机存取存储器(random access memory,RAM)、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是:以上所述,仅为本申请的具体实施方式,但本申请的保护范围并不局限于此,任何在本申请揭露的技术范围内的变化或替换,都应涵盖在本申请的保护范围之内。因此,本申请的保护范围应以所述权利要求的保护范围为准。
Claims (10)
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-3任一项所述的方法,其特征在于,所述电子设备将所述JS页面中每个组件对应的标签、样式、事件或者属性设置到对应的所述多个后端组件上,包括:
所述电子设备将所述JS页面中一个DOM组件对应的私有的标签、样式、事件或者属性映射到所述DOM组件对应的组件树的子节点上。
6.根据权利要求1-3任一项所述的方法,其特征在于,所述方法还包括:
所述电子设备在所述DOM组件对应的组件树的子节点上挂载扩展功能的后端组件,其中,所述扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。
7.根据权利要求4所述的方法,其特征在于,所述方法还包括:
所述电子设备在所述DOM组件对应的组件树的子节点上挂载扩展功能的后端组件,其中,所述扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。
8.根据权利要求5所述的方法,其特征在于,所述方法还包括:
所述电子设备在所述DOM组件对应的组件树的子节点上挂载扩展功能的后端组件,其中,所述扩展功能包括动画增强效果、触摸事件、手势事件或者渐变动画效果中的至少一种。
9.一种电子设备,其特征在于,所述电子设备包括:
处理器;
用于存储所述处理器可执行指令的存储器;
其中,所述处理器被配置为执行所述指令,以实现如权利要求1至8中任一项所述的方法。
10.一种计算机可读存储介质,其特征在于,当所述计算机可读存储介质中的指令由电子设备的处理器执行时,使得所述电子设备能够执行如权利要求1至8中任一项所述的方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202210442255.8A CN114968204B (zh) | 2020-11-16 | 2020-12-18 | 一种前端组件与后端组件转换的方法及装置 |
Applications Claiming Priority (4)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011280677 | 2020-11-16 | ||
CN2020112806777 | 2020-11-16 | ||
CN202210442255.8A CN114968204B (zh) | 2020-11-16 | 2020-12-18 | 一种前端组件与后端组件转换的方法及装置 |
CN202011507308.7A CN114579901A (zh) | 2020-11-16 | 2020-12-18 | 一种前端组件与后端组件转换的方法及装置 |
Related Parent Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011507308.7A Division CN114579901A (zh) | 2020-11-16 | 2020-12-18 | 一种前端组件与后端组件转换的方法及装置 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN114968204A true CN114968204A (zh) | 2022-08-30 |
CN114968204B CN114968204B (zh) | 2023-05-09 |
Family
ID=81769612
Family Applications (2)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202210442255.8A Active CN114968204B (zh) | 2020-11-16 | 2020-12-18 | 一种前端组件与后端组件转换的方法及装置 |
CN202011507308.7A Pending CN114579901A (zh) | 2020-11-16 | 2020-12-18 | 一种前端组件与后端组件转换的方法及装置 |
Family Applications After (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011507308.7A Pending CN114579901A (zh) | 2020-11-16 | 2020-12-18 | 一种前端组件与后端组件转换的方法及装置 |
Country Status (1)
Country | Link |
---|---|
CN (2) | CN114968204B (zh) |
Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106293669A (zh) * | 2015-06-02 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 一种网页组件的生成方法和装置 |
CN106371829A (zh) * | 2016-08-24 | 2017-02-01 | 北京邮电大学 | 基于模块化思想的模板框架设计方法及系统 |
US20170039372A1 (en) * | 2013-03-15 | 2017-02-09 | Electro Industries/Gauge Tech | Devices, systems and methods for upgrading firmware in intelligent electronic devices |
US20170329500A1 (en) * | 2016-05-13 | 2017-11-16 | Sap Se | Overview page in multi application user interface |
CN108121539A (zh) * | 2016-11-28 | 2018-06-05 | 北京国双科技有限公司 | 组件处理方法和装置 |
CN108228188A (zh) * | 2018-01-08 | 2018-06-29 | 武汉斗鱼网络科技有限公司 | 一种视图组件处理方法、电子设备及可读存储介质 |
CN108376068A (zh) * | 2016-11-26 | 2018-08-07 | 深圳壹账通智能科技有限公司 | 脚本框架页面组件的转换方法及转换装置 |
CN108733375A (zh) * | 2018-05-29 | 2018-11-02 | 厦门白山耘科技有限公司 | web前端配置化开发方法、装置、存储介质及计算机设备 |
CN109145235A (zh) * | 2017-06-16 | 2019-01-04 | 艺龙网信息技术(北京)有限公司 | 用于解析网页的方法、装置及电子设备 |
CN112433799A (zh) * | 2020-11-25 | 2021-03-02 | 平安普惠企业管理有限公司 | 页面生成方法、装置、设备及介质 |
-
2020
- 2020-12-18 CN CN202210442255.8A patent/CN114968204B/zh active Active
- 2020-12-18 CN CN202011507308.7A patent/CN114579901A/zh active Pending
Patent Citations (10)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US20170039372A1 (en) * | 2013-03-15 | 2017-02-09 | Electro Industries/Gauge Tech | Devices, systems and methods for upgrading firmware in intelligent electronic devices |
CN106293669A (zh) * | 2015-06-02 | 2017-01-04 | 阿里巴巴集团控股有限公司 | 一种网页组件的生成方法和装置 |
US20170329500A1 (en) * | 2016-05-13 | 2017-11-16 | Sap Se | Overview page in multi application user interface |
CN106371829A (zh) * | 2016-08-24 | 2017-02-01 | 北京邮电大学 | 基于模块化思想的模板框架设计方法及系统 |
CN108376068A (zh) * | 2016-11-26 | 2018-08-07 | 深圳壹账通智能科技有限公司 | 脚本框架页面组件的转换方法及转换装置 |
CN108121539A (zh) * | 2016-11-28 | 2018-06-05 | 北京国双科技有限公司 | 组件处理方法和装置 |
CN109145235A (zh) * | 2017-06-16 | 2019-01-04 | 艺龙网信息技术(北京)有限公司 | 用于解析网页的方法、装置及电子设备 |
CN108228188A (zh) * | 2018-01-08 | 2018-06-29 | 武汉斗鱼网络科技有限公司 | 一种视图组件处理方法、电子设备及可读存储介质 |
CN108733375A (zh) * | 2018-05-29 | 2018-11-02 | 厦门白山耘科技有限公司 | web前端配置化开发方法、装置、存储介质及计算机设备 |
CN112433799A (zh) * | 2020-11-25 | 2021-03-02 | 平安普惠企业管理有限公司 | 页面生成方法、装置、设备及介质 |
Non-Patent Citations (2)
Title |
---|
JIONGYUE XING等: "progressive module minimization for re-encoding transformed soft decoding of RS codes" * |
王星航: "面向异构服务集成的可视化开发工具的设计与实现" * |
Also Published As
Publication number | Publication date |
---|---|
CN114579901A (zh) | 2022-06-03 |
CN114968204B (zh) | 2023-05-09 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US11216253B2 (en) | Application prototyping tool | |
US7856596B2 (en) | Method and system for separation of content and layout definitions in a display description | |
US10565296B2 (en) | Designing interactive web templates | |
CN111639287A (zh) | 一种页面处理方法、装置、终端设备及可读存储介质 | |
JP6941617B2 (ja) | ハイブリッドアプリケーションにおいてListCellを再利用する方法及び装置 | |
US9817811B2 (en) | Web server system, dictionary system, dictionary call method, screen control display method, and demonstration application generation method | |
CN102929867A (zh) | 用于自动化的文档翻译的技术 | |
CN110109659A (zh) | 一种实现前端应用脚手架的系统和服务器 | |
CN113126990B (zh) | 一种页面开发方法、装置、设备及存储介质 | |
CN108268262A (zh) | 实现将html转换为微信小程序的方法、装置及系统 | |
KR20150079867A (ko) | Html5-프로토콜 기반 웹페이지 표시 방법 및 장치 | |
CN105630522A (zh) | 一种Web应用的更新方法、装置和系统 | |
CN114510231A (zh) | 应用构建方法、装置、设备及计算机可读存储介质 | |
CN114996619A (zh) | 一种页面显示的方法、装置、计算机设备及存储介质 | |
Loudon | Developing Large Web Applications: Producing Code That Can Grow and Thrive | |
CN114968204B (zh) | 一种前端组件与后端组件转换的方法及装置 | |
US20200210518A1 (en) | Systems and/or methods for dynamic layout design | |
CN110717134A (zh) | 产品说明发布方法、装置、存储介质及电子设备 | |
CN114356291A (zh) | 基于配置文件生成表单的方法、装置、设备及介质 | |
CN114637937A (zh) | 页面显示方法、装置、电子设备及计算机可读存储介质 | |
CN112099770A (zh) | 基于模板的网页生成方法、系统、设备及存储介质 | |
CN112114805A (zh) | 页面生成方法、装置、设备 | |
Chang et al. | W-Revised: An amazing tool for creating customized websites | |
US20080244394A1 (en) | Display and layout flow of relatively positioned user interface items | |
JP5706306B2 (ja) | リンクされたテキストボックスを有する電子文書のレンダリングの方法、レンダリングする指示を含むコンピューターが読み取り可能な記憶媒体及びシステム |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |