构建可扩展的 DSL 驱动前端框架：从 CRUD 到领域模型的跃迁

一、背景与动因：从重复劳动中突围

在过去几年的前端开发实践中，我发现自己大部分时间都在与表格组件（如 table、column）和表单组件（如 input、select）打交道。每一个页面几乎都是围绕 CRUD 展开，重复地编写配置项、绑定数据、处理交互逻辑。

这让我开始思考：是否可以通过某种方式，将这些重复的页面结构抽象出来？是否可以用一套数据驱动的机制，自动生成这些页面，从而将开发者从繁琐的重复劳动中解放出来？

二、初步探索：配置化的组件抽象

在日常开发中，我逐渐意识到：许多页面结构和交互逻辑具有高度的重复性。表格展示、搜索过滤、数据请求等功能，往往遵循固定的模式。与其每次手动编写，不如通过配置化的方式进行抽象，让组件根据结构化数据自动生成页面内容。

通过学习《大前端全栈实践课》这个课程构建一套配置驱动的组件体系。通过定义字段、行为、布局等参数，页面可以在不编写模板代码的前提下完成渲染。这种方式显著提升了开发效率，也降低了维护成本。

然而，随着业务场景的扩展，配置化方案逐渐暴露出一些问题：

缺乏语义表达能力，难以覆盖复杂逻辑；
配置项之间耦合度高，维护成本上升；
难以在不同项目之间复用，缺乏通用性。

这些挑战让我开始思考：是否可以从"配置"进一步抽象为"语言"？一种具备语法规则、语义约束的表达方式，能够更清晰地描述页面结构与业务逻辑。这便是我探索领域特定语言（DSL）的起点。

三、DSL：让配置成为语言

DSL（Domain-Specific Language）是一种专注于特定业务领域的语言，它的语法和语义贴近业务逻辑，能够让开发者甚至非技术人员以更自然的方式描述系统行为。

一个优秀的 DSL 应具备以下特性：

专注性：只解决特定领域的问题，避免通用语言的冗余。
简洁性：语法贴近业务术语，易于理解。
易用性：降低使用门槛，业务人员也能参与配置。
抽象性：屏蔽底层技术细节，关注业务本身。

四、框架设计与实践

1. 页面结构设计

整个页面由三大区域组成：

区域	描述
`header-container`	顶部导航栏
`sider-container`	侧边栏菜单
`dashboard`	主内容区域，支持多种渲染方式（schema、iframe、custom）

其中，schema-view 是 DSL 的核心实现区域，负责渲染搜索项与表格项。

2. DSL 配置结构

DSL 的基本结构如下：

csharp 复制代码

const docs = {
  mode: 'dashboard',
  name: '',
  desc: '',
  icon: '',
  homePage: '',
}

通过不同的 mode 和 homePage，可以渲染出不同的页面结构与路由。

3. 基准配置与租户扩展

为了避免每个页面都重复配置，我们引入了"基准配置"与"租户配置"的合并机制：

基准配置：描述通用业务场景
租户配置：覆盖或补充基准配置
合并规则：后者覆盖前者，最终输出合并结果

例如，电商系统的淘宝租户配置如下：

css 复制代码

{
  name: '淘宝',
  desc: '淘宝电商系统',
  homePage: '/schema?proj_key=taobao&key=product',
}

合并后结果：

css 复制代码

{
  model: 'dashboard',
  name: '淘宝',
  key: 'taobao',
  desc: '淘宝电商系统',
  homePage: '/schema?proj_key=taobao&key=product',
  modelKey: 'business'
}

4. 页面渲染逻辑

目录区域

目录分为两种类型：

group：可嵌套子项
module：具体页面模块，支持四种类型：sider、custom、iframe、schema

dashboard 区域

schema-view 是最核心的部分，它通过 DSL 配置渲染出一个可查询的表格页面。配置项包括：

schemaConfig：页面操作配置（API、数据库、表格项、搜索项）
tableConfig：按钮配置（新增、修改、删除）
schema：列配置（每列的表格与搜索项）

例如：

product_Id：仅表格展示，无搜索项
product_Name：支持远程搜索的下拉框（dynamicSelect）
price：普通下拉框
inventory 和 create_time：支持搜索与展示

5. 项目结构

sql 复制代码

├── docs/                  # DSL文档
├── model/                 # 模型配置
│   ├── business/
│   ├── project/
│   └── index.js           # 模型解析引擎
├── app/
│   └── pages/
│       └── dashboard/
│           ├── entry.dashboard.js
│           ├── dashboard.vue
│           └── complex-view/
│               ├── header-view/
│               ├── sider-view/
│               ├── schema-view/
│               │   ├── search-panel/
│               │   └── table-panel/
│               └── iframe-view/

五、总结

通过 DSL 的方式，我们成功将前端页面的结构与行为抽象为可配置的数据模型，实现了页面的自动化渲染与复用。这不仅提升了开发效率，也为未来的多租户、多业务系统打下了坚实的基础。

注：抖音 "哲玄前端"，《大前端全栈实践课》