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

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

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

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

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

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

Schema（描述 UI）

描述“长什么样”

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

本质：组件树 JSON 化。

Renderer（解释执行）

把 schema 渲染成 React/Vue 组件

functionrender(schema:Schema):ReactNode{constComp=componentMap[schema.type];return(<Comp{...schema.props}>{schema.children?.map(render)}</Comp>);}

本质：JSON → UI 的解释器

Data + Action（驱动行为）

让页面“活起来”：

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

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

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

页面 Schema

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

Renderer（极简版）

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

状态 + 表达式系统

conststore={list:[]};functionresolve(value){if(typeofvalue==='string'&&value.startsWith('{{')){constkey=value.slice(2,-2);returnstore[key];}returnvalue;}

Action 执行器

asyncfunctionrunAction(action){switch(action.type){case'request':constres=awaitfetch(action.api).then(r=>r.json());store.list=res;rerender();break;}}

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

一句话总结：

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

拆开看：

UI 是 AST（抽象语法树）

Schema ≈ React Element Tree

你是在“描述 UI”，不是写 UI

行为是 DSL（领域语言）

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

替代：

onClick={()=>fetch()}

数据是响应式上下文

{{list}} → store.list

类似：

• Vue template
• React state + selector

四、为什么这是“最小范式”

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

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

表达式系统（升级版）

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

引入：

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

Action Pipeline

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

组件协议（关键）

typeLowCodeComponent={propsSchema:JSONSchema;events:string[];};

解决：

• 设计器配置
• 表单驱动

数据源抽象

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

插槽 / 作用域

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

总结

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