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

2024-06-01 07:07:00

如何理解 SAP 电商云 Spartacus UI 中的 proxy facade？

Jerry 这篇文章什么是 SAP 电商云 Spartacus UI 的 proxy façade提供了理论上的解释。

本文介绍一个实际例子。

当我们打开如下 url 时，默认是不会触发 Quick Order Core module 的加载的，因为我们根本没有使用到 Quick Order 任何功能：

http://localhost:4299/electronics-spa/en/USD/

当然，我们仍然有办法，在 homepage 的 app.module.ts 里手动编写一些代码，这些代码需要 Quick Order core module 被加载之后才能正常执行：

上面代码注入的依赖 QuickOrderFacade，虽然是 Quick Order root module 的一部分，被正常加载，但是 QuickOrderFacade 只是一个 Abstract Class，需要 core module 里提供的具体实现才能继续执行。因此，加上了上述代码之后，我们访问 Spartacus UI 的 homepage，也会触发 Quick Order Core module 的加载。

上述结论可以在 Chrome 开发者工具 network 标签页里观察到 Quick Order Core Module 的加载：

以及对应调试代码的打印：

在运行时，当 AppModule 作为入口 module 被加载时，Angular 框架会调用 _resolveInjectorDefTypes 解析器构造函数里声明的依赖：

此时因为 QuickOrder core module 尚未加载，因此通过 QuickOrderFacade 提供的工厂方法 FacadeFactory 去提供依赖：

这里调用标准的来自 Angular/core 的 inject，结合传入的 descriptor，进行注入：

调用 inject 注入 FacadeFactoryService 的结果是什么？

结果就是得到了 FacadeFactoryService 的一个实例，且该实例的每个属性字段也均被注入了对应的实例了：

这里我们准备创建 cartQuickOrderCore 的具体实现，首先需要检查这个 feature 是否已经启用：

this.cmsConfig.featureModules 里确实存在 cartQuickOrder 的记录：

这里试图获取 QuickOrderFacade 的实现：

最终是通过 QuickOrderService 注入的。

此时 Quick Order core module 应该已经加载了。

我们来具体看一下到底是哪行代码触发的 core module 加载？

入口：

这一行的下一个函数调用触发延迟加载：

最终位置：

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

SAP 电商云 Spartacus UI Proxy Facade 的一个实际例子相关推荐

SAP 电商云 Spartacus UI feature level 的一个测试
首先明确,SAP Spartacus feature level 设置在 app.module.ts 里: 我们查看 cart-totals.component.html 的一个例子. 如果当前 fe ...
在 SAP 电商云 Spartacus UI 里手动注入 module 的几种排列组合
先把所有的排列组合罗列如下: (1) 通过构造函数注入 QuickOrderFacade,但不调用其方法 (2) 通过构造函数注入 QuickOrderFacade,调用其方法 (3) 手动通过 in ...
SAP 电商云 Spartacus UI 产品搜索结果的设计明细
我们使用如下 url 访问 SAP 电商云 Spartacus UI 产品搜索页面: http://localhost:4000/electronics-spa/en/USD/search/sony ...
Mobile first 设计思路在 SAP 电商云 Spartacus UI 中的设计体现一例
关于 Mobile First 的概念,请查看我这篇文章:什么是前端开发中的 mobile first 策略. 下图是 SAP 电商云 Spartacus UI 的搜索结果页面: 其布局设计:temp ...
SAP 电商云 Spartacus UI ComponentDataProvider defer 工厂函数
为什么 this.componentService.getItems 最后就触发到 Component-data.provider.ts 工厂函数的执行了? 29行的 getService: getS ...
SAP 电商云 Spartacus UI 里如何捕捉语言设置的更改
我们知道在 SAP 电商云 Spartacus UI 里,用户可以通过下拉菜单更改当前访问 site 的语言: 监控语言变化的代码: this.subscription.add(this.langua ...
SAP 电商云 Spartacus UI Quick Order 主页的实现
存货单位(英語:stock keeping unit,SKU/ˌɛsˌkeɪˈjuː/),也翻译为库存单元,是一個會計學名詞,定义为库存管理中的最小可用单元,例如纺织品中一个SKU通常表示规格.颜色. ...
SAP 电商云 Spartacus UI 从 CMS 取回 slots 和 component 之后的处理
从前一篇文章SAP 电商云 Spartacus UI 的双重 layout 配置层设计我们得知,Spartacus 层面的 layout-config.ts 可以控制 page template 应 ...
SAP 电商云 Spartacus UI 产品明细页面路由路径的自定义配置
如下图所示,为了减少 SAP 电商云 Spartacus 客户实施时不必要的配置,Spartacus 将不少页面的路由路径的默认配置,定义在如下的 default-routing-config.ts ...

最新文章

热门文章