阅读 1096

关于拖拽生成代码的一些设计思路

概述

从可视化的交互,去生成可读代码,是此次文章分享的核心需求。替代一部分初中级前端的业务能力,后端人员完全可以在界面中一顿操作最终生成可读代码,合并到工程中。

准备工作

  1. 需求设计
    a: 用户(使用的用户)
    b: 权限(导出、高阶组件)
    c: 项目(类似于项目管理的概念)
    d: 不局限于框架(vue、react、angular、...)
  2. 基础组件库(公司自己的、element、社区的也可以)
    拖拽的基石(打架的弹药啊)
  3. 业务组件库
    基于基础组件库拓展的强业务组件(有了子弹,那可不得做点大杀器)
  4. 物料市场
    由社区维护的自定义组件(人多力量大,总有人会提出意想不到的想法)
  5. 界面设计

1619320120480.jpg

拖拽功能

  1. 行为分析
    左侧面板拖拽对应的组件,
    中间画布生成对应的组件,
    右侧面板生成该组件的对应配置。
  2. 思路
    左侧面板渲染可拖拽的组件名称(componentArr)
    右侧面板渲染激活组件的配置项(component[i])
    所以有全局变量actviePanel,dropPanel
  3. 难点
    componentArr的通用性和拓展性
    actviePanel在鼠标移上的生成(position计算)
    容器的概念,容器是可以无限嵌套,所以需要有一个事件栈,也可理解为dom栈.去处理用户当前处于什么栈,再去做逻辑处理
  4. 根据左侧拖入的组件配置,去配置列表中遍历对应的配置,赋值给右侧面板

代码生成

  1. 根据拖拽的行为,最终可以得到含有用户自定义配置的panel数组,
  2. 将该数组加工为自己个性化的AST树结构,方便后续生成代码
  3. 拿到AST树结构之后,根据实现的代码转化类,调用对应的plugin(vue/react/angular)生成代码块
  4. 生成代码块的过程,其实就是遍历AST,拆分出不同的代码块,最终组合为你想要的语法,
  5. 生成代码时,变量名采用组件名+属性名+index,类似于tableLoading_1

实现

  1. component-config
  "Input": {
    "AttributePanel": [
      {
        "isParent": true,
        "label": "标题",
        "key": "label",
        "type": "Input",
        "attrs": {
          "value": "输入框"
        }
      },
      {
        "label": "占位提示",
        "key": "placeholder",
        "type": "Input",
        "attrs": {
          "value": "请输入文字"
        }
      },
      {
        "label": "禁用",
        "key": "disabled",
        "type": "BusinessSwitch",
        "attrs": {
          "value": false
        }
      }
    ],
    "StylePanel": [],
    "SeniorPanel": []
  }
复制代码
  1. componentArr
[
  {
    "title": "文本输入框",
    "componentName": "Input",
    "icon": "",
    "smallIcon": ""
  },
]
复制代码
  1. 最终生成的panel

1619328592637.jpg 4. 初步AST

1619328705083.jpg

延伸

  1. 接入mock平台,即可实现后端拖拽页面,mock平台测试接口,然后在界面中选择需要的接口,导出源码,直接接入到工程项目。
  2. 使用severless,云服务等形式。可以实现一站式部署
  3. 导出的文件可以涵盖目录结构,而不仅仅是单页面组件
  4. 对导出代码块做合理拆分组合,类似于公共组建的概念
  5. 目前仅实现了vue的导出,后续可以考虑支持react
  6. 因为时间原因,很多东西写的很粗糙。有时间了再补吧。

链接

auto-generate

文章分类
前端
文章标签