Worktile网盘
本课程是Worktile的一部分。
演示
读取文件夹及文件信息。
文件夹树
文件路径
搜索
排序
重点、难点：
树形数据结构
文件夹只是存储于product表中的简单记录，包含名称、颜色、父（即父文件夹）信息，而非直接的树形结构，但我们要根据“父”构造出类似于上节课的树形组织架构来，作为数据组件的数据源。
文件夹可以有非常深的层次结构，不像组织架构那么单一稳固，不能一次性把所有的文件夹都读取出来。我们在onReady先读取顶层文件和顶层文件夹（其父文件夹是"无"），并依次读取各自直接子文件夹（根据有无子文件夹决定是否显示“展开”小三角图标）。
读取文件或文件夹的一个要点是把父文件夹_id传入执行环境：{ 父: _id }。
文件是上传到对象存储服务器的普通资源，并不无文件结构树信息，所以我们每次上传完文件后要给资源表添加当前文件夹作为其父文件夹：
$resource.modify(_id, { "x.类型": "网盘", "x.父": 当前文件夹_id })几个关键变量
$v.根是文件夹结构树的根（名称唤作“网盘”吧，文件路径的第一个节点），是最大的一棵树。它的“zchildren”包含上面读取顶层文件夹，”文件“包含顶层文件。特别地，它的_id为”无“。$v.树是以父文件夹_id作为key的各级文件夹起始的大大小小的树。所以$v.树.无也即$v.根。$v.路径是树根到当前文件夹各级文件夹树的数组$v.文件夹是当前文件夹_id。用户点击时（无论是左侧文件结构树还是主体文件夹列表）会以它作为父文件夹读取它里面的文件夹和文件信息。另外，点击”展开“小三角图标时只需读写孙辈文件夹信息，一方面树里不展示文件信息，另一方面子文件夹已经读取，孙辈文件夹信息是为了决定是否展示子文件夹的小三角。文件夹（自定义组件）
动态颜色重新渲染
当$v.F5变化时有三个挂载组件会重新组装数据并再次渲染。
A. 左侧文件结构树里的挂载组件就是用来组装$v.树的，从根节点开始向下递归遍历所有已经搜索出来的文件夹：一方面把文件夹直接挂载$v.树上，另一方面把它推入父文件夹的zchildren数组中。
B. 顶部的文件路径里的挂载组件就是用来组装$v.路径的，从当前文件夹开始向上递归直至根节点，把每层文件夹推入路径数组头部（unshift）。
C. 主体文件列表里的挂载组件就是用来组装当前文件夹里的文件列表的。搜索、排序
我们总是先展示文件夹列表，然后才是文件列表，是分开搜索分开排序的，再把两种拼接起来：
($v.搜索.文件夹 || $v.树[$v.文件夹].zchildren || []).sort($v.sort.key, $v.sort.incr).concat(($v.搜索.文件 || $v.树[$v.文件夹].文件 || []).sort($v.sort.key, $v.sort.incr))
新建文件夹
上传文件（可多选）
上传文件夹（保持文件结构）
上传列表，上传进度和状态
重点、难点：
上传文件
按钮触发的是隐藏在里面的input元素：$el.firstElementChild.click()。
把上传成功后才要用到的$l.U在刚开始选择文件（onChange时）就设置了是为了防止上传过程中受到用户点击了其他文件夹导致$v.文件夹发生变化的影响，而刷新用户当前文件列表（$v.exp.文件.exc({父: $v.文件夹})）则没有这个忧虑。上传文件夹
为了避免受$v.文件夹变化的影响先赋值给临时变量：$l.文件夹 = $v.文件夹
把整个文件夹递归上传的关键是每个待上传文件有个相对路径webkitRelativePath，循环每个路径节点，创建未创建的文件夹节点，直到最里层的文件夹赋给$l.当前文件夹，上传完成后把它作为父文件夹。上传列表
文件上传前把信息推入$v.上传数组，标识为”正在上传“，如果是图片或视频给它创建一个缩略图：URL.createObjectURL(file)，上传过程中及时改变它的进度样式，上传完成后删除”正在上传“标识。
重命名
移动
删除
修改颜色
发送到聊天
回收站
重点、难点：
我们删除文件夹或文件是让它脱离原来的位置，但随后有还原操作，所以还要保留原来位置的信息。
我们通过把父文件夹改成原父文件夹的形式来实现
$rename: {"x.父": "x.原父"}
这样没有父文件夹的资源就是被逻辑删除的。
"x.原父": {$exists: true}