- Command 模式在 SAP Spartacus 中的具体应用
- SAP 电商云 Spartacus 服务器端渲染的单步调试详细步
- scss 文件里的特殊符号 - % 百分号和 $美元符号
- 让 fork 出来的 Github 仓库从远端仓库拖取最新的修改
- SAP Spartacus Definition of Done
- 关于 Angular 应用 tsconfig.json 中的 l
- 借助 SAP 电商云 Spartacus UI 提供的 Sche
- Rxjs map, mergeMap 和 switchMap 的
- SAP Spartacus的Component映射
- TypeScript 里的 Reference Type 和 T
在面向对象的编程中,命令模式是一种行为设计模式,其中对象用于封装执行操作或稍后触发事件所需的所有信息。 此信息包括方法名称、拥有该方法的对象和方法参数的值。
与命令模式相关的四个术语是命令、接收者、调用者和客户端。 命令对象知道接收者并调用接收者的方法。 接收器方法的参数值存储在命令中。 执行这些方法的接收者对象也通过聚合存储在命令对象中。 然后,当调用 command 中的 execute() 方法时,接收者会完成工作。 调用者对象知道如何执行命令,并且可以选择对命令执行进行记录。 调用者对具体命令一无所知,它只知道命令接口。 调用者对象、命令对象和接收者对象由客户端对象持有,客户端决定将哪些接收者对象分配给命令对象,以及将哪些命令分配给调用者。 客户端决定在哪些点执行哪些命令。 为了执行命令,它将命令对象传递给调用者对象。
下面是 command 模式在 SAP Spartacus 中的具体实现。
点 email address 之前,user 模块并没有被加载。

点击之后的 HTTP 请求:

http://localhost:4299/feature-libs_user_profile_public_api_ts.js
点了 save 按钮之后,其 form 的 onSubmit
方法被调用:

onSubmit
调用 this.service.save 方法。

UpdateEmailComponentService 的依赖 userEmail
, 类型为 UserEmailFacade
,其 update 方法的实现是一个 command
模式。

facade 最后 delegate 到具体的实现类:

使用依赖注入进行实现类的实例化:

首先使用 this.command.create 创建一个 Command 实例,类型为 Command,传入一个类型参数,包含 password 和 newUid 两个字段。

create 方法接收两个参数,commandFactory 是一个工厂函数,接收具体待执行的 action 的输入参数 payload.

工厂函数具体在这里得到执行:

生成一个新的 command 实例,然后返回。

稍后 email service 的 update 方法被调用。

调用刚刚返回的 command 实例的 execute 方法。
进入了刚刚返回的动态创建 command 实例的 execute 方法。

最终调用到了我们调用 create 创建 command 实例时传入的工厂方法的 wrapper 代码处:

cmd 就是工厂函数的输入参数:

这里工厂函数本身也是 rxjs 调用,并没有直接执行第 30 行的 connector.updateEmail 方法。

这个方法的具体调用还是在 command.execute 里通过 commands$.next
被执行。

最后拿到了 currentid
,作为参数传递给 update email connector:

修改邮件地址的 url:https://localhost:9002/occ/v2/powertools-spa/users/current/login?lang=en&curr=USD

payload:

没有 response。

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

网友评论