我们如果通过 CSR 即 Client Side Render 的方式启动 SAP Spartacus UI,可以在 Chrome 开发者工具里观测到 Product Carousel 对应的产品主数据的 HTTP 请求。

在 SSR 模式下,结论是客户端应用不会再发起 product HTTP 请求。在 Chrome 开发者工具里观测不到此类请求。

但是,触发请求的外层代码仍然得到执行了:

看注释,底层的 product loader 确保 product 数据只加载一次:

什么时候应该加载 product?

loading 为 false,success 为 false,error 为 false 时,加载 product

distinctUntilChanged:淘汰掉重复的数据。

merge:合并异步数据流。

117行的断点进不去。

combineLatest 的弹珠图:

调⽤withLatestFrom的那个Observable对象起到主导数据产⽣节奏的作⽤,作为参数的Observable对象只能贡献数据,不能控制产⽣数据的时机。

merge 的弹珠图:

更多Jerry的原创文章,尽在:“汪子熙”:

为什么 SAP 电商云 Spartacus UI SSR 模式下的客户端应用,不会发起 product 请求相关推荐

  1. 关于 SAP 电商云 Spartacus UI SSR 的 state transfer 问题

    我使用基于版本 3.4.5(某客户正在使用)的 Schematics 创建了一个店面,并在 SSR 模式下运行它. 我在浏览器中访问 http://localhost:4000/. 通过 Chrome ...

  2. SAP 电商云 Spartacus UI SSR 单元测试里的 callFake

    callFake 的接口定义可以在 jasmine.js 里找到: SpyStrategy.callFake, 返回 Spy 对象. spy1 即 originalEngine,二者指向同一个对象实例 ...

  3. SAP 电商云 Spartacus UI SSR 里 engine 和 engine instance 的区别

    传入 originalEngine 到装饰器 decorateExpressEngine 里: 传出的是一个 engine 函数,engine 函数包括了 original Engine 这个函数,然 ...

  4. SAP 电商云 Spartacus UI 产品搜索结果的设计明细

    我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...

  5. Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例

    关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...

  6. SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数

    为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...

  7. SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改

    我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...

  8. 在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合

    先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...

  9. SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子

    如何理解 SAP 电商云 Spartacus UI 中的 proxy facade? Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解 ...

最新文章

  1. 服务器搭建虚拟win云服务,云服务器创建win10虚拟机
  2. 网页中 哪些是 GET 请求,哪些是 POST 请求
  3. QIIME 2用户文档. 16纵向和成对样本比较q2-longitudinal(2019.7)
  4. 附庸风雅(2006-10-20 13:39:32)(新浪)
  5. js重新渲染div_前端工程师必备:从浏览器的渲染到性能优化
  6. 数据结构链表之单向链表:Python3 实现单向链表——1
  7. SpringMVC之RequestParam详解
  8. django 跳转其他网站_Django 实战 | 搭一个 GitHub 用户展示网站 04
  9. 手动angular2环境搭建_详解.Net Core + Angular2 环境搭建
  10. 程序转制作人——游戏设计课程导论
  11. Oracle 逗号分割的字符串转换为可放入in的语句
  12. 使用 bibexcel 把.out 文件转换成 .net 文件
  13. 智慧路灯杆系统车流量监测解决方案
  14. Yate软交换机IPPBX与电话语音网关的初步配合
  15. 学习关于 2D 和 3D 姿势估计的知识
  16. 码农的奋斗之路 富爸爸穷爸爸系列--提高你的财商 读后感
  17. 实战:淘宝新品想抢占市场流量 分三步进行
  18. 如何测试微信的点赞功能
  19. 北京市海外学人中心《北京市留学人员工作居住证》攻略
  20. Android轻松实现日期选择器、生日选择器、自定义起始时间

热门文章

  1. Eclipse生成get,set方法,无参构造方法和有参构造方法
  2. php data类型转换,【原】超简单类型转换(DataTable
  3. php 如何实现关键字查找,php中如何通过关键字查找文件中包含该关键字的所有行内容呢...
  4. Lombok开发指南
  5. 15分钟构建超低成本数据大屏:DataV + DLA
  6. 一个学习的好去处!!
  7. cygwin下如何运行crontab定时脚本?
  8. webpack常用命令总结
  9. 第二阶段冲刺-个人总结09
  10. 正则表达式匹配手机号