CN114625444A

CN114625444A - 一种基于组件的数据处理方法及装置

Info

Publication number: CN114625444A
Application number: CN202210326542.2A
Authority: CN
Inventors: 崔丹阳
Original assignee: Beijing Youzhuju Network Technology Co Ltd
Current assignee: Beijing Youzhuju Network Technology Co Ltd
Priority date: 2022-03-30
Filing date: 2022-03-30
Publication date: 2022-06-14

Abstract

本申请公开了一种基于组件的数据处理方法，该方法可以由客户端执行，客户端可以获取用户在网页中包括的第一参数的输入区输入的第一值，而后，将所述第一值作为目标组件中第一变量的值运行所述目标组价，从而实现修改所述第一参数对应的功能。在本申请实施例中，所述目标组件为技术栈组件库中的组件，所述技术栈组件通过对浏览器支持的原生组件进行处理得到，所述技术栈组件库中包括至少两个技术栈所支持的组件。由此可见，在本申请实施例中，对于提供组件的组件库而言，其无需分别为各个技术栈研发对应的组件，而是基于对浏览器支持的原生组件进行处理，从而得到至少两个技术栈所支持的技术栈组件，有效降低了组件库的研发成本。

Description

一种基于组件的数据处理方法及装置

技术领域

本申请涉及计算机技术领域，特别是涉及一种基于组件的数据处理方法及装置。

背景技术

为实现某一业务功能，需要借助于组件库提供的组件。目前，在实现业务功能时，可以根据业务需求选择技术栈，相应的，利用与该技术栈对应的组件实现所述业务功能。

考虑到用户可能使用的技术栈有多种，为了尽可能满足用户需求，组件库需要提供与各个技术栈分别对应的组件，相应的，组件库的研发成本较高。

因此，急需一种方案，能够解决上述问题。

发明内容

本申请所要解决的技术问题是如何降低组件库的研发成本，提供一种基于组件的数据处理方法及装置。

第一方面，本申请实施例提供了一种基于组件的数据处理方法，所述方法包括：

获取用户在网页中包括的第一参数的输入区输入的第一值；

将所述第一值作为目标组件中第一变量的值运行所述目标组件，以实现修改所述第一参数对应的功能；其中：所述目标组件为技术栈组件库中的组件，所述技术栈组件通过对浏览器支持的原生组件进行处理得到，所述技术栈组件库中包括至少两个技术栈所支持的组件。

可选的，所述第一参数为采用所述原生组件的CSS变量所提取的、支持用户配置的参数。

可选的，所述对浏览器支持的原生组件进行处理，包括：

对所述浏览器支持的原生组件中的参数进行处理，得到符合所述至少两个技术栈所支持的参数传递方式的技术栈组件。

可选的，所述第一参数用于指示网页中目标对象的目标特征。

可选的，所述目标对象包括：

文字或者边框。

可选的，所述目标特征包括以下任意一项：

颜色、背景颜色、字体、字号、风格、字重、或者宽度。

可选的，所述原生组件包括：

WebComponents组件。

可选的，所述至少两个技术栈，包括：

Vue技术栈和React技术栈。

第二方面，本申请实施例提供了一种基于组件的数据处理装置，所述装置包括：

获取单元，用于获取用户在网页中包括的第一参数的输入区输入的第一值；

运行单元，用于将所述第一值作为目标组件中第一变量的值运行所述目标组件，以实现修改所述第一参数对应的功能；其中：所述目标组件为技术栈组件库中的组件，所述技术栈组件通过对浏览器支持的原生组件进行处理得到，所述技术栈组件库中包括至少两个技术栈所支持的组件。

可选的，所述对浏览器支持的原生组件进行处理，包括：

可选的，所述目标对象包括：

文字或者边框。

可选的，所述目标特征包括以下任意一项：

颜色、背景颜色、字体、字号、风格、字重、或者宽度。

可选的，所述原生组件包括：

WebComponents组件。

可选的，所述至少两个技术栈，包括：

