可视化组件是什么？如何设计开发？

精选原创

wx64ad3722e6882 2023-07-13 15:44:02 ©著作权

文章标签 组件化低代码可视化 文章分类 React.js 前端开发

©著作权归作者所有：来自51CTO博客作者wx64ad3722e6882的原创作品，请联系作者获取转载授权，否则将追究法律责任

嗨!大家好，我是阿酷米。

可视化搭建是一个非常大的主题，它包含了很多的可视化搭建方向，针对不同的领域可能形成不一样的解决方案。这种可视化搭建产品已呈逐年上升趋势，一直都在高速增长。而我们，今天聚焦在如何去设计开发一个可视化组件。

可视化组件是什么？

首先，我们可以将这个词拆开来看，可视化，组件。

可视化，顾名思义，就是这个组件是可以渲染的，是可以看到的。

组件，就是我们平时所说的前端组件。比如我们用 React, Vue 等框架去开发的组件。

而这些前端组件本身就是可视化的，这里有什么不同么。

我们这里所说的可视化组件，是指可以通过编辑器进行搭建编排，可以通过组件面板，修改组件属性的，一种可视化可搭建的组件。

业界一般指这种为低代码开发，也就是，可以将这些组件开发好，通过编辑器拖拽编排，完成特定业务功能的一种方式

可视化组件开发有什么好处？也就是低代码组件化搭建的方式有什么好处?

加快开发速度：低代码组件化搭建可以大大缩短开发周期，通过可视化的拖拽和配置，开发人员可以快速构建应用程序。无需从头开始编写代码，可以直接使用现有的组件和模块，减少了重复劳动和开发时间。
降低开发复杂性：低代码平台提供了可视化的界面和工具，使开发过程更加直观和简单。开发人员无需深入了解底层技术细节，只需通过配置和连接组件，即可完成复杂的业务逻辑。这降低了技术门槛，使非专业开发人员也能参与应用程序的开发。
提高可维护性和可扩展性：低代码组件化搭建使应用程序的结构更加清晰和模块化。通过将应用程序拆分为独立的组件，可以更容易地维护和更新特定功能。同时，可以方便地添加新的组件或替换现有的组件，使应用程序更具可扩展性和灵活性。
促进协作和团队合作：低代码平台提供了可视化的界面和工具，使多个开发人员可以同时参与应用程序的开发。开发人员可以共享和重复使用组件和模块，提高团队的协作效率。同时，通过版本控制和团队协作工具，可以更好地管理和跟踪开发过程。
提供更好的用户体验：低代码组件化搭建使开发人员能够更加专注于用户体验和界面设计。通过可视化的界面编辑器和预览功能，可以快速设计和调整应用程序的界面。这有助于提供更好的用户界面和交互，增强用户体验。

那么，如何去开发一个可视化组件呢？

既然是通过组件搭建一个页面，那么，我们就从最终的页面交付成果来分析，如何一步步拆解，然后将其再重新搭建起来

这是一个简单的社区电商页面。我们该如何将其搭建起来。

可视化组件是什么？如何设计开发？_组件化

首先，我们肯定是将页面拆解成各个组件。我们依次将其拆解成

可视化组件是什么？如何设计开发？_低代码_02

轮播组件
秒杀倒计时
商品滑窗
标题
瓷片组件
商品列表

组件拆解好了。那么，我们接下来，就分析这些组件，通过抽象的方式，抽取这些组件的共性与差异，从而去设计整个组件的可编辑的元素

可视化组件是什么？如何设计开发？_组件化_03

首先，我们看到这几个组件，都会有自己的宽高，位置，以及内外间距等位置布局相关的信息
每个组件也都分别有背景色，阴影，圆角等样式信息
标题组件，还可以设置标题等字体大小，是否粗体等字体信息
商品滑窗，商品列表等组件，还可以设置内部卡片的一些样式，如名称颜色，卡片圆角等相关内部主题样式信息
以上都是视觉相关的信息，每个组件还有各自内部的属性，如轮播会有轮播时间，商品组件内部有商品数据等组件内部属性信息

通过分析，我们知道，想要一个组件可编辑，我们需要处理以下几个部分。

布局：对应组件宽高，坐标，以及内外兼具
样式：对应组件最外层的基本样式，如边框，填充，圆角等
字体：对应组件内部的文字样式
主题：对应组件的内部主题样式，如主题颜色等
属性：对应组件内部业务逻辑的配置

我们分类一下，组件共有布局，样式，字体等信息，组件差异的，属性，主题等信息

这些信息，必须借助一份组件的描述文件，我们才能达成一个标准的协议契约，如此，才能解析处理。

所以，我们暂且用以下的描述方式，比如，轮播组件

{
	component: 'SlickSlick' //组件名
	
	label: '轮播组件' // 组件中文名
	
	spec: { // 描述描述
		property: { // 属性
			autoPlay: { type: 'boolean', label: '自动播放', default: false},
      speed: { type: 'number', label: '播放间隔', default: 5},

      items: {
        type: 'array',
        label: '轮播列表',
        items: {
          type: 'string',
          label: '轮播图',
          default: 'https://cdn.imoka.cn/47ryY8HnTj9A/a/img/hash/img/fabfce5a92f96c41fc9f82178db1ade7.png'
        }
      }
		},
		
		theme: { // 主题
			colors: {
				type: 'array',
				label: '颜色',
				items: {
					type: 'color',
					label: '颜色值',
					default: '#333333'
				}
			}
		}
	}
}

那么，当这些组件的声明描述写好之后，可视化搭建平台，通过这份声明文件，就能渲染好整个组件的面板，将每一个属性，渲染成可操作的面板元素，去操控这个组件了。

那么，对于这些数据的修改，必然需要实时能够看到渲染处理。

所以，如何让这个页面监听到这个组件的信息修改呢。我们，其实可以通过消息事件来传递。

可视化组件是什么？如何设计开发？_组件化_04