关于树形菜单实现问题

Question

产品出了个需求，想参考目标网站上的树形菜单实现这个功能。

网站地址如下：

https://m.ztrust.com/?#/zgt/c...

看 Network 是一次性把数据请求回来，分一级、二级、三级菜单、...

点击 children 展开下一级，并带上关系（类似 echarts 的树图） ，直到 children 为空表示没有下一级

数据结构长这样的

data: [
  {
   children: [
     {
       children: [
         {
           children: []
         }
       ]
     }
   ]  
  }
]

求分析下思路。。并如何实现这个的功能

Answer 1

数据结构就是标准的数据结构，是一次性取出来，还是分层懒加载，取决于总的数据量，以及树形展开的方式。

目标网站的菜单数据中，第一层菜单始终显示在顶部，作为分类。之后的层次都是最多呈现两层，父级在左侧侧边栏，子级在右边主区域，如果是点了子菜单项，会将当前子级作为父级移到左侧，右边呈现下一层的菜单 ……

从上面分析来看，要实现这个东西并没有什么特殊之处，唯一能感到点新意的是关系线条。

目标网站的关系线条是用 DIV 来画的，控制好位置和宽度也不难，控制不好就有对不齐的现象（比如现在目标网站就是）。如果想把线条画得好看一点，也可以采用 Canvas 来画 ……

分析大概就这样，你觉得难点在哪？

Answer 2

看你的菜单长度了，如果不多的话完全可以一次取回来，否则考虑第一次取三级（0，0.0，0.0.0），然后每次点击的时候跳取1级（点击0.0的时候取0.0下的所有0.0.0.0）。进一步优化可以考虑在第一次读取之后开启一个空闲读取序列。如果是固定菜单可以考虑缓存起来。

Answer 3

看起来类似思维导图的结构，刚入门前端的时候写过一个
https://github.com/wintc23/mi...

没有做展开/收起，但应该不是难点所在，繁杂的应该是计算节点位置。