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基础知识总结