解析引擎
不同活动类型的展示形态比较类似,所以通过规范化的json配置文件进行整个活动的展示:
接口协议制定:
布局协议(schema ): 用来控制当前活动需要展示哪些组件,展示的位置以及嵌套关系,比如活动数据->免佣卡配置->免佣卡可用时间、标题等 部分属性:isRender用于配制该组件在组件中是否展示,有则通过执行isRender来判断是否需要渲染或者渲染的条件,没有isRender则直接渲染
组件协议
部分属性:
renderLogic:渲染处理函数
dataHandle:数据处理,有些数据需要转成特殊处理形式比如时间
issubmit:提交时需要带上的数据
渲染引擎原理
代码实现:
1.通过从URL中取出活动类型字段,在map中匹配使用哪个json配置文件,分别渲染活动详情、活动数据、操作日志
2.拿活动详情来举例,请求接口(标准化规范化的接口)返回详情数据,将json配置数据和接口详情数据传递给子组件,子组件:
(1)负责递归渲染子节点:拿到组件文件后,处理一些事项(是否需要提交、环境hubble/sp,匹配每个组件和对应的数据),将组件、组件对应数据、是否提交、ref等传递给组件
(2)ChannelDSL 类是一个 React 组件,它通过解析 JSON Schema 来动态生成组件,并允许通过 renderLogic 和 dataHandle 属性对组件的渲染逻辑和数据处理进行自定义。处理逻辑:如果renderLogic存在,则使用JsxParser(react-jsx-parser)渲染动态渲染组件,没有则使用现有封装好的通用组件,