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

概述

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

准备工作

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

拖拽功能

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": []
  }
复制代码

2. componentArr

[
  {
    "title": "文本输入框",
    "componentName": "Input",
    "icon": "",
    "smallIcon": ""
  },
]
复制代码

3. 最终生成的panel

4. 初步AST

延伸

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