SAP Spartacus B2B Org Unit List节点展开的递归逻辑实现

简介: SAP Spartacus B2B Org Unit List节点展开的递归逻辑实现

Rustic Services有两个子节点,点击之后,触发toggle方法:



image.png


子节点分别是Services East和Services West:

image.png


this.treeToggle$是一个BehaviorSubject:

image.png



toggle执行后,执行next方法,通知subscriber:


image.png


我想知道的是这个Mapsubscriber是什么时候订阅的:


可以在Chrome调试器里找到Mapsubscriber的方法实体project:() => tree, 然后作为关键字在Visual Studio Code里搜索:



这个value包含的值,应该就是整棵tree, 即() => tree的执行结果:



image.png


image.png


重新对整棵树进行排序:


image.png

首先把整个完整的tree节点加到values数组里:


image.png


然后递归处理第一个子节点Rustic Services:


image.pngimage.png



将该子节点,Rustic Services,插入到values数组里,因为递归进入convertListItem, values数组已经重新初始化了:

image.png



此处准备再次进入Rustic Services的子节点Services East的递归处理逻辑:


image.png


因为Servies East没有子节点了,所以跳过74行forEach的执行:


image.png


出栈,返回包含Servies East单个元素的数组:


image.png


以及计数器3:因为我们总共touch了三个树节点:root,Rustic Services和Services East:

image.png



当前执行上下文里,处理的节点是Rustic Services,处理的子节点为Services East,第75行convertListItem返回的values数组包含的值是Services East的数据,而原有的values,包含的数据是Rustic Services的值:


image.png


同样,下一步处理Services West这个子节点:


image.png


至此,Rustic Services本身及其子树已经处理完毕。values数组总共包含三个元素:


image.png


所以我们能够看出,这是一个深度优先遍历策略:


image.png


image.png


最后的处理结果:

image.png

image.png

相关文章
|
15天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 "title" 的元素节点,并存储在节点列表 x 中。通过 "length" 属性确定 x 的长度(即 "title" 节点总数)。利用 for 循环遍历整个列表,访问每个 "title" 节点的第一个子节点的值,并将其写入文档。
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
`length`属性用于获取DOM节点列表的长度,即节点数量。通过遍历这个属性,可以访问和处理所有节点。例如,示例代码加载"books.xml",获取所有"title"节点,并依次输出它们的第一个子节点的值。
|
1天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
3天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
7天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
5天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
10天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
13天前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
20天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 "title" 的元素节点,并存储在节点列表 x 中。通过 "length" 属性确定 x 的长度(即 "title" 节点总数)。利用 for 循环遍历整个列表,访问每个 "title" 节点的第一个子节点的值,并将其写入文档。
|
24天前
|
存储 JavaScript
DOM 节点列表长度(Node List Length)
名为 "title" 的元素节点,并存储在节点列表 x 中。通过 "length" 属性确定 x 的长度(即 "title" 节点总数)。利用 for 循环遍历整个列表,访问每个 "title" 节点的第一个子节点的值,并将其写入文档。