可视化构建平台地图组件和日历组件方案选择

可视化构建平台除了为用户提供简单便捷的操作方式外，还需要提供丰富的组件支持和组件扩展，以满足更多用户的业务需求。H5-dooring初期主要考虑的是用户使用的方便性，也就是尽量减少用户的操作成本，所以采用了智能布局，即库react-grid-layout。之前考虑过完全自由布局，也实现了一套自由布局方案（使用react-draggable和React-Resizable），但是提倡lessismore的设计理念，还是坚定走智能布局的道路。接下来笔者将介绍如何在H5页面编辑器中自定义开发自己的组件，以及如何开发让H5表现力更强的组件：地图和日历组件。如果对可视化拖拽平台的实现感兴趣，可以参考我之前的文章和github。更多lowcode和nocode技术实现和国内更新，稍后更新外部解决方案分析。演示效果实现自定义组件开发的流程作为一名前端工程师，我们肯定熟悉vue组件或者react组件的开发。对于一个可伸缩、可复用的组件，我们只需要做到以下几点就好了：语义化：组件命名可读性强，比如antd、element的组件风格复用-发布等价原则（REP）：组件中的类要么可复用，要么不可复用公共重用原则(CRP)：组件中的所有类都应该一起重用。如果组件中的一个类被重用，则组件中的所有类都应该被重用。通用封闭原则(CCP)：组件中的所有类都对相同性质的更改封闭。同时不影响外部，即对修改关闭，但对扩展开放稳定抽象原则（SAP）：组件的抽象层次应与其稳定性保持一致。基本上，任何组件的设计都会或多或少遵循以上原则，我们在实现自定义组件时，往往需要考虑内部和外部的抽象。我们在为Dooring定义自定义组件时，会分为以下几个步骤：组件的形状主要是组件暴露的属性和方法，可以实现用户级的配置，即vue/react组件的props.由于项目是用typescript写的，所以我们需要定义对应的ts类型来实现组件的健壮性和可追溯性。最后，我们将定义组件初始化样子（initshape），然后它是实现组件。这一步的好处是我们可以明确组件的边界，自然符合上面提到的组件设计原则。在上述过程中我们会生成如下三个文件：componet组件的实现代码，schema组件的shape和type模板组件，typemappingtemplate，开发一个日历组件。接下来，我们将实现拖放平台的日历组件。对于日历组件，我们直接使用Zarm的Calendar组件，封装成dooring的受控组件。我们可以将以下属性暴露给日历组件用户自定义：time日历范围显示的时间日历选择的时间范围，主要用于日程管理color日历的默认文字颜色selectedColor选中区域的颜色round日历圆角对应的视图如下：由于组件的实现只需要处理传入的数据，这里我们看简单的代码实现：importReact,{useState,memo,useEffect,useRef}from'react';import{Calendar}from'zarm';importstylesfrom'./index.less';import{ICalendarConfig}from'./schema';constCalendarCp=memo((props:ICalendarConfig&{isTpl:boolean})=>{const{time,range,color,selectedColor,round,isTpl}=props;//...return(/(0|6)/.test(date.getDay())}onChange={(value:Date[]|undefined)=>{setValue(value);}}/>