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

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

【技术实现步骤摘要】
一种基于递归算法的组件配置方法


[0001]本专利技术涉及计算机应用
，尤其涉及一种基于递归算法的组件配置方法。

技术介绍

[0002]随着Web系统(World Wide Web，即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统)业务需求增多，Web系统业务人员、开发人员、维护人员的任务也随之加重。为了减轻工作量，提升Web系统的扩展性，应对纷繁复杂的业务需求挑战，一种通过配置参数即可生成页面的系统应运而生，我们简称这种系统为页面配置系统。目前市面上的页面配置系统，一般通过前端开发(创建Web系统呈现给用户的过程，通过HTML，CSS及JavaScript以及衍生出来的各种技术、框架、解决方案)组件(是对数据和方法的简单封装，即可复用的前端代码)、业务人员在Web系统中输入预设的组件参数、Web系统渲染组件等步骤，基本可以实现简单的业务需求。例如一种支持SaaS多租户系统的个性化页面配置方法(CN111930381B,20211119)，通过添加组件、配置组件参数、渲染组件等步骤实现页面配置需求。
[0003]虽然此类页面配置系统可供业务人员通过配置生成页面，但是其配置粒度都是页面级的，至于组件配置，只能通过渲染组件源码中的预设字段，实现组件参数配置。这种方式无法实现组件数据配置、输入组件配置、数据依赖配置。
[0004]如果没有这种组件级细粒度的配置方法，就存在组件配置不灵活的问题，一旦需要修改组件的相关配置，只能通过开发人员修改预设的组件参数，使得页面配置系统的组件配置不够灵活，增加了系统的开发、维护成本，一定程度上偏离了业务配置系统的初衷。

技术实现思路

