CN115981750B - 一种基于递归算法的组件配置方法 - Google Patents

Abstract

本发明提供了一种基于递归算法的组件配置方法，包括：S1：使用JSON对象的数据格式保存组件中组件配置：所述组件配置包括组件数据配置、输入组件配置、数据依赖配置；S2：利用递归算法解析S1中所述输入组件配置生成输入组件，再根据输入组件和S1中所述组件数据配置利用递归算法生成组件数据；S3：解析S1中的组件并生成数据中心，利用所述数据中心关联S2中的组件数据；当所述数据中心的内容被修改后，所述数据中心会进行数据拦截并将修改的内容合并到组件数据中；S4：利用运行时环境中的组件渲染器自动渲染组件，从而实现组件配置。本发明解决组件配置不灵活的问题，当组件需要修改时，只需要修改组件配置即可，从而减少系统的开发、维护成本。

Description

一种基于递归算法的组件配置方法

技术领域

本发明涉及计算机应用技术领域，尤其涉及一种基于递归算法的组件配置方法。

背景技术

随着Web系统(World Wide Web，即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统)业务需求增多，Web系统业务人员、开发人员、维护人员的任务也随之加重。为了减轻工作量，提升Web系统的扩展性，应对纷繁复杂的业务需求挑战，一种通过配置参数即可生成页面的系统应运而生，我们简称这种系统为页面配置系统。目前市面上的页面配置系统，一般通过前端开发(创建Web系统呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案)组件(是对数据和方法的简单封装，即可复用的前端代码)、业务人员在Web系统中输入预设的组件参数、Web系统渲染组件等步骤，基本可以实现简单的业务需求。例如一种支持SaaS多租户系统的个性化页面配置方法(CN111930381B,20211119)，通过添加组件、配置组件参数、渲染组件等步骤实现页面配置需求。

虽然此类页面配置系统可供业务人员通过配置生成页面，但是其配置粒度都是页面级的，至于组件配置，只能通过渲染组件源码中的预设字段，实现组件参数配置。这种方式无法实现组件数据配置、输入组件配置、数据依赖配置。

如果没有这种组件级细粒度的配置方法，就存在组件配置不灵活的问题，一旦需要修改组件的相关配置，只能通过开发人员修改预设的组件参数，使得页面配置系统的组件配置不够灵活，增加了系统的开发、维护成本，一定程度上偏离了业务配置系统的初衷。

发明内容

为解决目前页面配置粒度为页面级的，只能通过渲染组件源码中的预设字段实现组件参数配置，不能实现组件数据配置、输入组件配置、数据依赖配置，系统开发维护成本大的问题，本发明提供一种基于递归算法的组件配置方法，实现组件数据配置、输入组件配置、数据依赖配置，解决组件配置不灵活的问题，当组件需要修改时，只需要修改组件配置即可，进而减少系统的开发、维护成本。

具体方案如下所述：

一种基于递归算法的组件配置方法，包括以下步骤：

S1：在组件中使用JSON对象的数据格式保存组件形成组件配置：所述组件配置包括组件数据配置、输入组件配置、数据依赖配置；

S2：利用递归算法解析S1中所述输入组件配置，生成可使用户输入的数据直接转换到组件中的输入组件，再根据输入组件和S1中所述组件数据配置利用递归算法生成组件数据，所述组件数据是其值根据输入组件的输入而动态变化的数据；

S3：基于代理模式通过Proxy创建数据对象解析S1中的组件并生成数据中心，所述数据中心自动保存当前组件抛出的数据，利用所述数据中心关联S2中的组件数据；当所述数据中心的内容被修改后，所述数据中心会进行数据拦截，并通过S1中所述数据依赖配置将修改的内容合并到组件数据中；

S4：利用运行时环境中运行作为前端代码的组件渲染器，读取S1中组件配置和S2中的输入组件，自动渲染组件，从而实现组件配置。

优选地，S1中所述组件数据配置使用所述JSON对象的数据格式来表示，包括：componentProps字段为键名，值为对象的数据格式，所述键名包括props、attrs、domProps、style、class。

优选地，所述JSON对象的数据格式为单层对象数据格式时，键名是任意字符串，值是基础数据类型。

优选地，S1中所述输入组件配置使用JSON对象的数据格式表示，数据项和所述组件数据配置一致，最内层数据的值不再是基础数据类型，而是JSON对象，包括label、rules、component。

