CN114089982A - 前端页面生成方法、装置、设备和介质 - Google Patents

Abstract

本公开提供了一种前端页面生成方法，包括：生成静态初始页面；响应于静态初始页面，确定对应多个组件中的每个组件的组合行为链；以及执行组合行为链以生成前端页面。此外，本公开还提供了一种前端页面生成装置、电子设备和计算机可读存储介质。

Description

前端页面生成方法、装置、设备和介质

技术领域

本公开涉及计算机技术领域，更具体地，涉及一种前端页面生成方法、前端页面生成装置、电子设备和计算机可读存储介质。

背景技术

在前端系统开发过程中，由于业务方的开发需求代表了页面开发的业务逻辑、操作路径和操作方法。因此，在现有前端系统的开发项目中，开发一个前端系统的前提是开发需求的确认。若开发项目在开发需求不明确或者频繁变更开发需求的情况下进行，则开发页面要么不满足最终的开发需求，要么面临频繁的需求变更。

发明内容

有鉴于此，本公开实施例提供了一种可以实现快速组合各个组件的抽象行为来改变业务流程，达到适应前端页面开发不满足最终开发需求或开发需求频繁变更的情况，进而节省开发人员人力和时间成本，提高开发效率的前端页面生成方法、前端页面生成装置、电子设备和计算机可读存储介质。

本公开实施例的一方面提供了一种前端页面生成方法，包括：生成静态初始页面；响应于静态初始页面，确定对应多个组件中的每个组件的组合行为链；以及执行组合行为链以生成前端页面。

根据本公开的实施例，生成静态初始页面，包括：获取服务端的业务下发指令；依据预设业务约定，对业务下发指令进行指令校验；以及响应于指令校验的结果，根据业务下发指令的布局参数排版当前页面，以生成静态初始页面。

根据本公开的实施例，根据业务下发指令的布局参数排版当前页面，包括：根据业务下发指令中的页面样式参数，设定当前页面的外层样式；对具有外层样式的当前页面进行布局初始化；以及根据业务下发指令中的部件参数，对经过布局初始化的当前页面进行组件实例化。

根据本公开的实施例，根据业务下发指令中的部件参数，对经过布局初始化的当前页面进行组件实例化，包括：根据多个组件中的每个组件的轴坐标参数、宽高参数、标识参数、名称参数、支撑参数以及组件样式参数，分别相应确定多个组件中的每个组件在当前页面中的排版位置、宽高、标识、名称、初始默认值以及组件样式。

根据本公开的实施例，响应于静态初始页面之后，确定对应多个组件中的每个组件的组合行为链，包括：根据业务下发指令中的行为参数，对多个组件中的每个组件进行抽象行为挂载。

根据本公开的实施例，对多个组件中的每个组件进行抽象行为挂载，包括：对多个组件中的每个组件的行为集合中的每个抽象行为进行遍历以确定对应每个组件的抽象行为集合，依据抽象行为集合中每个抽象行为的触发参数，确定每个抽象行为的触发类型；以及根据触发类型，将每个抽象行为挂载到相应组件的触发点。

根据本公开的实施例，响应于静态初始页面之后，确定对应多个组件中的每个组件的组合行为链，还包括：根据每个抽象行为的序号参数，对相应组件的触发点上挂载的每个抽象行为进行排序，以确定对应多个组件中的每个组件的组合行为链。

根据本公开的实施例，执行组合行为链以生成前端页面，包括：通过组合行为链中的每个抽象行为的行为类型和目标生效对象调用每个抽象行为的实现函数以传入参数对象，以生成前端页面。

本公开实施例的另一方面提供了一种前端页面生成装置，包括页面布局模块、行为组合模块和页面生成模块。页面布局模块用于生成静态初始页面；行为组合模块用于响应于静态初始页面，确定对应多个组件中的每个组件的组合行为链；页面生成模块用于执行组合行为链以生成前端页面

本公开实施例的另一方面提供了一种电子设备，包括一个或多个处理器和存储装置。存储装置，用于存储一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现上述的方法。

