在客户端渲染即 CSR 模式下,我们能在 Chrome 开发者工具里观测到大量根据 product code 读取产品主数据的 HTTP 请求:
响应结果:
上面的数据,对应屏幕里这个产品:300938
通过 cx carousel 这个控件发起的 HTTP 请求:
这个高亮区域是 template:
即:
这个 template 是 carousel 的消费者在 html 里传入的:
消费者之一就是 cx-product-carousel:
product carousel 里的产品列表来自 productCodes 字段,通过 this.productService.get 根据产品 code 读取产品主数据。
数据源来自依赖注入的 componentData.
什么时候被填充呢?
productCodes 的运行时数据:
准备渲染 ProductCarousel Component:
先得取得 ComponentData 的依赖:
找到了该依赖的 provide 记录:
调用 dataprovider,根据 uid 和 type 取得 ComponentData:
这里采取了一个延迟加载,当 Observable 被 subscribe 时,再执行:
什么时候被 subscribe 呢?答案如下:
items$ 的数据也来自 ComponentData:
ComponentData 数据读取,通过 cms service 完成:
从 store 里读取: