1.核心技术一:webWorker

用到的技术栈:webWorker:使得 JavaScript 拥有了类似多线程的能力,目的是在执行一些非 常耗时的任务时不阻塞主线程,也就是不参与主线程的事件循环,所以不会阻碍用户的点击事 件等,有很好的用户体验,webWorker 和主线程通信的方式是订阅和发布模式,用 onmessage 函数监听返回的数据,用 postMessage 发送消息,这里需要注意的是要设计好双方的数据传 输协议,有一个通用的数据传输方式,不要混乱了,最好用 typescript 做类型约束.

2.核心技术二:只加载用户点击的目录

实现思路:维护一个多级目录的在根目录下的多级索引,比如某个目录在根目录[1][2][3]级 目录中,那就维护一个值 1-2-3 的 indexString,再点击这个目录的时候通过一个辅助函数 拿到根目录数据的[1][2][3]数据,然后加载这个目录,加载完毕后把数据再 push 进[1][2][3]的某个字段里,比如 children,如果使用的是 vue,注意在辅助函数里递归拿数 据的时候要把整个 root 传进去,不能只传 root.value,否则会响应式会失效,而且在递归时 应将上层执行的结果用 toRef 转成一个 Ref,否则依然会丢失响应式

3.最后就是展开和收起目录的逻辑了

这里依然使用发布订阅的模式,只是这次需要我们自己写一个了,也不难,写好以后在 FileItem.vue 里注册一个叫 TOGGLE_EXPEND_FOLDER_DONE 的事件,这个事件会在点击的目 录加载完毕后被 App.vue 发出,然后 FileItem 会把点击的目录展开(加载完毕后要将当前 目录的 isLoaded 设为 true,然后在点击时判断是否已经加载完毕了,如果加载完毕就不用 重复加载了)