Vue技术栈和React技术栈。

第三方面，本申请实施例提供了一种设备，所述设备包括处理器和存储器；

所述处理器用于执行所述存储器中存储的指令，以使得所述设备执行如以上第一方面中任一项所述的方法。

第四方面，本申请实施例提供了一种计算机可读存储介质，包括指令，所述指令指示设备执行如以上第一方面中任一项所述的方法。

第五方面，本申请实施例提供了一种计算机程序产品，当所述计算机程序产品在计算机上运行时，使得计算机执行以上第一方面任一项所述的方法。

与现有技术相比，本申请实施例具有以下优点：

本申请实施例提供了一种基于组件的数据处理方法，该方法可以由客户端执行，在一个示例中，客户端可以获取用户在网页中包括的第一参数的输入区输入的第一值，而后，将所述第一值作为目标组件中第一变量的值运行所述目标组价，从而实现修改所述第一参数对应的功能。在本申请实施例中，所述目标组件为技术栈组件库中的组件，所述技术栈组件通过对浏览器支持的原生组件进行处理得到，所述技术栈组件库中包括至少两个技术栈所支持的组件。由此可见，在本申请实施例中，对于提供组件的组件库而言，其无需分别为各个技术栈研发对应的组件，而是基于对浏览器支持的原生组件进行处理，从而得到至少两个技术栈所支持的技术栈组件，有效降低了组件库的研发成本。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的一种基于组件的数据处理方法的流程示意图；

图2为本申请实施例提供的一种基于组件的数据处理装置的结构示意图；

图3为本申请实施例提供的一种设备的结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

本申请的发明人经过研究发现，目前，组件库需要提供与各个技术栈分别对应的组件，即：需要分别研发与各个技术栈分别对应的组件，从而导致组件库的研发成本较高。

为了解决上述问题，本申请实施例提供了一种基于组件的数据处理方法及装置。

下面结合附图，详细说明本申请的各种非限制性实施方式。

示例性方法

参见图1，该图为本申请实施例提供的一种基于组件的数据处理方法的流程示意图。

图1所示的基于组件的数据处理方法，可以由客户端执行。所述方法例如可以包括以下S101-S102。

S101：获取用户在网页中包括的第一参数的输入区输入的第一值。

在本申请实施例中，所述第一参数为网页中用户可以配置的参数。其中，用户可以配置的参数，可以指的是用户能够修改的参数。

在一个示例中，所述第一参数用于指示网页中模板对象的目标特征。

本申请实施例不具体限定所述目标对象，所述目标对象可以是网页中的任意对象。作为一个示例，所述目标对象可以是文字。作为又一个示例，所述目标对象可以是边框。

本申请实施例不具体限定所述目标特征，在一个示例中，所述目标特征可以是颜色、背景颜色、字体、字号、风格、字重、或者宽度中的任意一项。

如前所述，第一参数为用户能够修改的参数。通过上述对于目标对象和目标特征的描述可知，在一个示例中，用户通过修改第一参数，可以实现对文字的颜色、字体、字号或者字重等特征进行修改。其中，字重指的是文字的粗细程度；文字的背景颜色指的是文字所在的区域的背景颜色。在又一个示例中，通过修改第一参数，可以实现对边框的颜色、背景颜色、风格或者宽度等特征进行修改。其中，边框的风格，可以是实线边框、双实线边框、由圆点组成的边框等等，此处不一一列举说明；边框的背景颜色，指的是边框内部区域的背景颜色。

在一个示例中，用户可以在网页中触发第一参数的修改操作，在用户触发针对第一参数的修改操作之后，所述客户端可以显示第一参数的输入区，而后，用户可以在所述第一参数的输入区，输入第一值，从而实现将第一参数的值修改为所述第一值。

S102：将所述第一值作为目标组件中第一变量的值运行所述目标组件，以实现修改所述第一参数对应的功能，其中：所述目标组件为技术栈组件库中的组件，所述技术栈组件通过对浏览器支持的原生组件进行处理得到，所述技术栈组件库中包括至少两个技术栈所支持的组件。