本公开实施例的另一方面提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现上述的方法。

上述一个或多个实施例具有如下优点或益效果：可以实现快速组合各个组件的抽象行为来改变业务流程，达到适应前端页面开发不满足最终开发需求或开发需求频繁变更的情况，使得开发人员在前端页面开发过程中只需要维护和开发组件和抽象行为即可，进而节省开发人员人力和时间成本，提高前端页面的开发效率。

附图说明

图1示例性示出了根据本公开实施例的前端页面开发系统的架构图；

图2示例性示出了根据本公开实施例的前端页面开发方法的流程图；

图3示例性示出了根据本公开实施例的生成静态初始页面的方法流程图；

图4示意性示出了根据本公开实施例的确定组合行为链的方法流程图；

图5示例性示出了根据本公开实施例的前端页面开发装置的架构图；

图6示例性示出了根据本公开实施例的适于实现上述前端页面开发方法的电子设备的方框图。

具体实施方式

为使本公开的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本公开进一步详细说明。

需要说明的是，在附图或说明书正文中，未绘示或描述的实现方式，均为所属技术领域中普通技术人员所知的形式，并未进行详细说明。此外，上述对各元件和方法的定义并不仅限于实施例中提到的各种具体结构、形状或方式，本领域普通技术人员可对其进行简单地更改或替换。

还需要说明的是，实施例中提到的方向用语，例如“上”、“下”、“前”、“后”、“左”、“右”等，仅是参考附图的方向，并非用来限制本公开的保护范围。贯穿附图，相同的元素由相同或相近的附图标记来表示。在可能导致对本公开的理解造成混淆时，将省略常规结构或构造。

并且图中各部件的形状和尺寸不反映真实大小和比例，而仅示意本公开实施例的内容。另外，在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。

再者，单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。

说明书与权利要求中所使用的序数例如“第一”、“第二”、“第三”等的用词，以修饰相应的元件，其本身并不意味着该元件有任何的序数，也不代表某一元件与另一元件的顺序或是制造方法上的顺序，这些序数的使用仅用来使具有某命名的一元件得以和另一具有相同命名的元件能做出清楚区分。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把他们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把他们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的代替特征来代替。并且，在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。

类似地，应当理解，为了精简本公开并帮助理解各个公开方面的一个或多个，在上面对本公开的示例性实施例的描述中，本公开的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本公开要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，公开方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本公开的单独实施例。

前端开发是创建web页面或app等前端界面呈现给用户的过程，具体可以通过HTML、CSS以及Java script等各种技术、框架来实现互联网产品的用户界面交互。在本公开的实施例中，前端开发可以理解为网页的页面开发或建立生成。随着互联网技术的迅速发展和HTML5、CSS3等技术的应用，现代网页更加美观，网页交互效果更加显著，网页功能也更加强大。同时，随着移动互联网带来的高性能、大数据的移动终端设备以及快速无线网络的广泛应用，使得业务方对前端页面的开发需求更加多样化，开发需求的变更时限越来越短，使得开发需求会在短时间内频繁出现变更。

然而，开发需求可以决定前端页面开发过程中所要采用的业务逻辑、操作路径和操作方法。这就使得前端页面开发人员在开发项目中可能随时面临业务方给出的业务开发需求出现快速迭代或者在开发后期依照新的业务开发需求直接推翻前期开发需求的业务逻辑等需求变更的情况，而现有的前端页面一旦生成，一般无法有效适应业务逻辑的变化，使得开发人员不得不为应对业务开发需求不断重新开发代码逻辑以匹配需求变更，甚至必须推翻前期业务逻辑对前端页面进行重新开发。

因此，开发人员的前端系统页面开发的时间成本和人力成本将造成极大浪费。目前，随着信息技术和互联网技术的快速发展，前端页面开发过程中已经常出现上述的需求变更问题。

