[学习笔记] Elpis项目中的DSL应用分析

什么是DSL

领域特定语言指的就是专注于某个应用程序领域的计算机语言。

1. 设计目标

Elpis项目的DSL设计主要围绕以下几个核心目标：

• 降低开发复杂度：通过声明式配置替代命令式编程

• 提高代码复用：将通用逻辑抽象为可配置的DSL

• 可继承：可定义和继承父类DSL

• 统一开发规范：提供标准化的配置方式

• 增强可维护性：将业务逻辑与实现细节分离

2. 应用场景

项目中的DSL主要应用在以下场景：

• 页面模块 DSL

通过声明式配置实现了一套完整的"配置即页面"系统，开发者只需要通过配置文件定义页面的页面布局、UI组件映射、API接口、表格展示规则和搜索条件等，就能通过一系列的解析器生成完整的业务页面，从而大大提升了开发效率，实现了页面开发的标准化和规范化。

DSL的渲染流程

• 数据源

// 项目其中一个模块的 DSL 
const config: DashboardModelTypeDefine = {
  /** 模型名称 */
  name: '拼夕夕',
  /** 模型描述 */
  desc: '电商系统',
  /** 默认页路由 */
  homePage: {
    path: '/schema',
    query: { menuKey: 'product' },
  },
  /** 页面菜单 */
  menu: [
        {
      key: 'product',
      name: '商品管理(拼多多)',
      menuType: 'module',
      moduleType: 'schema',
      schemaConfig: {
        schema: {
          type: 'object',
          properties: {
            productId: {
              label: '商品ID',
              tableOption: {
                visiable: true,
              },
              searchOption: {
                comType: 'input',
                default: '',
              },
              type: 'string',
            },
            productName: {
              label: '商品名称',
              tableOption: {
                visiable: true,
              },
              searchOption: {
                comType: 'input',
                default: '',
              },
              type: 'string',
            },
            productPrice: {
              label: '商品价格',
              tableOption: {
                visiable: true,
              },
              searchOption: {
                comType: 'input',
                default: '',
              },
              type: 'number',
            },
            productType2: {
              label: '所属类型2',
              tableOption: {
                visiable: true,
              },
              searchOption: {
                comType: 'select',
                default: '',
                placeholder: '请选择类型2',
                clearable: true,
                enumList: [
                  {
                    label: '全部',
                    value: 'all',
                  },
                  {
                    label: '商品',
                    value: 'product',
                  },
                  {
                    label: '商店',
                    value: 'shop',
                  },
                ],
              },
              type: 'string',
            },
            productType: {
              label: '所属类型',
              tableOption: {
                visiable: true,
              },
              searchOption: {
                comType: 'dynamicSelect',
                default: '',
                api: '/api/proj/productEnumList',
                placeholder: '请选择类型',
              },
              type: 'string',
            },
            createdAt: {
              label: '创建时间',
              tableOption: {
                visiable: true,
              },
              searchOption: {
                comType: 'dateRange',
                default: '',
              },
              type: 'string',
            },
          },
        },
        api: '/api/proj/product',
        conponent: '',
        searchConfig: {
          comType: 'input',
          default: '',
        },
        tableConfig: {
          headerButtons: [
            {
              label: '新增', // 按钮名称
              eventKey: 'add', // 事件名称
              eventOption: {}, // 按钮事件具体配置
              plain: true,
              type: 'primary',
            },
          ],
          rowButtons: [
            {
              label: '编辑', // 按钮名称
              eventKey: 'edit', // 事件名称
              type: 'success',
            },
            {
              label: '删除', // 按钮名称
              eventKey: 'delete', // 事件名称
              type: 'danger',
              eventOption: {
                // 请求参数格式
                // 格式一：[key1]: value1 // 固定值
                // 格式二：[key1]: schema::tableKey // 从 tableData 中获取值\
                body: {
                  productId: 'schema::productId',
                },
              },
            },
          ],
        },
      },
    },
  ]
};

dy搜索：哲玄前端，《大前端全栈实践课》干货满满