CN110990087B

CN110990087B - 网络组件嵌套运行方法、装置及数据处理设备

Info

Publication number: CN110990087B
Application number: CN201911181078.7A
Authority: CN
Inventors: 丁鑫
Original assignee: Beijing Mininglamp Software System Co ltd
Current assignee: Beijing Mininglamp Software System Co ltd
Priority date: 2019-11-27
Filing date: 2019-11-27
Publication date: 2023-03-21
Anticipated expiration: 2039-11-27
Also published as: CN110990087A

Abstract

本申请一种网络组件嵌套运行方法、装置及数据处理设备，所述方法包括：运行包括第一组件及第二组件的Web页面；在动态创建所述第一组件时，将所述第二组件的名称作为属性参数传入所述第一组件；在所述第一组件被执行时，根据所述属性参数创建相应的第二组件，并使该第二组件在所述第一组件中嵌套执行。本实施例提供的网络组件嵌套运行方法、装置及数据处理设备，通过将网络组件参数化，把需要嵌套展示的内部组件转换为组件参数的方式来定义，在动态创建的场景下也能实现组件的嵌套展示。

Description

网络组件嵌套运行方法、装置及数据处理设备

技术领域

本申请涉及页面开发技术领域，具体而言，涉及一种网络组件嵌套运行方法、装置及数据处理设备。

背景技术

前端Web页面开发通常使用组件化的技术，以达到更好复用的目的。网络组件(Web组件)常使用JavaScript来定义，然后通过Html标签的方式来使用。一些较为复杂的网络组件可能会由多个其他网络组件来构成，并通过嵌套的方式来使用。当一个网络组件被嵌套在另一个网络组件内部使用时，通过外层网络组件来设置内部网络组件的属性非常复杂，尤其是外层组件动态创建的情况。

发明内容

为了克服现有技术中的上述不足，本申请的目的之一在于提供一种网络组件嵌套运行方法，所述方法包括：

响应于网页文件的启动，在创建第一组件的过程中，将第二组件的标识作为属性参数传入所述第一组件；

响应于所述第一组件的执行，根据所述属性参数创建所述第二组件，其中，所述第二组件在所述第一组件中嵌套执行。

在本申请的一种可能的实现方式中，所述响应于网页文件的启动，在创建第一组件的过程中，将第二组件的标识作为属性参数传入所述第一组件的步骤，包括：

在动态创建所述第一组件时，将所述第二组件的名称作为选择属性的参数传入所述第一组件；

所述响应于所述第一组件的执行，根据所述属性参数创建所述第二组件，其中，所述第二组件在所述第一组件中嵌套执行的步骤，包括：

在所述第一组件被执行时，根据所述选择属性的参数创建相应的第二组件。

在动态创建所述第一组件时，将所述第二组件的名称及所述第二组件所需的参数作为属性参数传入所述第一组件；

在所述第一组件被执行时，根据所述属性参数创建相应的第二组件并将所述第二组件所需的参数传入所述第二组件。

在运行JavaScript脚本动态创建所述第一组件时，将所述第二组件的名称作为属性参数传入所述第一组件。

在本申请的一种可能的实现方式中，所述第一组件及所述第二组件为采用HTML语言定义的组件。

本申请的另一目的在于提供一种网络组件嵌套运行装置，所述装置包括：

第一组件创建模块，用于响应于网页文件的启动，在创建第一组件的过程中，将第二组件的标识作为属性参数传入所述第一组件；

第二组件创建模块，用于响应于所述第一组件的执行，根据所述属性参数创建所述第二组件，其中，所述第二组件在所述第一组件中嵌套执行。

在本申请的一种可能的实现方式中，所述第一组件创建模块具体用于在动态创建所述第一组件时，将所述第二组件的名称作为选择属性的参数传入所述第一组件；

所述第二组件创建模块具体用于在所述第一组件被执行时，根据所述选择属性的参数创建相应的第二组件。

在本申请的一种可能的实现方式中，所述第一组件创建模块具体用于在动态创建所述第一组件时，将所述第二组件的名称及所述第二组件所需的参数作为属性参数传入所述第一组件；

所述第二组件创建模块具体用于在所述第一组件被执行时，根据所述属性参数创建相应的第二组件并将所述第二组件所需的参数传入所述第二组件。