有鉴于此，本公开实施例提供了一种可以实现快速组合各个组件的抽象行为来改变业务流程，达到适应前端页面开发不满足最终开发需求或开发需求频繁变更的情况，进而节省开发人员人力和时间成本，提高开发效率的前端页面生成方法、前端页面生成装置、电子设备和计算机可读存储介质。

图1示例性示出了根据本公开实施例的前端页面开发系统100的架构图；以反映本公开实施例的前端页面生成方法的应用场景。

如图1所示，前端120具有基于Json结构以与服务器端110进行交互的调用接口，以用于接收服务端110发送的业务方的业务开发需求，该业务开发需求可以体现为指令下发的形式，指令由多个字段按照业务约定拼接构成，其用于反映业务开发需求中前端页面开发的业务逻辑。前端120还可以分别读取或调用指令中相应字段，来实现对前端页面的生成。

需要注意的是，图1所示仅为可以应用本公开实施例的应用示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例的方法不可以用于其他设备、系统、环境或场景。其中，本公开实施例的方法包括本公开权利要求书中记载的前端页面生成方法。

图2示例性示出了根据本公开实施例的前端页面开发方法的流程图。

如图2所示，本公开实施例的一方面提供了一种前端页面生成方法，包括操作S201-S203。

在操作S201中，生成静态初始页面；

在操作S202中，响应于静态初始页面，确定对应多个组件中的每个组件的组合行为链；以及

在操作S203中，执行组合行为链以生成前端页面。

如图1和图2所示，前端120在接收到服务端110所下发的业务需求之后，根据业务需求所对应的指令，直接可以生成静态初始页面。在本公开的实施例中，静态初始页面可以为纯HTML格式的网页，一般不包含程序且不可交互，但可以包含文本、图像、声音、FLASH动画、客户端脚本和ActiveX控件及JAVA小程序等，属于无业务逻辑的静态页面，是本公开实施例中前端页面的生成基础。

在本公开的实施例中，前端120在生成静态初始页面之后，可以根据业务需求，对静态初始页面上的多个组件中每个组件所对应的行为集合中的各个行为进行筛选排序，以获得各个组件的组合行为链。其中，各个组合行为链可以理解为多个行为的有序排列的集合。因此，当某组件的组合行为链在被执行时，其中的各个行为可以逐个依序被前端120进行调用。其中，组件即页面组件，为用于构成页面的独立UI控件，例如下拉框、按钮以及列表等，且页面本身也可以理解为组件。

因此，当对每个组件的组合行为链进行执行操作时，前端120便可以基于业务需求在静态初始页面的基础上直接生成符合业务方的业务开发需求的前端页面。

因此，在本公开的实施例中，前端120可以只负责各个组件的维护和开发，以及抽象出各个组件的通用行为，即可以实现页面本身不存在任何业务逻辑，所有业务逻辑全部由服务端110动态下发。因此，只要服务端110所下发的业务流程符合预设业务开发约定，由于所有业务逻辑由抽象出的通用行为组成，使得不管是快速变化还是后期完全推翻的业务需求，都完全可以通过各个组件中快速组合行为达到改变业务流程的效果。这就极大地节省了前端开发人员的人力和时间成本，使得前端开发人员(如前端工程师)在这一过程只需要维护、开发组件与抽象行为即可。

图3示例性示出了根据本公开实施例的生成静态初始页面的方法流程图。

如图3所示，根据本公开的实施例，在操作S201生成静态初始页面中，包括操作S310-S330。

在操作S310中，获取服务端的业务下发指令；

在操作S320中，依据预设业务约定，对业务下发指令进行指令校验；以及

在操作S330中，响应于指令校验的结果，根据业务下发指令的布局参数排版当前页面，以生成静态初始页面。

如图1和图3所示，服务端110依据预设业务约定的指令格式生成一个用于生成前端页面的业务下发指令，该业务下发指令由多个字段按照业务约定拼接构成，其用于反映业务开发需求中前端页面开发的业务逻辑。前端120的调用接口用于拉取服务端110生成的业务下发指令。