优选地，所述输入组件配置中component表示组件的具体内容，包括组件数据配置、输入组件配置、数据依赖配置，为递归嵌套结构。

优选地，S1中所述数据依赖配置使用JSON对象的数据格式表示，包括provideKey、injectMap键值对，通过所述数据依赖配置表示当前组件的组件数据配置将会关联数据中心对应的数据。

优选地，S2中所述组件数据，其默认值通过读取S1中的所述组件数据配置自动生成，其值通过S2中的所述输入组件输入。

优选地，S2中生成的所述组件数据和所述组件数据配置JSON对象的数据格式一致，最外层的键名包括props、attrs、domProps、style、class，值为对象格式，所述组件数据的值会根据所述输入组件的输入变化。

优选地，S2中所述输入组件包括value、event、prop、componentProps，所述value值为所述输入组件在运行时环境中渲染时所依赖的组件名，event为该输入组件在用户输入时抛出的事件名，prop为该输入组件接收参数的键名，componentProps为该输入组件的组件数据配置。

优选地，在S3中所述数据中心的数据对象通过Proxy创建，用于实现get和set方法的拦截。

优选地，所述实现get和set方法具体步骤为：

S1：在数据依赖配置JSON对象的injectMap中增加一个键值对时，将会调用数据中心数据对象的get方法，根据该键值对中的值，获取数据中心的数据对象的值，并在该值内部建立一个_dep属性，存放当前组件关联该值的引用；

S2：当数据中心的数据对象中某一项值被修改时，将会调用数据中心数据对象的set方法，找到该值内部的_dep属性，找到存放的当前组件关联该值的引用，并修改对应的值；

S3：在数据依赖配置JSON对象的provideKey中增加一个键名时，会将当前组件的输出数据保存到数据中心的数据对象中。

优选地，S4中的所述组件渲染器通过vue.js框架生成，是一个包含render方法的对象，能够被vue.js框架识别，vue.js框架在运行时环境中，根据其内部逻辑，将组件数据转化成Web浏览器能够识别的HTML，CSS及JavaScript代码，显示在浏览器中。

优选地，所述render方法首先读取组件配置中的componentName字段作为要加载的组件名称，然后读取组件输入数据componentProps作为该组件的参数，包括props、attrs、domProps、style、class等字段，最后将组件名称、参数按照vue.js框架需要的格式组装并返回。

本发明的有益效果在于：

本发明提供了一种基于递归算法的组件配置方法，业务人员编辑JSON数据保存组件配置，所述组件配置包括组件数据配置、输入组件配置、数据依赖配置；在运行递归算法解析组件数据配置和输入组件配置时，会生成输入组件和组件数据。组件解析还会生成数据中心，通过数据中心关联组件输入输出数据，通过组件渲染器结合组件配置和组件数据，实现自动渲染组件，从而实现组件级粒度的配置方法，业务人员可灵活配置或输入组件相关数据，快速完成业务需求。同时，输入组件配置也使用JSON对象的数据格式来表示，数据项和组件数据配置一致，最内层数据的值不再是基础数据类型，而是JSON对象。与一般的技术方案相比，本发明可实现组件数据配置、输入组件配置、数据依赖配置，解决组件配置不灵活的问题，当组件需要修改时，只需要修改组件配置即可，从而减少系统的开发、维护成本。

附图说明

图1：一种基于递归算法的组件配置方法。

图2：一种组件数据配置代码示意图。

图3：一种输入组件配置代码示意图。

图4，一种递归嵌套结构示意图。

图5：一种数据依赖配置代码示意图。

图6：一种数据依赖配置injectMap代码示意图。

图7：一种输入组件生成示意图。

图8：一种输入组件的渲染效果示意图。

图9：一种组件渲染器在浏览器的显示效果图。

具体实施方式

如图1所示，一种基于递归算法的组件配置方法，包括以下步骤：

S1：在组件中使用JSON对象的数据格式保存组件形成组件配置：所述组件配置包括组件数据配置、输入组件配置、数据依赖配置；

S2：利用递归算法解析S1中所述输入组件配置，生成可使用户输入的数据直接转换到组件中的输入组件，再根据输入组件和S1中所述组件数据配置利用递归算法生成组件数据，所述组件数据是其值根据输入组件的输入而动态变化的数据；

S3：基于代理模式通过Proxy创建数据对象解析S1中的组件并生成数据中心，所述数据中心自动保存当前组件抛出的数据，利用所述数据中心关联S2中的组件数据；当所述数据中心的内容被修改后，所述数据中心会进行数据拦截，并通过S1中所述数据依赖配置将修改的内容合并到组件数据中；

