HOW - 前端页面低代码 Schema 驱动最小范式

文章目录

一、最小范式（核心三要素）
- [Schema（描述 UI）](#Schema（描述 UI）)
- Renderer（解释执行）
- [Data + Action（驱动行为）](#Data + Action（驱动行为）)
[二、最小可运行 Demo（核心结构）](#二、最小可运行 Demo（核心结构）)
- [页面 Schema](#页面 Schema)
- Renderer（极简版）
- [状态 + 表达式系统](#状态 + 表达式系统)
- [Action 执行器](#Action 执行器)
三、这个"最小范式"本质是什么
- [UI 是 AST（抽象语法树）](#UI 是 AST（抽象语法树）)
- [行为是 DSL（领域语言）](#行为是 DSL（领域语言）)
- 数据是响应式上下文
四、为什么这是"最小范式"
[五、工程上常见扩展（从 MVP → 企业级）](#五、工程上常见扩展（从 MVP → 企业级）)
- 表达式系统（升级版）
- [Action Pipeline](#Action Pipeline)
- 组件协议（关键）
- 数据源抽象
- [插槽 / 作用域](#插槽 / 作用域)
总结

可以把"低代码 Schema 驱动前端"的最小范式理解为：

用一份 JSON（或类似结构）描述 UI + 行为 + 数据，然后用一个运行时解释执行。

下面介绍一个工程上可落地的最小闭环模型（MVP 级）。

一、最小范式（核心三要素）

一个低代码页面，最少只需要 3 个东西：

Schema（描述 UI）

描述"长什么样"

ts 复制代码

type Schema = {
  type: string;            // 组件类型
  props?: Record<string, any>;
  children?: Schema[];
};

本质：组件树 JSON 化。

Renderer（解释执行）

把 schema 渲染成 React/Vue 组件

ts 复制代码

function render(schema: Schema): ReactNode {
  const Comp = componentMap[schema.type];

  return (
    <Comp {...schema.props}>
      {schema.children?.map(render)}
    </Comp>
  );
}

本质：JSON → UI 的解释器

Data + Action（驱动行为）

让页面"活起来"：

ts 复制代码

type Action =
  | { type: 'request'; api: string }
  | { type: 'setState'; key: string; value: any }
  | { type: 'navigate'; to: string };

本质：声明式行为系统（替代写 JS）

二、最小可运行 Demo（核心结构）

页面 Schema

json 复制代码

{
  "type": "Page",
  "children": [
    {
      "type": "Button",
      "props": {
        "text": "加载数据",
        "onClick": {
          "type": "request",
          "api": "/api/list"
        }
      }
    },
    {
      "type": "Table",
      "props": {
        "data": "{{list}}"
      }
    }
  ]
}

Renderer（极简版）

ts 复制代码

const componentMap = {
  Page: ({ children }) => <div>{children}</div>,
  Button: ({ text, onClick }) => (
    <button onClick={() => runAction(onClick)}>{text}</button>
  ),
  Table: ({ data }) => <pre>{JSON.stringify(data)}</pre>
};

状态 + 表达式系统

ts 复制代码

const store = {
  list: []
};

function resolve(value) {
  if (typeof value === 'string' && value.startsWith('{{')) {
    const key = value.slice(2, -2);
    return store[key];
  }
  return value;
}

Action 执行器

ts 复制代码

async function runAction(action) {
  switch (action.type) {
    case 'request':
      const res = await fetch(action.api).then(r => r.json());
      store.list = res;
      rerender();
      break;
  }
}

三、这个"最小范式"本质是什么

一句话总结：

Schema = UI AST + 行为 DSL + 数据绑定

拆开看：

UI 是 AST（抽象语法树）

text 复制代码

Schema ≈ React Element Tree

你是在"描述 UI"，不是写 UI

行为是 DSL（领域语言）

json 复制代码

{ "type": "request", "api": "/api/list" }

替代：

ts 复制代码

onClick={() => fetch()}

数据是响应式上下文

text 复制代码

{{list}}  → store.list

类似：

Vue template
React state + selector

四、为什么这是"最小范式"

能力	是否必须
组件描述	✅
渲染器	✅
状态存储	✅
行为系统	✅

五、工程上常见扩展（从 MVP → 企业级）

在这个最小模型上逐步长出来：

表达式系统（升级版）

json 复制代码

{
  "visible": "{{user.role === 'admin'}}"
}

引入：

表达式解析器（如 new Function / safe-eval）

Action Pipeline

json 复制代码

{
  "type": "sequence",
  "actions": [
    { "type": "request", "api": "/api/a" },
    { "type": "setState", "key": "a" }
  ]
}

组件协议（关键）

ts 复制代码

type LowCodeComponent = {
  propsSchema: JSONSchema;
  events: string[];
};

解决：

设计器配置
表单驱动

数据源抽象

ts 复制代码

{
  "type": "dataSource",
  "fetch": "/api/list",
  "autoLoad": true
}

插槽 / 作用域

json 复制代码

{
  "type": "Table",
  "children": [
    {
      "type": "Column",
      "props": {
        "render": "{{row.name}}"
      }
    }
  ]
}

总结

低代码 = 用 JSON 描述组件树 + 用解释器渲染 + 用 DSL 驱动行为 + 用表达式绑定数据