如图1和图3所示，前端120在拉取到该业务下发指令之后，首先依据预设的业务约定对该业务下发指令进行指令格式校验(即指令校验)，以判断该业务下发指令是否符合预设业务约定。对应于指令格式校验成功和不成功，该指令校验的结果为校验通过和校验不通过，只有在指令校验结果为通过时，前端120将控制进入页面生成过程。

在本公开的实施例中，该业务下发指令具有由多个字段构成，具有多个字段的相应字段格式，如下表1所示，为本公开实施例中一业务下发指令的组成构成，其中，该业务下发指令由components、styles和actions等字段构成。其中components是数组结构，包含多个component对象，每个component对象可以是i、x、y、w以及h等子对象中的一个，其中i子对象对应于某组件的id，用于唯一标识该组件，该x、y子对象分别对应于某组件在前端页面的位置，w、h子对象则用于限定该组件在前端页面中的宽度和高度，name子对象则用于限定该组件的组件类型，props子对象用于定义该组件的初始化参数……具体可以参见表1，在此不作赘述。Styles用于定义组件的页面层级样式，例如背景、边框等。Actions用于定义组件的页面指令队列，具体可以参照下文。

表1

因此，在前端120拉取到服务端下发的业务下发指令后，首先对业务下发指令的字段格式(如上表1)进行校验，如果指令校验的结果为通过，则根据该业务下发指令开始页面生成的过程。

在本公开的实施例中，对静态初始页面的生成，需要依据业务下发指令的布局参数，通过前端120的布局处理模块对多个页面组件进行排版，以形成当前页面。其中，当前页面可以理解为静态初始页面的基础页面，仅仅作为多个组件的排版页面。

如图3所示，根据本公开的实施例，在操作S330根据业务下发指令的布局参数排版当前页面中，包括：

根据业务下发指令中的页面样式参数，设定当前页面的外层样式；

对具有外层样式的当前页面进行布局初始化；以及

根据业务下发指令中的部件参数，对经过布局初始化的当前页面进行组件实例化。

如图1和图3所示，布局参数可以包括也页面样式参数和部件参数。在完成指令校验之后，前端120根据业务下发指令中的页面样式参数(如styles字段)，以设定当前页面的外层样式，包括背景，边框，边距、颜色、透明度等，其用于定义静态初始页面的外层样式，以进行网页展示。

在本公开实施例的页面生成过程中，当设定好外层样式之后，需要对前端120的各个页面组件进行布局初始化，并根据业务下发指令中的components数组(即部件参数)，依次对各个页面组件进行组件实例化，以用于生成静态初始页面。其中组件实例化可以理解为组件初始化，在此不作赘述。

根据本公开的实施例，根据业务下发指令中的部件参数，对经过布局初始化的当前页面进行组件实例化，包括：根据多个组件中的每个组件的轴坐标参数、宽高参数、标识参数、名称参数、支撑参数以及组件样式参数，分别相应确定多个组件中的每个组件在当前页面中的排版位置、宽高、标识、名称、初始默认值以及组件样式。

如图1-图3所示，同时参照表1，在组件实例化过程中，需要根据每个组件部件参数(如components对象)对当前页面进行组建实例化。其中，可以根据各个组件的轴坐标参数(如x，y字段)确定该组件在页面中的位置；根据各个组件的宽高参数(如w，h字段)确定该组件在页面中的宽高；根据各个组件的标识参数(如i字段)初始化组件的唯一id，以作为后期对象引用唯一表示该组件的标识；根据各个组件的名称参数(如name字段)确定初始化的组件名称，用于定义该组件的组件类型；通过各个组件的支撑参数(如props字段)设定该组件的初始默认值，即初始化参数)；通过各个组件的组件样式参数(如styles字段)确定初始化组件的样式等等。因此，基于上述内容，可以完成对多个页面组件的组件实例化，以更好地实现对前端页面的生成。