S4：利用运行时环境中运行作为前端代码的组件渲染器，读取S1中组件配置和S2中的输入组件，自动渲染组件，从而实现组件配置。

上述方法的工作原理在于：使用JSON数据保存组件配置；递归解析组件数据配置和输入组件配置，生成组件数据和输入组件；生成数据中心，关联组件输入输出数据；结合组件配置和组件数据，在组件渲染器中自动渲染组件。

在一个实施例中，组件配置，包括组件数据配置、输入组件配置、数据依赖配置；

组件数据配置，如图2所示，使用JSON对象的数据格式来表示，使用componentProps字段为键名，值为对象数据格式，其键名包括props、attrs、domProps、style、class，值为对象格式，一般情况是单层对象数据结构，键名可以是任意字符串，值是基础数据类型；

输入组件配置，如图3所示，也使用JSON对象的数据格式来表示，数据项和组件数据配置一致，最内层数据的值不再是基础数据类型，而是JSON对象，包括label、rules、component，其中component表示组件的具体内容。输入组件配置又可以包括组件数据配置、输入组件配置、数据依赖配置，如图4所示，是一种递归嵌套结构；

数据依赖配置，如图5所示，也使用JSON对象的数据格式来表示，包括provideKey、injectMap键值对，表示当前组件的组件数据配置将会关联数据中心对应的数据；其中，如图6所示，injectMap的键名是通过递归读取组件输入配置获取，简化用户输入，injectMap的值渲染为组件，供用户输入数据中心的数据，用来表示关联关系；

组件数据，和上述组件数据配置JSON对象的数据格式一致，最外层的键名同样包括props、attrs、domProps、style、class，值同样为对象格式。不同之处在于，组件数据的值会根据输入组件的输入而变化，是一种动态变化的数据；

输入组件，通过递归算法读取输入组件配置生成输入组件，用来描述如何渲染输入组件以及如何将用户输入的数据合并到匹配的组件数据，如图7所示，包括value、event、prop、componentProps，其中value值为该输入组件在运行时环境中渲染时所依赖的组件名，event为该输入组件在用户输入时抛出的事件名，prop为该输入组件接收参数的键名，componentProps和上述组件数据配置一样，此处可理解为该输入组件的组件数据配置；输入组件的渲染效果如图8所示；

数据中心，如图6所示的左边JSON数据，是一种基于代理模式生成的数据，当前组件抛出的数据将会自动保存到数据中心中，当数据中心内容修改后，代理的数据拦截会将数据合并到组件数据中；数据中心的数据对象通过Proxy创建，用于实现get和set方法的拦截。在数据依赖配置JSON对象的injectMap中增加一个键值对时，将会调用数据中心数据对象的get方法，根据该键值对中的值，获取数据中心的数据对象的值，并在该值内部建立一个_dep属性，存放当前组件关联该值的引用。数据中心的数据对象中某一项值被修改时，将会调用数据中心数据对象的set方法，找到该值内部的_dep属性，找到存放的当前组件关联该值的引用，并修改对应的值；在数据依赖配置JSON对象的provideKey中增加一个键名时，会将当前组件的输出数据保存到数据中心的数据对象中。

组件渲染器，是一段在运行时环境中运行的前端代码，可以读取组件配置和组件输入，组合成为组件数据，能够正常显示在浏览器中。

组件渲染器通过vue.js框架生成，是一个包含render方法的对象，render方法首先读取组件配置中的componentName字段作为要加载的组件名称，然后读取组件输入数据componentProps作为该组件的参数，包括props、attrs、domProps、style、class等字段，最后将组件名称、参数按照vue.js框架需要的格式组装并返回。该包含render方法的对象，即组件数据，能够被vue.js框架识别，vue.js框架在运行时环境中，根据其内部逻辑，将组件数据转化成Web浏览器能够识别的HTML，CSS及JavaScript代码，显示在浏览器中。

组件渲染器在浏览器的显示结果如图9所示；

运行时环境，是一种面向对象的编程语言的运行环境，例如以JavaScript引擎作为程序的运行时环境，JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在Web浏览器中，用于解析和执行JavaScript脚本。

