可视化大屏页面组件的加载方法和装置制造方法及图纸

本发明专利技术公开了一种可视化大屏页面组件的加载方法和装置，涉及计算机技术领域。该方法的一具体实施方式包括：响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。该实施方式能够实现组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。页面进行编辑的过程中的操作卡顿问题。页面进行编辑的过程中的操作卡顿问题。

【技术实现步骤摘要】
可视化大屏页面组件的加载方法和装置


[0001]本专利技术涉及计算机
，尤其涉及一种可视化大屏页面组件的加载方法和装置。

技术介绍

[0002]现有的可视化大屏组件大多是使用技术栈React框架来进行组件的包装，使每个组件具备样式设置、数据设置、交互设置等能力。其中，样式设置指的是组件的结构和显示属性等的设置，数据设置指的是组件对应要显示的数据等的设置，交互设置指的是组件与用户交互时所涉及的变量等的设置。可视化大屏组件在加载时，核心模式是以数据驱动组件和数据的渲染。在加载过程中，先根据组件要显示的数据类型进行对应的组件数据设置，然后对数据设置后的组件进行渲染以得到可视化大屏界面。
[0003]在实现本专利技术过程中，专利技术人发现现有技术中至少存在如下问题：
[0004]在复杂的大屏页面中，包括多个组件，且组件之间可能具有依赖关系。由于组件加载顺序与变量引用是无序的，导致相互依赖的组件在进行渲染时会存在等待现象，使得组件加载效率低，且系统加载性能资源消耗大。

技术实现思路