其中，需要说明书的是，前端120的布局处理模块根据业务下发指令中的布局参数排版当前页面，需要处理各个组件的位置和大小。完成排版后，获得当前页面。继而，根据业务下发指令中的组件类型初始化各个组件，组件实例化需要根据指令中的配置进行，该配置可以包含组件的初始参数列表、组件的样式配置和组件的行为挂载。其中，组件的初始参数列表是指组件在初始化时需要接收的来自父层级的初始值，如表1。该组件的初始参数列表由父层级传入组件，组件在进行组件实例化时使用这些传入的初始值作为组件内部某些变量的默认值。而且，组件的样式配置指对于组件的样式进行配置化的字段。其中，根据组件类型的不同，支持的样式配置也不相同，具体支持样式配置需要前端120和服务端110共同约定。另外，组件的行为挂载是指在组件实例化时，根据业务下发指令对应该组件需要的触发各个执行动作的行为集合，为组件的不同动作触发点挂载各自不同的行为指令。

在本公开的实施例中，行为可以是对组件进行取值、赋值、接口请求、显示、隐藏、刷新以及校验等操作的通用行为。各个行为之间完全独立，相互之间不会影响。此外，对应每个组件的行为集合是指抽象行为的集合，例如抽象行为A、抽象行为B等。具体地，行为集合也是某个页面提供的可触发行为的集合，与布局处理模块同属于页面这一层级。其中，行为集合中的行为只能由前端的指令处理模块通过指令转换进行调用。页面的各个组件在调用行为集合中的抽象行为时需要传入包括触发组件对象引用、生效组件对象引用以及参数对象等内容。并且，在抽象行为的调用结束后，该组件会具有一个返回对象，该返回对象即可以理解为下文所述的组合行为链。其中，抽象行为可以指各个组件针对某种行为提供一个共同的接口抽象，是不同的组件之间所提取的同一属性行为，例如赋值。各种组件开发时需要各自独立去适配某种行为的逻辑，各种组件对于这些行为的适配可能相同，可能不相同，但对上层提供的行为接口一定是相同的。因此在行为集合中使用该抽象行为时，不需要关注该组件的组件类型，只需要按照同一格式进行调用即可。

组件的触发点通常包括初始化、点击、双击、输入、值变化以及销毁等，触发点被触发后，会将该触发点挂载的行为指令传给前端120的指令处理模块进行指令转换，挂载的行为指令可以理解为上述挂载于触发点的抽象行为集合的一个或多个抽象行为，多个抽象行为则可以是一个挂载行为队列，可实现抽象行为队列的依次执行。具体地，指令处理模块进行指令转换的过程为：在组件实例化之后，触发各页面的组件的触发点，根据组件传入的业务下发指令，依次调用该组件相应触发点上挂载的行为集合中的抽象行为。其中，若是挂载行为队列，需要依次将上一个行为的返回对象作为参数对象传入下一个行为。需要说明的是，当进行页面销毁时，会触发页面销毁的触发点。

图4示意性示出了根据本公开实施例的确定组合行为链的方法流程图。

如图4所示，根据本公开的实施例，在操作S202响应于静态初始页面之后，确定对应多个组件中的每个组件的组合行为链中，包括操作S410-S420。

在操作S410中，根据业务下发指令中的行为参数，对多个组件中的每个组件进行抽象行为挂载。

根据本公开的实施例，对多个组件中的每个组件进行抽象行为挂载，包括：对多个组件中的每个组件的行为集合中的每个抽象行为进行遍历以确定对应每个组件的抽象行为集合，依据抽象行为集合中每个抽象行为的触发参数，确定每个抽象行为的触发类型；以及根据触发类型，将每个抽象行为挂载到相应组件的触发点。

如图1和图4所示，在组件实例化后，前端120根据业务下发指令的行为参数(例如actions字段)，对多个组件中的每个组件进行抽象行为挂载。其中，对于actions字段，基于如下表2作进一步说明。

表2

Actions字段属于数组结构，包含多个action对象，例如emit字段的子对象用于定义组件的触发点的触发类型，index子对象则用于定义该触发点挂载的抽象行为的指令序号，以便于对抽象行为进行挂载排序。具体可以参照如上述表2，在此不作赘述。

