陈 康

大致实现原理：

• 新建文件夹
  最主要的问题在新建文件夹的命名上
  • 把命名分为2部分：前半段是以'新建文件夹' 为开头，后半段以 '(数字)' 为结尾；
  • 获取所有符合此标准命名的文件夹，substr 截取后半段的数字，用 sort 进行比较，得到最大值，再 加 1 作为后半段命名；
  • 文件夹如果中途有删，新建的文件夹名称就要填补这个，所以在 【2】 之前要把所有空缺的数字，集合到一个数组里，进行从小到大排序，以最小的空缺数字为名字后半段；

• 排序
  • 时间排序：在文件渲染的时候，加上时间戳，根据时间戳的大小排序；
  • 拼音排序：引用第三方pinyin.js,来对比名称排序；

• 重命名
  • 通过自定义属性，获取目标ID，从而查找到当前ID数据进行重命名；
  • 命名结束时，执行检查；如果有重新命名，就检测文件类型是否一致、是否重名、是否为空，如果都为否，就替换当前ID的data名称，否则提示对应文字弹框，名字不做更改；

• 删除
  • 通过目标ID，查找到data里的此数据，删除，再重新渲染；

• 清空回收站
  • 设定了一个开关，默认为false，如果有删除文件，开关就改为true，回收站则更改为有垃圾的图标，当点击清空时，开关再改为false，图标也再次改回，以此循环；

• 图标拖拽，克隆，换位，删除
  • 在鼠标按下的时候，获取当前位置、克隆当前文件，更改透明度；
  • 在鼠标移动的时候，计算当前和按下时位置的差值，设置拖拽时的位置；
  • 在鼠标松开的时候，先判断克隆文件是否有拖动：没有就返回，删除克隆文件；
    有就判断是否和其他文件的中心点有碰撞，如果碰撞了，就把拖拽的文件数据更改到碰撞文件后面，删除克隆文件， 重新渲染；如果碰撞的是回收站，就直接删除拖拽的文件数据，再渲染；

• 键盘监听
  • 在重命名时，如果监听到 键盘值 e.keyCode == 13 时及enter键，就结束命名；
  • e.ctrlKey && e.keyCode == 86监听键盘Ctrl和 V 的值同时按下的时候，调用新建文件夹函数；

• 双击文字重命名
  • 文字ondblclick 双击时，调用重命名函数；

遇到难点：

• 新建文件夹时的命名规则中的筛选判断
• 重命名时中的 是否重名或没更改 的条件选择
• 文件克隆移动时的碰撞
• 右击显示上下文菜单的共用 li 问题

小结：

• 原生js的使用，开始的过程可能会慢一点，痛苦一点，但痛苦过后，得到的一丝丝的喜悦感以及技术的提升让我感觉是值得的，