[0005]为解决目前页面配置粒度为页面级的，只能通过渲染组件源码中的预设字段实现组件参数配置，不能实现组件数据配置、输入组件配置、数据依赖配置，系统开发维护成本大的问题，本专利技术提供一种基于递归算法的组件配置方法，实现组件数据配置、输入组件配置、数据依赖配置，解决组件配置不灵活的问题，当组件需要修改时，只需要修改组件配置即可，进而减少系统的开发、维护成本。
[0006]具体方案如下所述：
[0007]一种基于递归算法的组件配置方法，包括以下步骤：
[0008]S1：在组件中使用JSON对象的数据格式保存组件形成组件配置：所述组件配置包括组件数据配置、输入组件配置、数据依赖配置；
[0009]S2：利用递归算法解析S1中所述输入组件配置，生成可使用户输入的数据直接转换到组件中的输入组件，再根据输入组件和S1中所述组件数据配置利用递归算法生成组件数据，所述组件数据是其值根据输入组件的输入而动态变化的数据；
[0010]S3：基于代理模式通过Proxy创建数据对象解析S1中的组件并生成数据中心，所述数据中心自动保存当前组件抛出的数据，利用所述数据中心关联S2中的组件数据；当所述
数据中心的内容被修改后，所述数据中心会进行数据拦截，并通过S1中所述数据依赖配置将修改的内容合并到组件数据中；
[0011]S4：利用运行时环境中运行作为前端代码的组件渲染器，读取S1中组件配置和S2中的输入组件，自动渲染组件，从而实现组件配置。
[0012]优选地，S1中所述组件数据配置使用所述JSON对象的数据格式来表示，包括：componentProps字段为键名，值为对象的数据格式，所述键名包括props、attrs、domProps、style、class。
[0013]优选地，所述JSON对象的数据格式为单层对象数据格式时，键名是任意字符串，值是基础数据类型。
[0014]优选地，S1中所述输入组件配置使用JSON对象的数据格式表示，数据项和所述组件数据配置一致，最内层数据的值不再是基础数据类型，而是JSON对象，包括label、rules、component。
[0015]优选地，所述输入组件配置中component表示组件的具体内容，包括组件数据配置、输入组件配置、数据依赖配置，为递归嵌套结构。
[0016]优选地，S1中所述数据依赖配置使用JSON对象的数据格式表示，包括provideKey、injectMap键值对，通过所述数据依赖配置表示当前组件的组件数据配置将会关联数据中心对应的数据。
[0017]优选地，S2中所述组件数据，其默认值通过读取S1中的所述组件数据配置自动生成，其值通过S2中的所述输入组件输入。
[0018]优选地，S2中生成的所述组件数据和所述组件数据配置JSON对象的数据格式一致，最外层的键名包括props、attrs、domProps、style、class，值为对象格式，所述组件数据的值会根据所述输入组件的输入变化。
[0019]优选地，S2中所述输入组件包括value、event、prop、componentProps，所述value值为所述输入组件在运行时环境中渲染时所依赖的组件名，event为该输入组件在用户输入时抛出的事件名，prop为该输入组件接收参数的键名，componentProps为该输入组件的组件数据配置。
[0020]优选地，在S3中所述数据中心的数据对象通过Proxy创建，用于实现get和set方法的拦截。
[0021]优选地，所述实现get和set方法具体步骤为：
[0022]S1：在数据依赖配置JSON对象的injectMap中增加一个键值对时，将会调用数据中心数据对象的get方法，根据该键值对中的值，获取数据中心的数据对象的值，并在该值内部建立一个_dep属性，存放当前组件关联该值的引用；
[0023]S2：当数据中心的数据对象中某一项值被修改时，将会调用数据中心数据对象的set方法，找到该值内部的_dep属性，找到存放的当前组件关联该值的引用，并修改对应的值；
[0024]S3：在数据依赖配置JSON对象的provideKey中增加一个键名时，会将当前组件的输出数据保存到数据中心的数据对象中。
[0025]优选地，S4中的所述组件渲染器通过vue.js框架生成，是一个包含render方法的对象，能够被vue.js框架识别，vue.js框架在运行时环境中，根据其内部逻辑，将组件数据
转化成Web浏览器能够识别的HTML，CSS及JavaScript代码，显示在浏览器中。
[0026]优选地，所述render方法首先读取组件配置中的componentName字段作为要加载的组件名称，然后读取组件输入数据componentProps作为该组件的参数，包括props、attrs、domProps、style、class等字段，最后将组件名称、参数按照vue.js框架需要的格式组装并返回。
[0027]本专利技术的有益效果在于：
[0028]本专利技术提供了一种基于递归算法的组件配置方法，业务人员编辑JSON数据保存组件配置，所述组件配置包括组件数据配置、输入组件配置、数据依本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于递归算法的组件配置方法，其特征在于，包括以下步骤：S1：在组件中使用JSON对象的数据格式保存组件形成组件配置：所述组件配置包括组件数据配置、输入组件配置、数据依赖配置；S2：利用递归算法解析S1中所述输入组件配置，生成可使用户输入的数据直接转换到组件中的输入组件，再根据输入组件和S1中所述组件数据配置利用递归算法生成组件数据，所述组件数据是其值根据输入组件的输入而动态变化的数据；S3：基于代理模式通过Proxy创建数据对象解析S1中的组件并生成数据中心，所述数据中心自动保存当前组件抛出的数据，利用所述数据中心关联S2中的组件数据；当所述数据中心的内容被修改后，所述数据中心会进行数据拦截，并通过S1中所述数据依赖配置将修改的内容合并到组件数据中；S4：利用运行时环境中运行作为前端代码的组件渲染器，读取S1中组件配置和S2中的输入组件，自动渲染组件，从而实现组件配置。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所述的一种基于递归算法的组件配置方法，其特征在于，S1中所述数据依赖配置使用JSON对象的数据格式表示，包括provideKey、injectMap键值对，通过所述数据依赖配置表示当前组件的组件数据配置将会关联数据中心对应的数据。7.由权利要求1所述的一种基于递归算法的组件配置方法，其特征在于，S2中所述组件数据，其默认值通过读取S1中的所述组件数据配置自动生成，其值通过S2中的所述输入组件输入。8.由权利要求1所述的...

【专利技术属性】
技术研发人员：李鑫，史兆彦，
申请(专利权)人：上海船舶运输科学研究所有限公司，
类型：发明
国别省市：