具体地，前端120通过遍历actions对象列表中的每一个action子对象，根据action子对象的触发参数(如emit字段)，判断组件的抽象行为的触发类型的归属，即获取该抽象行为的触发类型，根据该触发类型，将每个抽象行为挂载到相应组件的触发点。相应地，将该抽象行为加入到组件内部相应的触发函数的行为队列中，并根据index字段判断组件的抽象行为的指令序号，对加入的抽象行为进行队列排序，以获得对应每个组件的抽象行为集合。

如图4所示，根据本公开的实施例，在操作S202响应于静态初始页面之后，确定对应多个组件中的每个组件的组合行为链中，还包括操作S420。

在操作S420中，根据每个抽象行为的序号参数，对相应组件的触发点上挂载的每个抽象行为进行排序，以确定对应多个组件中的每个组件的组合行为链。

如上所述，将该抽象行为加入到组件内部相应的触发函数的行为队列中，并根据对应每个抽象行为的序号参数(如index字段)判断个该组件的抽象行为的指令序号，对加入的抽象行为进行队列排序，实际上就是对陔组件的触发点的抽象行为进行挂载的过程，在完成抽象行为的挂载排序之后，则确定了对应多个组件中每个组件的组合行为链。

根据本公开的实施例，执行组合行为链以生成前端页面，包括：通过组合行为链中的每个抽象行为的行为类型和目标生效对象调用每个抽象行为的实现函数以传入参数对象，以生成前端页面。

在生成静态初始页面，并确定各个组件的组合行为链之后，在各个组件的使用过程中，一旦某组件的触发函数被触发，前端将执行触发函数中的对应该组件触发点挂载的抽象行为集合的行为队列，按照队列顺序，调用指令处理模块的指令转换函数，依次将各个抽象行为的指令对象传入，指令转换函数通过抽象行为对象的行为类型，调用行为集合中相应类型的抽象行为，抽象行为根据抽象行为对象的指令生效对象调用该对象中行为的具体实现函数并传入参数对象。

具体地，在组件完成挂载后，基于静态初始页面，前端120首先会判断业务下发指令的最外层中是否存在actions字段。如果判断存在actions字段，则继续依据emit字段判断是否存在触发类型为初始化的抽象行为。如果存在初始化的抽象行为，则说明该静态初始页面存在需要进行触发的初始化行为，则按照index字段调用指令处理模块的指令转换函数，从小到大依次将触发类型为初始化的抽象行为指令对象传入组件，指令转换函数通过抽象行为指令对象的行为类型(如表2中type子对象)，调用行为集合中相应类型的抽象行为，抽象行为根据行为对象的指令生效对象(如表2中target子对象)调用该抽象行为的具体实现函数并传入参数对象(如表2中param子对象)。同理，当对该静态初始页面进行页面销毁时，需要判断的是外层actions中是否存在触发类型为销毁的抽象行为对象，过程同上。借此，可以基于静态初始页面完成对前端页面的生成。其中，若被执行的抽象行为是一组件对应的抽象行为队列中第二个行为及之后的行为，还可以向该组件传入上一个行为的返回对象作为参数。

因此，本公开实施例的前端页面生成方法，可以通过对同一组件的不同抽象行为的组合，实现组件自身的变化或者组件之间的联动变化来完成业务逻辑，实现了业务下发。而且，对应组件的行为集合中的抽象行为被调用后，将根据传入的生效组件对象引用，去调用组件对象的相应行为进行页面生成实现。也即，通过组合不同的行为指令，构建组件与组件或者组件自身的行为链完成业务逻辑，服务端通过下发指令的控制。因此，前端项目开发的前端页面可以不包含具体的业务逻辑与操作逻辑，只包含组件与抽象出的通用行为，使得当业务方的开发需求发生变更的情况下，前端系统的开发人员只需要组件和抽象行为的维护和开发，由组件各自实现抽象行为中的具体功能，页面本身不存在任何业务流程和逻辑，当服务端下发业务流程时，下发的业务流程由前端抽象出的通用行为组成，实现了动态的业务流程的下发，节约了前端开发人员的人力和时间成本，极大提高了前端开发的效率。

