24/08/09

Plugin/初探富文本之文档虚拟滚动.md

@@ -735,7 +735,21 @@ class CommentModule {
 }
 ```
 
-实际上在前边我们提到过很多次我们不能通过`smooth`的平滑调度来处理滚动，因为我们需要明确的高度值以及视口锁定调度，那么我们同样可以思考一下这个问题，由于我们相当于完全接管了文档的滚动行为，那么明确的高度值我们只需要将其放置于变量中即可，那么视口锁定的调度的主要问题是我们不能明确地知道此时正在滚动，如果我们能够明确感知到正在滚动话就只需要在滚动结束之后再进行视口锁定的调度与块结构的渲染即可，在滚动的过程中不会调度相关的模块。
+此外，通常我们的评论还会存在跳转到上一处/下一处的功能，那么设想一下，此时由于虚拟滚动的存在我们不能够直接通过`DOM`节点的位置来获取其距离顶部的`TOP`值，也就没有办法正确将其按照顺序排序，即我们的上一处/下一处跳转功能可能会存在乱序跳转的情况。那么对于这个问题，我们还需要关注到编辑器本身块结构的偏序问题，即任意两个节点都是可以比较的，这个能力同样依赖我们的块级管理能力，通常来说如果是`Blocks`的编辑器会方便实现，非`Blocks`的编辑器在处理增量插入内部块时就需要额外地计算位置信息，当然即使是`Blocks`的设计也需要初始化以及处理增量计算。此外，当我们建设好这部分能力后，针对于`Effect HOC`的处理也会方便很多，我们可以直接取当前块之后序列的块即可。
+
+```js
+list.sort((a, b) => {
+  if(a.blockId !== b.blockId) {
+    return blockManager.compareBlockId(a.blockId, b.blockId);
+  }
+  if(a.line !== b.line) {
+    return a.line - b.line;
+  }
+  return a.offset - b.offset;
+})
+```
+
+在前边我们提到过很多次我们不能通过`smooth`的平滑调度来处理滚动，因为我们需要明确的高度值以及视口锁定调度，那么我们同样可以思考一下这个问题，由于我们相当于完全接管了文档的滚动行为，那么明确的高度值我们只需要将其放置于变量中即可，那么视口锁定的调度的主要问题是我们不能明确地知道此时正在滚动，如果我们能够明确感知到正在滚动话就只需要在滚动结束之后再进行视口锁定的调度与块结构的渲染即可，在滚动的过程中不会调度相关的模块。
 
 那么关于这个问题我有个实现思路，只是还没有具体实施，既然我们的滚动主要是为了解决上边两个问题，那么我们完全可以模拟这个滚动动画，也就是说对于固定的滚动`delta`值，我们根据计算模拟动画效果，类似于`transition ease`动画效果，通过`Promise.all`来管理所有的滚动进度，紧接着通过队列实现后续的调度效果，当需要取得当前状态时通过滚动模块决定取调度值还是`scrollTop`，当滚动完成之后再调度下一个任务。当然实际上我觉得这个方案可以作为后续的优化方向，即使是我们不调度动画效果，通过定位到相关位置实现目标闪烁的效果也是不错的。