一种基于组件工厂的可视化构造方法技术

本发明专利技术提供了一种基于组件工厂的可视化构造方法，基于轻量级文件服务构造组件存储服务，通过适配驱动多种MVVM前端框架、兼容各类图表库的调用和渲染、标准化组件的显示配置和数据挂载流程等方面，构建了组件在线编辑和调试的沙盒系统，配合组件发布中心构成一个完整的可视化构造引擎。本发明专利技术不仅解决了生成环境与使用环境的协同，实时进行联调联试，以统一的动态驱动引擎代替了复杂的生成打包环境，不局限于特定的前端框架或者图表库，提高了组件的可维护性和可扩展性，极大提高了前端开发的工作效能；同时该方法可以有效降低代码耦合性，且统一的配置标准和数据标准可以极大降低团队的沟通成本。团队的沟通成本。团队的沟通成本。

【技术实现步骤摘要】
一种基于组件工厂的可视化构造方法


[0001]本专利技术涉及计算机应用
，尤其涉及一种基于组件工厂的可视化构造方法。

技术介绍

[0002]目前Web浏览器端数据大屏的开发主要基于HTML5技术，主要涉及技术包括：
[0003]HTML5的核心部件包括HTML文件、JavaScript文件和CSS文件等；
[0004]为了快速构建各种业务页面，主流方法是采用Vue、React和Angular等MVVM技术框架，将三类文件进行统一封装；
[0005]基于这些框架，统一某种显示规则，开发整合各种可视化组件；
[0006]将组件打包后固化到大屏配置工具里，等待被业务层调用。
[0007]目前绝大多数可视化构造功能都是基于打包好的组件进行构造，根据现有技术存在以下问题：
[0008]强依赖于特定的前端框架(例如Vue或者React)，这会增加软件架构切换的成本，难以长久升级维护；
[0009]强依赖于特定的图表库(例如ECharts)，这个缺陷限制了数据大屏的组件扩展能力；
[0010]组件的生产过程依赖繁重的研发环境和工程打包环境，生产环境与使用环境隔离无法交互，这使得开发调试成本很高，必须遵循开发
‑
打包
‑
部署
‑
调试的路径，尤其是打包和部署一般不在一个环境下，运维成本较高；
[0011]没有灵活可变的显示体系和数据体系，无法应对业务的快速变化；
[0012]解决以上问题的主要难点有如下5个方面：
[0013](1)结合MVVM思想，但不依赖于某个具体的MVVM框架，构建基于HTML、JS和CSS的组件库体系；
[0014](2)构造兼容多种前端可视化显示库的显示引擎，例如Echarts、G2、Vis、mapbox等等；
[0015](3)不依赖于webpack、gulp、vite等工程化打包环境，生产环境直接能与使用环境联动；
[0016](4)面向灵活的业务类型需要构建矩阵式数据解析引擎；
[0017](5)面向灵活的显示配置需要构建配置条件渲染器，把配置文件转化为造作界面。

技术实现思路

