0
点赞
收藏
分享

微信扫一扫

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍


site-context-routes-handler.ts (SiteContextRoutesHandler)

三个依赖:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_javascript

site context state 和 url 之间存在双向同步关系。

init

init() {
this.router = this.injector.get<Router>(Router);

this.location = this.injector.get<Location>(Location);
const routingParams = this.siteContextParams.getUrlEncodingParameters();

if (routingParams.length) {
this.setContextParamsFromRoute(this.location.path(true));
this.subscribeChanges(routingParams);
this.subscribeRouting();
}
}

上述代码,调用 ​​getUrlEncodingParameters​​ 获取参数列表:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_开发语言_02

然后从 this.location.path 得到当前浏览器地址栏里的 url,从 url ​​/electronics-spa/en/USD​​ 里提取出参数。

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_json_03

setContextParamsFromRoute

从 url 里解析参数,然后更新 site context state

解析出的参数是一个 JSON 对象:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_javascript_04

根据参数名称,从 service map 里获取对应的 service 实例,然后调用 setValue 方法。

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_json_05

还是 facade 层的 setActive 方法:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_json_06

最后在 reducer 里返回一个新的状态(有限状态自动机):

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_javascript_07

注意 callstack:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_地址栏_08

subscribeChanges

site context 发生变化之后,我们需要采用编程的方式,更新浏览器地址栏里的 url.

例子:当我从 language 下拉菜单里将语言从英语更改到中文时,断点立即触发:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_数据_09

此时 router url 里已经出现了 zh,这个值是什么时候写入的?

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_数据_10

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_数据_11

这行代码 ​​this.location.replaceState(serialized);​​ 单步执行之后,地址栏立即出现了zh:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_开发语言_12

语言发生变化之后,如何同步到浏览器地址栏的 url 字段?

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_开发语言_13

切换成中文后,this.router.url 片段里,已经出现了 ​​zh​​,这是一个 get 实现:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_javascript_14

调试器显示,这个 get 的执行根本还没结束:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_地址栏_15

上图是 Angular 框架代码,url 是通过 ​​this.serializeUrl(this.currentUrlTree)​​ 动态计算出来的。

router 的 urlSerializer 是我们动态注入进去的:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_json_16

这里就开始执行我们自己的业务逻辑了:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_地址栏_17

params 参数为空:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_javascript_18

segment,query 和 fragment 全部为空:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_javascript_19

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_json_20

然后再从 urlEncodingParameters 里依次将 baseSite,language 和 currency 最新的参数值读取出来:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_json_21

既然传进来的 params 里没有数据,就调用 SiteContextParamsService 读取参数值:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_数据_22

现在调用的就是 services 文件夹下的实现,之前已经了解过了:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_数据_23

从 service map 里读取数据:

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_开发语言_24

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_javascript_25

所以 router 最后的值进行了更新:​​electronics-spa/zh/USD/​

SAP 电商云 Spartacus UI SiteContextRoutesHandler 的技术实现明细介绍_地址栏_26


举报

相关推荐

0 条评论