图5示例性示出了根据本公开实施例的前端页面开发装置的架构图；

需要注意的是，图5所示仅为可以应用本公开实施例的前端页面开发装置500架构的示例，以帮助本领域技术人员理解本公开的技术内容，但并不意味着本公开实施例不可以用于其他设备、系统、环境或场景。

如图5所示，本公开实施例的另一方面提供了一种前端页面生成装置500，包括页面布局模块510、行为组合模块520和页面生成模块530。页面布局模块510用于生成静态初始页面；行为组合模块520用于响应于静态初始页面，确定对应多个组件中的每个组件的组合行为链；页面生成模块530用于执行组合行为链以生成前端页面

需要说明的是，上述的前端页面开发装置500用于实现上述的前端页面开发方法，在此不作赘述。

本领域技术人员应当理解，根据本公开的实施例的模块、子模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、子模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，页面布局模块510、行为组合模块520和页面生成模块530中的任意多个可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，页面布局模块510、行为组合模块520和页面生成模块530中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(FPGA)、可编程逻辑阵列(PLA)、片上系统、基板上的系统、封装上的系统、专用集成电路(ASIC)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，页面布局模块510、行为组合模块520和页面生成模块530中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图6示例性示出了根据本公开实施例的适于实现上述前端页面开发方法的电子设备的方框图。其中，图6示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

本公开实施例的另一方面提供了一种电子设备，包括一个或多个处理器和存储装置。存储装置，用于存储一个或多个程序，其中，当一个或多个程序被一个或多个处理器执行时，使得一个或多个处理器实现上述的方法。

如图6所示，根据本公开实施例的电子设备600包括处理器601，其可以根据存储在只读存储器(ROM)602中的程序或者从存储部分608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。处理器601例如可以包括通用微处理器(例如CPU)、指令集处理器和/或相关芯片组和/或专用微处理器(例如，专用集成电路(ASIC))，等等。处理器601还可以包括用于缓存用途的板载存储器。处理器601可以包括用于执行根据本公开实施例的方法流程的不同动作的单一处理单元或者是多个处理单元。

在RAM 603中，存储有设备600操作所需的各种程序和数据。处理器601、ROM 602以及RAM 603通过总线604彼此相连。处理器601通过执行ROM 602和/或RAM 603中的程序来执行根据本公开实施例的方法流程的各种操作。需要注意，所述程序也可以存储在除ROM 602和RAM 603以外的一个或多个存储器中。处理器601也可以通过执行存储在所述一个或多个存储器中的程序来执行根据本公开实施例的方法流程的各种操作。

根据本公开的实施例，设备600还可以包括输入/输出(I/O)接口605，输入/输出(I/O)接口605也连接至总线604。设备600还可以包括连接至I/O接口605的以下部件中的一项或多项：包括键盘、鼠标等的输入部分606；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分607；包括硬盘等的存储部分608；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分609。通信部分609经由诸如因特网的网络执行通信处理。驱动器610也根据需要连接至I/O接口605。可拆卸介质611，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器610上，以便于从其上读出的计算机程序根据需要被安装入存储部分608。

根据本公开的实施例，根据本公开实施例的方法流程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读存储介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分609从网络上被下载和安装，和/或从可拆卸介质611被安装。在该计算机程序被处理器601执行时，执行本公开实施例的系统中限定的上述功能。根据本公开的实施例，上文描述的系统、设备、装置、模块、单元等可以通过计算机程序模块来实现。

本公开实施例的另一方面提供了一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现上述的方法。

本公开的计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。例如，根据本公开的实施例，计算机可读存储介质可以包括上文描述的ROM 602和/或RAM 603和/或ROM 602和RAM 603以外的一个或多个存储器。

本公开实施例的另一方面提供了一种计算机程序，所述计算机程序包括计算机可执行指令，所述指令在被执行时用于实现如上所述的方法。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