[0018]专利技术目的：本专利技术所要解决的技术问题是针对现有技术的不足，提供一种基于组件工厂的可视化构造方法，在线编辑组件代码，所见即所得，兼容多种框架和图形库，满足显示配置和数据配置的灵活扩展，为可视化大屏配置功能实时同步组件资源，形成统一环境下可视化大屏配置的流水线。
[0019]本专利技术方法包括以下步骤：
[0020]步骤1，基于文件服务，构建组件存储空间；
[0021]步骤2，根据不同前端框架生成组件模板；
[0022]步骤3，解析显示配置和数据配置的映射；
[0023]步骤4，实时预览组件并调试组件，组件优先加载默认数据；
[0024]步骤5，调试完成后对组件进行保存和热发布。
[0025]步骤1包括：
[0026]构建文件服务，基于但不限于Nginx等web服务，设计了一种文件存储处理方式，将HTML文件、Javascript文件、CSS文件、JSON文件、缩略图和组件媒体文件夹处理为一个组件单元，文件名统一用组件的英文引用名。
[0027]步骤2包括：
[0028]设计了由如下数据构造处理方法实现的在线代码编写功能，并会按照如下数据处理要求进行构建：
[0029]基于但不限于Vue构造器，使用组件JS文件作为主代码入口，以混合的方式封装Vue中的方法、计算属性、数据、外部传参以及各生命周期、HTML文件处理组件的显示构造部分、CSS文件处理组件的样式类和JOSN文件处理组件的显示控制属性；
[0030]步骤2还包括：建立渲染器，使用渲染器完成JS文件的封装，所述渲染器的数据处理方式包括：首先读取组件所在地址，通过HTTP请求依次读取组件的html文件、js文件和css文件，通过提供的在线文本编辑器在线呈现和处理html文件、js文件和css文件，处理完成后将html文件处理为组件的显示构造模板，提前加载处理好的CSS文件，并将样式数据信息注册到浏览器中，最后渲染器读取JS文件数据内容，连同显示构造模板一起处理成异步的显示组件，能够直接在浏览器中进行显示。
[0031]步骤3包括：
[0032]设计由如下数据处理方法实现的在线配置文件编写功能，并会按照如下数据要求进行构建：
[0033]对于显示配置，构建了一种显示渲染器对组件的显示控制进行处理：在组件的描述文件中包含props字段用来描述外部显示参数，类型为数组，其中的每个显示配置项为一个JSON类型的数据对象，每个对象包括如下字段：名称name、类型type、对应组件JS文件外部传参中的参数名field、配置的默认值default，处理其中的type字段，决定组件在调试时属性渲染的控件形式，例如string会渲染为文本输入框。
[0034]步骤3中，构建了一种数据解析器对组件的数据控制进行处理：对于数据配置，设计如下数据处理方法：在组件的JSON文件中包含dataConfig字段，dataConfig字段表示数据内部结构，类型为JSON对象，JSON对象包含的字段包括：用于区分外部应用的显示维度映射type、默认的显示维度映射config、默认的原始数据data。
[0035]步骤4包括：
[0036]对构造完成的组件，在预览调试前进行各类参数合规性验证，验证通过后，采用所述渲染器生成组件调试的沙盒空间，沙盒空间包括组件预览区和组件属性操作区，沙盒空间的数据处理方法如下：
[0037]组件属性操作区的所有操作项是根据JSON文件内props字段进行处理的，转化成
具体控件的依据为配置项的type(类型)字段：string映射为文本编辑框，color映射为颜色选择器，slider映射为拖拽控件，enum映射为下拉选择框，boolean映射为勾选框，number映射为数值选择框；
[0038]步骤4中，组件会默认加载数据配置里的dataConfig字段，其中的config为维度映射器，data为矩阵式的原始数据。
[0039]步骤4中，设计实现了一种显示编辑器，所述沙盒空间采用如下数据方法进行实时渲染：每当属性操作区的某一个控件被操作导致数据变化后，将变化后的数值传输给组件的监听器，监听器收到数据后判断与之前的数据相比是否变化，如果有变化，将会通知组件根据最新的显示属性进行重新渲染。
[0040]步骤5中，设计实现了一个画布编辑器，包括：
[0041]通过HTTP请求，将组件文件更新并保存到文件服务中，并通过canvas画布的方式将预览区显示的组件保存成一个png格式的缩略图，一同存储至文件服务中；
[0042]对外以接口形式提供组件清单，清单为JSON格式，字段包括组件名称、组件缩略图和组件JS文件地址，外部应用通过组本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于组件工厂的可视化构造方法，其特征在于，包括以下步骤：步骤1，基于文件服务，构建组件存储空间；步骤2，根据不同前端框架生成组件模板；步骤3，解析显示配置和数据配置的映射；步骤4，实时预览组件并调试组件，组件优先加载默认数据；步骤5，调试完成后对组件进行保存和热发布。2.如权利要求1所述的方法，其特征在于，步骤1包括：基于web服务，将HTML文件、Javascript文件、CSS文件、JSON文件、缩略图和组件媒体文件夹处理为一个组件单元，文件名统一用组件的英文引用名。3.如权利要求2所述的方法，其特征在于，步骤2包括：基于Vue构造器，使用组件JS文件作为主代码入口，以混合的方式封装Vue中的方法、计算属性、数据、外部传参以及各生命周期、HTML文件处理组件的显示构造部分、CSS文件处理组件的样式类和JOSN文件处理组件的显示控制属性。4.如权利要求3所述的方法，其特征在于，步骤2还包括：建立渲染器，使用渲染器完成JS文件的封装，所述渲染器的数据处理方式包括：首先读取组件所在地址，通过HTTP请求依次读取组件的html文件、js文件和css文件，通过提供的在线文本编辑器在线呈现和处理html文件、js文件和css文件，处理完成后将html文件处理为组件的显示构造模板，提前加载处理好的CSS文件，并将样式数据信息注册到浏览器中，最后渲染器读取JS文件数据内容，连同显示构造模板一起处理成异步的显示组件，能够直接在浏览器中进行显示。5.如权利要求4所述的方法，其特征在于，步骤3中，对于显示配置，构建了一种显示渲染器对组件的显示控制进行处理：在组件的描述文件中包含props字段用来描述外部显示参数，类型为数组，其中的每个显示配置项为一个JSON类型的数据对象，每个对象包括如下字段：名称name、类型type、对应组件JS文件外部传参中的参数名field、配置的默认值default，处理其中的type字段，决定组件在调试时属性渲染的控件形式。6.如权利要求5所述...

【专利技术属性】
技术研发人员：朱翔鹰，陈鹏，王妍妍，王冬，周惊雷，王琮，
申请(专利权)人：中电莱斯信息系统有限公司，
类型：发明
国别省市：