本申请的另一目的在于提供一种数据处理设备，包括机器可读存储介质及处理器，所述机器可读存储介质存储有机器可执行指令，所述机器可执行指令在被所述处理器执行时，实现本申请提供的网络组件嵌套运行方法。

本申请的另一目的在于提供一种机器可读存储介质，所述机器可读存储介质存储有机器可执行指令，所述机器可执行指令在被处理器执行时，实现本申请提供的网络组件嵌套运行方法。

相对于现有技术而言，本申请具有以下有益效果：

本申请提供的网络组件嵌套运行方法、装置及数据处理设备，通过将网络组件参数化，把需要嵌套展示的内部组件转换为组件参数的方式来定义，在动态创建的场景下也能实现组件的嵌套展示。

附图说明

为了更清楚地说明本申请实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本申请的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本申请实施例提供的数据处理设备的示意图；

图2为本申请实施例提供的网络组件嵌套运行方法的流程示意图之一；

图3为本申请实施例提供的网络组件嵌套运行方法的流程示意图之二；

图4为本申请实施例提供的网络组件嵌套运行装置的功能模块示意图。

图标：100-数据处理设备；110-网络组件嵌套运行装置；111-第一组件创建模块；112-第二组件创建模块；120-机器可读存储介质；130-处理器。

具体实施方式

为使本申请实施例的目的、技术方案和优点更加清楚，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本申请一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本申请实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本申请的实施例的详细描述并非旨在限制要求保护的本申请的范围，而是仅仅表示本申请的选定实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

在本申请的描述中，需要说明的是，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

此外，术语“水平”、“竖直”、“悬垂”等术语并不表示要求部件绝对水平或悬垂，而是可以稍微倾斜。如“水平”仅仅是指其方向相对“竖直”而言更加水平，并不是表示该结构一定要完全水平，而是可以稍微倾斜。

在本申请的描述中，还需要说明的是，除非另有明确的规定和限定，术语“设置”、“安装”、“相连”、“连接”应做广义理解，例如，可以是固定连接，也可以是可拆卸连接，或一体地连接；可以是机械连接，也可以是电连接；可以是直接相连，也可以通过中间媒介间接相连，可以是两个元件内部的连通。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。

在现有技术的一些实现方式中，为了实现组件的嵌套展示，需要使用WebComponents规范定义的<slot>元素，<slot>元素是HTML语言中网络组件内的占位符。该占位符可以在后期使用是被别的组件替换，以达到组件嵌套的目的。

例如，定义一个组件my-comp1，内容如下：

在组件my-comp1中里面定义了一个名为my-text的slot元素。

再定义另一个组件my-comp2，内容如下：

当使用my-comp1的时候，将my-comp2嵌套到my-comp1内部，并将my-comp2的slot属性设顶为定义的slot名称：

<my-comp1>

<my-comp2 slot＝"my-text"></my-comp2>

</my-comp1>

通过上述方式，可以将两个组件的内容嵌套展示，实际达到嵌套展示的效果如下：

其中，slot元素的内容已被替换为my-comp2的内容。

但是在上述方案中，当使用JavaScript语言动态创建my-comp1组件时，无法设置slot元素的替换内容，导致my-comp1组件只能通过HTML标记语言静态使用，无法动态创建。

有鉴于此，本实施例提供了一种可以自由定义复杂嵌套组件的方案，下面对本实施例提供的方案进行详细解释。

请参照图1，图1本实施例提供的一种数据处理设备100的方框示意图。所述数据处理设备100包括网络组件嵌套运行装置110、机器可读存储介质120及处理器130。

所述机器可读存储介质120及处理器130各元件相互之间直接或间接地电性连接，以实现数据的传输或交互。例如，这些元件相互之间可通过一条或多条通讯总线或信号线实现电性连接。所述网络组件嵌套运行装置110包括至少一个可以软件或固件(firmware)的形式存储于所述机器可读存储介质120中或固化在所述数据处理设备100的操作系统(operating system，OS)中的软件功能模块。所述处理器130用于执行所述机器可读存储介质120中存储的可执行模块，例如所述网络组件嵌套运行装置110所包括的软件功能模块及计算机程序等。