上述一个或多个实施例具有如下优点或益效果：可以实现快速组合各个组件的抽象行为来改变业务流程，达到适应前端页面开发不满足最终开发需求或开发需求频繁变更的情况，使得开发人员在前端页面开发过程中只需要维护和开发组件和抽象行为即可，进而节省开发人员人力和时间成本，提高前端页面的开发效率。

至此，已经结合附图对本公开实施例进行了详细描述。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

以上对本公开的实施例进行了描述。但是，这些实施例仅仅是为了说明的目的，而并非为了限制本公开的范围。尽管在以上分别描述了各实施例，但是这并不意味着各个实施例中的措施不能有利地结合使用。本公开的范围由所附权利要求及其等同物限定。不脱离本公开的范围，本领域技术人员可以做出多种替代和修改，这些替代和修改都应落在本公开的范围之内。

Claims (11)

1.一种前端页面生成方法，包括：

生成静态初始页面；

响应于所述静态初始页面，确定对应多个组件中的每个组件的组合行为链；以及

执行所述组合行为链以生成所述前端页面。

2.根据权利要求1所述的方法，其中：所述生成静态初始页面，包括：

获取服务端的业务下发指令；

依据预设业务约定，对所述业务下发指令进行指令校验；以及

响应于所述指令校验的结果，根据所述业务下发指令的布局参数排版当前页面，以生成所述静态初始页面。

3.根据权利要求2所述的方法，其中：所述根据所述业务下发指令的布局参数排版当前页面，包括：

根据所述业务下发指令中的页面样式参数，设定所述当前页面的外层样式；

对具有所述外层样式的所述当前页面进行布局初始化；以及

根据所述业务下发指令中的部件参数，对经过所述布局初始化的当前页面进行组件实例化。

4.根据权利要求3所述的方法，其中：

根据所述业务下发指令中的部件参数，对经过所述布局初始化的当前页面进行组件实例化，包括：

根据所述多个组件中的每个组件的轴坐标参数、宽高参数、标识参数、名称参数、支撑参数以及组件样式参数，分别相应确定所述多个组件中的每个组件在所述当前页面中的排版位置、宽高、标识、名称、初始默认值以及组件样式。

5.根据权利要求2所述的方法，其中：所述响应于所述静态初始页面之后，确定对应多个组件中的每个组件的组合行为链，包括：

根据所述业务下发指令中的行为参数，对所述多个组件中的每个组件进行抽象行为挂载。

6.根据权利要求5所述的方法，其中：所述对所述多个组件中的每个组件进行抽象行为挂载，包括：

对所述多个组件中的每个组件的行为集合中的每个抽象行为进行遍历以确定对应所述每个组件的抽象行为集合，

依据所述抽象行为集合中每个抽象行为的触发参数，确定所述每个抽象行为的触发类型；以及

根据所述触发类型，将所述每个抽象行为挂载到相应组件的触发点。

7.根据权利要求6所述的方法，其中：所述响应于所述静态初始页面之后，确定对应多个组件中的每个组件的组合行为链，还包括：

根据所述每个抽象行为的序号参数，对所述相应组件的触发点上挂载的所述每个抽象行为进行排序，以确定对应多个组件中的每个组件的组合行为链。

8.根据权利要求2所述的方法，其中：所述执行所述组合行为链以生成所述前端页面，包括：

通过所述组合行为链中的每个抽象行为的行为类型和目标生效对象调用所述每个抽象行为的实现函数以传入参数对象，以生成所述前端页面。

9.一种前端页面生成装置，包括：

页面布局模块，用于生成静态初始页面；

行为组合模块，用于响应于所述静态初始页面，确定对应多个组件中的每个组件的组合行为链；以及

页面生成模块，用于执行所述组合行为链以生成所述前端页面。

10.一种电子设备，包括：

一个或多个处理器；

存储装置，用于存储一个或多个程序，

其中，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现权利要求1-8中任一项所述的方法。

11.一种计算机可读存储介质，其上存储有可执行指令，该指令被处理器执行时使处理器实现权利要求1-8中任一项所述的方法。

Images