[0005]有鉴于此，本专利技术实施例提供一种可视化大屏页面组件的加载方法和装置，能够实现组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
[0006]为实现上述目的，根据本专利技术实施例的一个方面，提供了一种可视化大屏页面组件的加载方法。
[0007]一种可视化大屏页面组件的加载方法，包括：
[0008]响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；
[0009]根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；
[0010]响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；
[0011]根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
[0012]可选地，组件数据包括静态数据、数据库数据和接口数据三种类型；
[0013]对于组件数据为静态数据的组件，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：获取所述组件的组件数据；
[0014]以及，在根据所述样式配置信息进行组件渲染之后，还包括：根据所述组件的组件数据进行组件数据加载。
[0015]可选地，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：
[0016]注册交互事件，所述交互事件用于监听组件的交互变量的值，以及当所述交互变
量的值发生变化时，触发与所述交互变量相关的组件数据获取请求，以请求获取组件数据并更新组件数据。
[0017]可选地，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：
[0018]注册组件更新事件，所述组件更新事件用于响应于对所述大屏页面的组件进行的编辑操作，更新组件的样式配置信息。
[0019]可选地，在注册组件数据请求事件之后，还包括：根据所述样式配置信息生成组件数据获取请求，并将生成的组件数据获取请求保存到请求池中；
[0020]在获取到组件数据之后，还包括：将所获取的组件数据进行缓存；
[0021]在触发所述组件数据请求事件之后，发送组件数据获取请求之前，还包括：
[0022]根据请求池中组件数据获取请求的请求信息生成缓存标识；
[0023]根据所述缓存标识从缓存中查找对应的组件数据；
[0024]以及，确认在所述缓存中不存在与所述缓存标识对应的组件数据。
[0025]可选地，所述组件数据获取请求为批量请求；
[0026]发送组件数据获取请求以获取组件数据包括：
[0027]根据组件数据获取请求的请求信息生成缓存标识；
[0028]根据所述缓存标识确定相同请求；
[0029]在所述缓存中不存在与所述缓存标识对应的组件数据的情况下，将相同请求所对应的组件标识添加到队列中并仅发送一次组件数据获取请求；
[0030]在获取到组件数据后，将获取的组件数据与所述队列中的组件标识建立映射关系。
[0031]可选地，所述组件数据获取请求的请求信息包括请求方式、请求头和请求路径；
[0032]根据组件数据获取请求的请求信息生成缓存标识包括：
[0033]从所述请求头中提取关键鉴权项，并对所述关键鉴权项进行序列化处理；
[0034]对所述请求方式、请求路径和序列化处理后的关键鉴权项进行加密生成缓存标识。
[0035]根据本专利技术实施例的另一方面，提供了一种可视化大屏页面组件的加载装置。
[0036]一种可视化大屏页面组件的加载装置，包括：
[0037]信息获取模块，用于响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；
[0038]组件渲染模块，用于根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；
[0039]数据请求模块，用于响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；
[0040]数据加载模块，用于根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。
[0041]根据本专利技术实施例的又一方面，提供了一种可视化大屏页面组件加载的电子设备。
[0042]一种可视化大屏页面组件的加载电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行，使得所
述一个或多个处理器实现本专利技术实施例所提供的可视化大屏页面组件的加载方法。
[0043]根据本专利技术实施例的再一方面，提供了一种计算机可读介质。
[0044]一种计算机可读介质，其上存储有计算机程序，所述程序被处理器执行时实现本专利技术实施例所提供的可视化大屏页面组件的加载方法。
[0045]上述专利技术中的一个实施例具有如下优点或有益效果：通过响应于可视化大屏页面的显示操作，获取大屏页面包括的组件的样式配置信息；根据样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载的技术方案，即可通过事件触发机制，将组件加载过程分为组件渲染阶段和数据加载阶段，实现了组件渲染与数据加载的分离解耦，减少了无效渲染，降低了组件加载性能资源消耗，且可以解决在对大屏页面进行编辑的过程中的操作卡顿问题。
[0046]上述的非惯用的可选方式所具有的进一步效果将在下文中结合具体实施方式加以说明。
附图说明
[0047]附图用于更好地理解本专利技术，不构成对本专利技术的不当限定。其中：
[0048]图1是根据本专利技术实施例的可视化大屏页面组件的加载方法的主要步骤示意图；
[0049]图2是本专利技术实施例的可视化大屏页面组件的加载过程示意图；
[0本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种可视化大屏页面组件的加载方法，其特征在于，包括：响应于可视化大屏页面的显示操作，获取所述大屏页面包括的组件的样式配置信息；根据所述样式配置信息进行组件渲染，并注册组件数据请求事件；响应于所有组件都渲染完毕，触发所述组件数据请求事件，发送组件数据获取请求以获取组件数据；根据获取的组件数据进行组件数据加载，以完成可视化大屏页面组件的加载。2.根据权利要求1所述的方法，其特征在于，组件数据包括静态数据、数据库数据和接口数据三种类型；对于组件数据为静态数据的组件，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：获取所述组件的组件数据；以及，在根据所述样式配置信息进行组件渲染之后，还包括：根据所述组件的组件数据进行组件数据加载。3.根据权利要求1所述的方法，其特征在于，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：注册交互事件，所述交互事件用于监听组件的交互变量的值，以及当所述交互变量的值发生变化时，触发与所述交互变量相关的组件数据获取请求，以请求获取组件数据并更新组件数据。4.根据权利要求1所述的方法，其特征在于，在获取所述大屏页面包括的组件的样式配置信息之后，还包括：注册组件更新事件，所述组件更新事件用于响应于对所述大屏页面的组件进行的编辑操作，更新组件的样式配置信息。5.根据权利要求1所述的方法，其特征在于，在注册组件数据请求事件之后，还包括：根据所述样式配置信息生成组件数据获取请求，并将生成的组件数据获取请求保存到请求池中；在获取到组件数据之后，还包括：将所获取的组件数据进行缓存；在触发所述组件数据请求事件之后，发送组件数据获取请求之前，还包括：根据请求池中组件数据获取请求的请求信息生成缓存标识；根据所述缓存标识从缓存中查找对应的组件数据；以及，确认在所述缓存中不存在与所述缓存标识对...

【专利技术属性】
技术研发人员：于振京，
申请(专利权)人：京东城市北京数字科技有限公司，
类型：发明
国别省市：