应当指出，以上所述具体实施方式可以使本领域的技术人员更全面地理解本发明创造，但不以任何方式限制本发明创造。因此，尽管本说明书参照附图和实施例对本发明创造已进行了详细的说明，但是，本领域技术人员应当理解，仍然可以对本发明创造进行修改或者等同替换，总之，一切不脱离本发明创造的精神和范围的技术方案及其改进，其均应涵盖在本发明创造专利的保护范围当中。

Claims (12)

1.一种基于递归算法的组件配置方法，其特征在于，包括以下步骤：

S1：在组件中使用JSON对象的数据格式保存组件形成组件配置：所述组件配置包括组件数据配置、输入组件配置、数据依赖配置；所述数据依赖配置使用JSON对象的数据格式表示，包括provideKey、injectMap键值对；

S2：利用递归算法解析S1中所述输入组件配置，生成可使用户输入的数据直接转换到组件中的输入组件，再根据输入组件和S1中所述组件数据配置利用递归算法生成组件数据，所述组件数据是其值根据输入组件的输入而动态变化的数据；

S3：基于代理模式通过Proxy创建数据对象解析S1中的组件并生成数据中心，所述数据中心自动保存当前组件抛出的数据，利用所述数据中心关联S2中的组件数据；当所述数据中心的内容被修改后，所述数据中心会进行数据拦截，并通过S1中所述数据依赖配置将修改的内容合并到组件数据中；

S4：利用运行时环境中运行作为前端代码的组件渲染器，读取S1中组件配置和S2中的输入组件，自动渲染组件，从而实现组件配置，所述组件渲染器是一个包含render方法的对象，所述render方法首先读取组件配置中的componentName字段作为要加载的组件名称，然后读取输入组件数据componentProps作为该组件的参数，包括props、attrs、domProps、style、class等字段，最后将组件名称、参数按照vue.js框架需要的格式组装并返回。

2.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，S1中所述组件数据配置使用所述JSON对象的数据格式来表示，包括：componentProps字段为键名，值为对象的数据格式，所述键名包括props、attrs、domProps、style、class。

3.由权利要求2所述的一种基于递归算法的组件配置方法，其特征在于，所述JSON对象的数据格式为单层对象数据格式时，键名是任意字符串，值是基础数据类型。

4.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，S1中所述输入组件配置使用JSON对象的数据格式表示，数据项和所述组件数据配置一致，最内层数据的值不再是基础数据类型，而是JSON对象，包括label、rules、component。

5.由权利要求4所述的一种基于递归算法的组件配置方法，其特征在于，所述输入组件配置中component表示组件的具体内容，包括组件数据配置、输入组件配置、数据依赖配置，为递归嵌套结构。

6.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，通过所述数据依赖配置表示当前组件的组件数据配置将会关联数据中心对应的数据。

7.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，S2中所述组件数据，其默认值通过读取S1中的所述组件数据配置自动生成，其值通过S2中的所述输入组件输入。

8.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，S2中生成的所述组件数据和所述组件数据配置JSON对象的数据格式一致，最外层的键名包括props、attrs、domProps、style、class，值为对象格式，所述组件数据的值会根据所述输入组件的输入变化。

9.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，S2中所述输入组件包括value、event、prop、componentProps；value值为所述输入组件在运行时环境中渲染时所依赖的组件名，event为该输入组件在用户输入时抛出的事件名，prop为该输入组件接收参数的键名，componentProps为该输入组件的组件数据配置。

10.由权利要求1所述的一种基于递归算法的组件配置方法，在S3中所述数据中心的数据对象通过Proxy创建，用于实现get和set方法的拦截。

11.由权利要求10所述的一种基于递归算法的组件配置方法，其特征在于，所述实现get和set方法具体步骤为：

S1：在数据依赖配置JSON对象的injectMap中增加一个键值对时，将会调用数据中心数据对象的get方法，根据该键值对中的值，获取数据中心的数据对象的值，并在该值内部建立一个_dep属性，存放当前组件关联该值的引用；

S2：当数据中心的数据对象中某一项值被修改时，将会调用数据中心数据对象的set方法，找到该值内部的_dep属性，找到存放的当前组件关联该值的引用，并修改对应的值；

S3：在数据依赖配置JSON对象的provideKey中增加一个键名时，会将当前组件的输出数据保存到数据中心的数据对象中。

12.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，S4中的所述组件渲染器通过vue.js框架生成，能够被vue.js框架识别，vue.js框架在运行时环境中，根据其内部逻辑，将组件数据转化成Web浏览器能够识别的HTML，CSS及JavaScript代码，显示在浏览器中。