json生成器和流程图的一些思考
json生成器和流程图的一些思考
自过了烧灯后，都不见踏青挑菜。几回凭双燕，丁宁深意，往来都恨重帘碍。约何时再，正春浓酒困，人闲昼永无聊赖。厌厌睡起，犹有花梢日在。
起因
昨天看了别人的直播，总结了几个概念。今天和小伙伴聊到了两个问题。json生成器和流程图生成器。
聊json生成器是因为我们算做一个东西，然后这个东西需要手动收集一些数据，写成json的格式。聊流程图生成器是因为我们做了一个假设，假设目前市面上的流程图工具都不能用了，我们又有这样的需求，那么我们怎么办？
那就自己实现一套呗。
json生成器
json生成器一般在成规模的公司里都有现成的服务。使用场景大致有两个：一是作为数据mock平台，用来在开发中提供给前端使用，在后端接口尚未开发完成时，让前端人员能够提前自测，以提高开发效率。二是作为静态服务配置平台，某些业务，比如宣导页，活动页之类的界面，内容时常变换，这时候用这个平台修改一下数据，对外提供一个接口，运营人员直接在后台修改响应的数据即可。
实现json生成器的方法也很简单。本质上就是一个动态的表单，根据输入表单的内容，转化成相应的json数据格式即可。
流程图生成器
流程图大家都不陌生，目前比较流行的基于antv6的版本。或者如果使用的js的话有相应的flowchat.js。
个人思考了一下，如果抛开市面的现有的库，我们自己去实现一套满足我们基本需求的流程图代码，也是可行的，似乎也并不是很困难。理论上只要我们能实现将两个div用箭头连在一起，那么我们就一定能够实现一整套流程。
流程图的核心
流程图的核心理论上应该有以下几点:
基础组件。
矩形，圆形，三角形 等等。当然这些组件并不仅仅是画出来那么简单，它需要包含位置信息，节点数据等等。位置信息有个demo，很简单，用getBoundingClientRect这个API就可以获取到。如图:
代码:
<!--test.vue html-->
<div
class="point"
v-for="item in points"
:key="item"
:style="{
width: '15px',
height: '15px',
borderRadius: '50%',
background: 'red',
position: 'absolute',
top: `${item.y - 7}px`,
left: `${item.x - 7}px`,
}"
></div>
// test.vue js
let pos = document.getElementById('Position').getBoundingClientRect()
const { top, bottom, left, right } = pos
let points = [
{ x: left, y: top },
{ x: right, y: top },
{ x: right, y: bottom },
{ x: left, y: bottom },
]
this.points = points
拖拽。
拖拽某个组件，位置发生变化，或者宽高形状发生变化。
碰撞检测。
碰撞检测理论上会用在拖动某个箭头时，判断是否跟某个组件相交，然后让箭头吸附在组件的某个位置。
数据映射。
这个应该是最重要的一环。假如说我们已经实现了根据某条数据生成一个流程图，但是当我们修改流程图的结构时，理论上这条数据也是需要实时进行修正的。
并且这个数据格式如何定义，也是一个值得考虑的问题。
总结
在写这个的时候，我同时也在考虑另外一个问题。plantuml是如何根据我们写的数据生成时序图的？我们是不是也可以用web的方式来实现这么一套东西？
这个似乎可以找时间尝试一下。
javascript基础知识总结
本文分享自 JavaScript高级程序设计 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与?腾讯云自媒体分享计划? ，欢迎热爱写作的你一起参与！