低代码设计
2021-08-30 19:13:44 0 举报渲染器
作者其他创作
大纲/内容
生成器
生成器-根schema生成代码模板 + ejs
getVsible
setWrapperStyle
setChildren
设置默认值
解析视图
schema
安装组件
jsx转化视图
暴露通用的方法
setProps
setVisible
支持表达式字段
props
children
编辑器- 配置出schema导航区布局区属性区注册组件
visible 组件是否展示
处理每个节点参数
渲染器
属性区
视图区
框架层
wrapperStyle
按需加载组件
递归schema
原理:
组件A/B/C
组件本身对外暴露方法
cons ref = getRef(组件id)
eg: ref.setDataSource
简化配置的处理
生成唯一id
store
wrapperStyle 布局组件样式
id: 组件id。用户可自定义，如果不定义，自动生成
webpack动态加载组件import
实时渲染视图
编辑器
load组件、属性
打包器-打包编译源码src 打包distdist推动cdn
渲染器-根据schema渲染视图schema->jsx状态管理
组件库： 组件库打包CDN 组件属性抽出配置
schema => jsx
col
style
className
组件导航区
A组件操作联动B视图变动：方式一: 表达式：A操作数据变动，数据驱动B触发render重新执行。setData({visible: false}) 方式二: A获取B的ref，调用B对外提供的方法-针对复杂场景
visible：'{{$data.visible}}'
xComponent 组价名称
props 组件参数
children 组件的孩子
hoc封装组件额外封装通用方法
HOC容器
解析出表达收集依赖
收藏
职业：暂无
0 条评论
下一页