其中，所述机器可读存储介质120可以是，但不限于，随机存取存储器(RandomAccess Memory，RAM)，只读存储器(Read Only Memory，ROM)，可编程只读存储器(Programmable Read-Only Memory，PROM)，可擦除只读存储器(Erasable ProgrammableRead-Only Memory，EPROM)，电可擦除只读存储器(Electric Erasable ProgrammableRead-Only Memory，EEPROM)等。其中，机器可读存储介质120用于存储程序，所述处理器130在接收到执行指令后，执行所述程序。

所述处理器130可能是一种集成电路芯片，具有信号的处理能力。上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本申请实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

请参照图2，图2为应用于图1所示的数据处理设备100的一种网络组件嵌套运行方法的流程图，以下将对所述方法包括各个步骤进行详细阐述。

步骤S110，响应于网页文件的启动，在创建第一组件的过程中，将第二组件的标识作为属性参数传入所述第一组件。

在本实施例中，所述数据处理设备100可以获取包含第一组件及第二组件的Web页面，该Web页面的形式可以为HTML文件。

可选地，在本实施例中，所述Web页面中可以预先定义有第一组件，且该第一组件中预先配置预设属性，例如，选择(options)属性。该属性包含了该组件所有可设置的参数，如内部嵌套的第二组件的参数。并定义出需要在所述第一组件中嵌套展示的第二组件。

例如，定义第一组件my-comp1，内容如下：

再定义第二组件my-comp2，内容如下：

可选地，在本实施例中，所述Web页面中可以预先定义有动态创建第一组件的函数方法，通过该方法输入第一组件的名称和options属性，即可生成所需的组件。即，响应于网页文件的启动，在创建第一组件的过程中，将所述第二组件的名称作为options属性的参数传入所述第一组件。

可选地，所述动态创建第一组件的函数方法可以为JavaScript脚本中的方法。即，在运行JavaScript脚本动态创建所述第一组件时，将所述第二组件的名称作为属性参数传入所述第一组件。

例如，创建第一组件并传入第二组件名称的函数可以如下所示。

步骤S120，响应于所述第一组件的执行，根据所述属性参数创建所述第二组件，其中，所述第二组件在所述第一组件中嵌套执行。

在本实施例中，响应于所述第一组件的执行，根据所述option属性的参数创建相应的第二组件。

例如，在上述例子中，当实际运行的时候，根据传入的options属性参数，第一组件my-comp1内部的renderComponent函数会返回第二组件my-comp2的内容，从而生成最终内容如下所示：

如此，可以在不使用占位符slot元素的情况下实现组件嵌套，并且在有多级嵌套的情况下，只需要在option中增加参数即可。

可选地，若第二组件还具有属性，请参照图3，图3为本实施例提供另一种网络组件嵌套运行方法的流程示意图，该方法可以包括一下步骤。

步骤S210，响应于网页文件的启动，在创建第一组件的过程中，将所述第二组件的名称及所述第二组件所需的参数作为属性参数传入所述第一组件。

在本实施例中，所述数据处理设备接收到的Web页面中预先定义有第一组件my-comp1,内容如下：

并且还预先定义有第二组件my-comp2,内容如下：

<div>

<imgsrc＝${this.options.url}

/>

<input type＝“text"

value＝${this.options.value}

/>

</div>

该第二组件包括显示了一个图片和一个文本输入框，图片的地址和文本框的内容可以通过参数传入。例如，在上述例子中，options属性中的url参数为所述第二组件中需要显示的图片的url地址，options属性中的value参数为所述第二组件中需要显示的文字的字符串数据。

步骤S220，响应于所述第一组件的执行，根据所述属性参数创建所述第二组件并将所述第二组件所需的参数传入所述第二组件。

例如，在步骤S220中，运行动态语言脚本动态创建第一组件my-comp1的时候,将第二组件my-comp2的名称和属性一起传入第一组件，如下若是

其中，“http://xxx.com/pic1.png”为第二组件中需要显示的图片的URL地址，“some text”为第二组件中需要展示的文本。

如此，在步骤S230中，第一组件被执行时，可以根据所述属性参数创建相应的第二组件并将所述第二组件所需的参数传入所述第二组件，最终显示的内容为：

<h1>hello</h1>

<p>

<div>

<img

src＝"http://xxx.com/pic1.png"

/>

<input

type＝"text"