在本申请实施例中，客户端获取第一值之后，可以将所述第一值作为目标组件中第一变量的值运行所述目标组件，以实现修改所述第一参数对应的功能。其中，修改所述第一参数对应的功能，可以是将目标对象的目标特征修改为所述第一值，关于所述目标对象和目标特征，可以参考上文的相关描述部分，此处不做详述。

在本申请实施例中，所述目标组件为技术栈组件库中的组件，所述技术栈组件库中包括至少两个技术栈所支持的组件，并且，所述技术栈组件是通过对浏览器支持的原生组件进行处理得到。

在一个示例中，所谓对浏览器支持的原生组件进行处理，可以是对所述浏览器支持的原生组件中的参数进行处理，得到符合所述至少两个技术栈所支持的参数传递方式的技术栈组件。即对原生组件中的参数进行包装，得到分别符合所述至少两个技术栈中每个技术栈分别支持的参数传递方式的组件，从而得到技术栈组件。而对所述原生组件进行处理的处理过程较为简单，因此，采用这种方式，无需针对各个技术栈分别研发对应的组件，而是首先研发所述原生组件，而后对所述原生组件进行处理即可。而研发原生组件的处理过程与研发某一技术栈对应的组件的过程类似，但是，对原生组件的处理过程，远远比研发某一技术栈对应的组件简单。因此，采用这种方式得到技术栈组件，与针对各个技术栈分别研发对应的组件相比，大大降低了组件库的研发成本。

如上所述，第一参数可以是网页中用户可以配置的参数。在一个示例中，所述第一参数可以是采用所述原生组件的CSS变量所提取的、支持用户配置的参数。

关于所述原生组件，需要说明的是，本申请实施例不具体限定所述原生组件，所述原生组件可以是浏览器支持的任意一个原生组件，在一个示例中，所述原生组件可以包括WebComponents组件。

关于前述技术栈组件支持的至少两个技术栈，本申请实施例不具体限定，在一个示例中，所述至少两个技术栈可以包括Vue技术栈和React技术栈。

通过以上描述可知，利用本申请实施例的方案，对于提供组件的组件库而言，其无需分别为各个技术栈研发对应的组件，而是基于对浏览器支持的原生组件进行处理，从而得到至少两个技术栈所支持的技术栈组件，有效降低了组件库的研发成本。

示例性设备

基于以上实施例提供的方法，本申请实施例还提供了一种装置，以下结合附图介绍该装置。

参见图2，图2为本申请实施例提供的一种基于组件的数据处理装置的结构示意图。所述装置200例如可以具体包括：获取单元201和运行单元202。

获取单元201，用于获取用户在网页中包括的第一参数的输入区输入的第一值；

运行单元202，用于将所述第一值作为目标组件中第一变量的值运行所述目标组件，以实现修改所述第一参数对应的功能；其中：所述目标组件为技术栈组件库中的组件，所述技术栈组件通过对浏览器支持的原生组件进行处理得到，所述技术栈组件库中包括至少两个技术栈所支持的组件。

可选的，所述对浏览器支持的原生组件进行处理，包括：

可选的，所述目标对象包括：

文字或者边框。

可选的，所述目标特征包括以下任意一项：

颜色、背景颜色、字体、字号、风格、字重、或者宽度。

可选的，所述原生组件包括：

WebComponents组件。

可选的，所述至少两个技术栈，包括：

Vue技术栈和React技术栈。

由于所述装置200是与以上方法实施例提供的基于组件的数据处理方法对应的装置，所述装置200的各个单元的具体实现，均与以上方法实施例所述的基于组件的数据处理方法为同一构思，因此，关于所述装置200的各个单元的具体实现，可以参考以上方法实施例的相关描述部分，此处不再赘述。

本申请实施例还提供了一种设备，所述设备包括处理器和存储器；

所述处理器用于执行所述存储器中存储的指令，以使得所述设备执行以上方法实施例提供的基于组件的数据处理方法。

