通过规范化的json配置文件和解析引擎DSL实现页面渲染

202 阅读2分钟

解析引擎

不同活动类型的展示形态比较类似,所以通过规范化的json配置文件进行整个活动的展示:

image.png 接口协议制定: image.png

布局协议(schema ): 用来控制当前活动需要展示哪些组件,展示的位置以及嵌套关系,比如活动数据->免佣卡配置->免佣卡可用时间、标题等 部分属性:isRender用于配制该组件在组件中是否展示,有则通过执行isRender来判断是否需要渲染或者渲染的条件,没有isRender则直接渲染

image.png 组件协议

image.png 部分属性: renderLogic:渲染处理函数 dataHandle:数据处理,有些数据需要转成特殊处理形式比如时间 issubmit:提交时需要带上的数据

渲染引擎原理

image.png 代码实现:

1.通过从URL中取出活动类型字段,在map中匹配使用哪个json配置文件,分别渲染活动详情、活动数据、操作日志

2.拿活动详情来举例,请求接口(标准化规范化的接口)返回详情数据,将json配置数据和接口详情数据传递给子组件,子组件: (1)负责递归渲染子节点:拿到组件文件后,处理一些事项(是否需要提交、环境hubble/sp,匹配每个组件和对应的数据),将组件、组件对应数据、是否提交、ref等传递给组件 (2)ChannelDSL 类是一个 React 组件,它通过解析 JSON Schema 来动态生成组件,并允许通过 renderLogic 和 dataHandle 属性对组件的渲染逻辑和数据处理进行自定义。处理逻辑:如果renderLogic存在,则使用JsxParser(react-jsx-parser)渲染动态渲染组件,没有则使用现有封装好的通用组件,