value＝"some text"

/>

</div>

</p>

请参照图4，图4位本实施例提供的一种网络组件嵌套运行装置110的功能模块示意图，该网络组件嵌套运行装置110包括至少一个可以软件形式存储于机器可读存储介质中的功能模块。从功能上划分，所述网络组件嵌套运行装置110可以包括第一组件创建模块111和第二组件创建模块112。

所述第一组件创建模块111用于响应于网页文件的启动，在动态创建所述第一组件的过程中，将所述第二组件的标识作为属性参数传入所述第一组件。

本实施例中，所述第一组件创建模块111可用于执行图2所示的步骤S110或图3所示的步骤S210，关于所述第一组件创建模块111的具体描述可参对所述步骤S110或S210的描述。

所述第二组件创建模块112用于响应于所述第一组件被执行的执行，根据所述属性参数创建所述第二组件其中，所述第二组件在所述第一组件中嵌套执行。

本实施例中，所述第二组件创建模块112可用于执行图2所示的步骤S220或图3所示的步骤S220，关于所述第二组件创建模块112的具体描述可参对所述步骤S120或S220的描述。

可选地，在本实施例中，所述第一组件创建模块111具体用于在动态创建所述第一组件时，将所述第二组件的名称作为options属性的参数传入所述第一组件。

所述第二组件创建模块112具体用于在所述第一组件被执行时，根据所述option属性的参数创建相应的第二组件。

可选地，在本实施例中，所述第一组件创建模块111具体用于在动态创建所述第一组件时，将所述第二组件的名称及所述第二组件所需的参数作为属性参数传入所述第一组件。

所述第二组件创建模块112具体用于在所述第一组件被执行时，根据所述属性参数创建相应的第二组件并将所述第二组件所需的参数传入所述第二组件。

综上所述，本申请提供的网络组件嵌套运行方法、装置及数据处理设备，通过将网络组件参数化，把需要嵌套展示的内部组件转换为组件参数的方式来定义，在动态创建的场景下也能实现组件的嵌套展示。

在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，也可以通过其它的方式实现。以上所描述的装置实施例仅仅是示意性的，例如，附图中的流程图和框图显示了根据本申请的多个实施例的装置、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现方式中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

另外，在本申请各个实施例中的各功能模块可以集成在一起形成一个独立的部分，也可以是各个模块单独存在，也可以两个或两个以上模块集成形成一个独立的部分。

所述功能如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述，仅为本申请的各种实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应所述以权利要求的保护范围为准。

Claims

1.一种网络组件嵌套运行方法，其特征在于，所述方法包括：

响应于所述第一组件的执行，根据所述属性参数创建所述第二组件，其中，所述第二组件在所述第一组件中嵌套执行；

所述响应于网页文件的启动，在创建第一组件的过程中，将第二组件的标识作为属性参数传入所述第一组件的步骤，包括：

2.根据权利要求1所述的方法，其特征在于，

3.根据权利要求1所述的方法，其特征在于，所述响应于网页文件的启动，在创建第一组件的过程中，将第二组件的标识作为属性参数传入所述第一组件的步骤，包括：

4.根据权利要求1所述的方法，其特征在于，所述第一组件及所述第二组件为采用HTML语言定义的组件。

5.一种网络组件嵌套运行装置，其特征在于，所述装置包括：

第二组件创建模块，用于响应于所述第一组件的执行，根据所述属性参数创建所述第二组件，其中，所述第二组件在所述第一组件中嵌套执行；

所述第一组件创建模块具体用于在动态创建所述第一组件时，将所述第二组件的名称作为选择属性的参数传入所述第一组件；

6.根据权利要求5所述的装置，其特征在于，

所述第一组件创建模块具体用于在动态创建所述第一组件时，将所述第二组件的名称及所述第二组件所需的参数作为属性参数传入所述第一组件；

7.一种数据处理设备，其特征在于，包括机器可读存储介质及处理器，所述机器可读存储介质存储有机器可执行指令，所述机器可执行指令在被所述处理器执行时，实现权利要求1-4任意一项所述的方法。

8.一种机器可读存储介质，其特征在于，所述机器可读存储介质存储有机器可执行指令，所述机器可执行指令在被处理器执行时，实现权利要求1-4任意一项所述的方法。