下面参考图3，其示出了适于用来实现本申请实施例的电子设备300的结构示意图。本申请实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(Personal Digital Assistant，个人数字助理)、PAD(portable androiddevice，平板电脑)、PMP(Portable Media Player，便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV(television，电视机)、台式计算机等等的固定终端。图3示出的电子设备仅仅是一个示例，不应对本申请实施例的功能和使用范围带来任何限制。

如图3所示，电子设备300可以包括处理装置(例如中央处理器、图形处理器等)301，其可以根据存储在只读存储器(ROM)302中的程序或者从存储装置308加载到随机访问存储器(RAM)303中的程序而执行各种适当的动作和处理。在RAM303中，还存储有电子设备300操作所需的各种程序和数据。处理装置301、ROM 302以及RAM 303通过总线304彼此相连。输入/输出(I/O)接口305也连接至总线304。

通常，以下装置可以连接至I/O接口305：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置306；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置307；包括例如磁带、硬盘等的存储装置308；以及通信装置309。通信装置309可以允许电子设备300与其他设备进行无线或有线通信以交换数据。虽然图3示出了具有各种装置的电子设备300，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。

特别地，根据本申请的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本申请的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置309从网络上被下载和安装，或者从存储装置308被安装，或者从ROM302被安装。在该计算机程序被处理装置301执行时，执行本申请实施例的方法中限定的上述功能。

本申请实施例提供的电子设备与上述实施例提供的方法属于同一发明构思，未在本实施例中详尽描述的技术细节可参见上述实施例，并且本实施例与上述实施例具有相同的有益效果。

本申请实施例提供一种计算机可读介质，其上存储有计算机程序，其中，所述程序被处理器执行时实现如上述任一实施例所述的方法。

需要说明的是，本申请上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本申请中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本申请中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。

在一些实施方式中，客户端、服务器可以利用诸如HTTP(HyperText TransferProtocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“LAN”)，广域网(“WAN”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。

上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。

上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备执行上述方法。

可以以一种或多种程序设计语言或其组合来编写用于执行本申请的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。

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

描述于本申请实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元/模块的名称在某种情况下并不构成对该单元本身的限定，例如，语音数据采集模块还可以被描述为“数据采集模块”。

本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、片上系统(SOC)、复杂可编程逻辑设备(CPLD)等等。

在本申请的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本申请的其它实施方案。本申请旨在涵盖本申请的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本申请的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本申请的真正范围和精神由下面的权利要求指出。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

以上所述仅为本申请的较佳实施例，并不用以限制本申请，凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims

1.一种基于组件的数据处理方法，其特征在于，所述方法包括：

获取用户在网页中包括的第一参数的输入区输入的第一值；

2.根据权利要求1所述的方法，其特征在于，所述第一参数为采用所述原生组件的CSS变量所提取的、支持用户配置的参数。

3.根据权利要求1所述的方法，其特征在于，所述对浏览器支持的原生组件进行处理，包括：

4.根据权利要求1所述的方法，其特征在于，所述第一参数用于指示网页中目标对象的目标特征。

5.根据权利要求4所述的方法，其特征在于，所述目标对象包括：

文字或者边框。

6.根据权利要求4或5所述的方法，其特征在于，所述目标特征包括以下任意一项：

颜色、背景颜色、字体、字号、风格、字重、或者宽度。

7.根据权利要求1所述的方法，其特征在于，所述原生组件包括：

WebComponents组件。

8.根据权利要求1所述的方法，其特征在于，所述至少两个技术栈，包括：

Vue技术栈和React技术栈。

9.一种基于组件的数据处理装置，其特征在于，所述装置包括：

10.一种设备，其特征在于，所述设备包括处理器和存储器；

所述处理器用于执行所述存储器中存储的指令，以使得所述设备执行如权利要求1至8中任一项所述的方法。

11.一种计算机可读存储介质，其特征在于，包括指令，所述指令指示设备执行如权利要求1至8中任一项所述的方法。