Markodwn 题目对齐的同步转动

2019年9月1日 213次阅读 来源: VenomSnake

媒介

须要给正在写的Markodwn编辑器加上同步转动的功用，百度了一通，没找到比较好的思绪。就本身写了一个。

Github上是写好的库，和更直观的Demo。
Github

这篇文章重要讲的是完成的思绪。

引见

同步转动的完成体式格局有很多种。简朴粗犷的就直接让HTMLElement.scrollTop相称，另有就是让转动条等比例转动，另有题目对齐的转动（这个是我在stackedit上看到的）。

这篇文章重要的内容是题目对齐同步转动的完成体式格局。

个人来说比较喜好题目对齐，由于这类体式格局相对于别的两个对用户更友爱。

从道理上来说题目对齐实际上是等比例转动的改良版。由于他们的中心都是经由历程盘算编辑区和预览区的高度比值决议转动的间隔。

DEMO

下面是DEMO的GIF图
《Markodwn 题目对齐的同步转动》
注重左侧的# 同步转动 同步转动。

可以看到跟着转动条的挪动，摆布双方转动的间隔是差别的。

这个看起来有点像等比例转动，然则他们是不一样的，区别在等比例转动依据双方的全文高度决议转动间隔，题目对齐体式格局依据题目下内容高度决议转动间隔。

思绪

《Markodwn 题目对齐的同步转动》
上图是一张表示图：

# heading表示题目，content表示题目下面的内容。我把题目+内容称为片断（fragment）。

等比例转动我想应当比较好明白，就是经由历程盘算编辑区和预览区的高度比值，然后依据比值再盘算转动间隔。

而题目对齐要越发准确一些，它把编辑区和预览区的高度换成了题目高度+题目下内容的高度即片断的高度，然后依据当前的片断对应的高度盘算转动间隔。

《Markodwn 题目对齐的同步转动》

上面的表示图中的md height和html height就是我们须要的片断的高度。
很明显只需我们依据这两个高度的比值就可以盘算出相对应转动的间隔。

详细历程

  1. 起首须要编辑区和预览区的题目信息，数据结构以下。这里用editFragmentsInfo和preFragmentsInfo替代
FragmentInfo: {
    pairId,         // 于编辑区/预览区相对应的题目匹配用的id
    offsetTop,      // 间隔顶部偏移的间隔
    height          // 题目加上内容的高度
}
  1. 然后须要可以猎取当前页面顶部的题目块的要领，这里用getCurrentFragment()替代
  2. 接下来要在 编辑区（editArea）/预览区（previewArea） 的转动事宜中向 预览区（previewArea）/编辑区（editArea） 发送音讯关照它要最先转动了。

  3. 在另一地区接收到以后，举行以下操纵。（假定主动转动的是编辑区，被动转动的是预览区即另一地区）

    1. 先要拿到当前在顶部的题目，用上面提到的getCurrentHeading()猎取。
    2. 然后要在预览区中匹配到对应的题目。
    3. 依据双方headingInfo.height的比值盘算出的数值再加上headingInfo.offsetTop的值就是预览区的scrollTop。
  4. 到此为止，一次同步就完毕了。这一历程是绑定在元素的转动事宜上的，每次转动都邑触发一次如许的历程。
同步题目

由于一个元素的转动会致使另一个元素转动，这必定会构成死循环。所以在转动事宜中一定要举行推断，防止死循环。

这是简朴的互斥要领，支撑两个以上对象的互斥
互斥锁

    原文作者：VenomSnake
    原文地址: https://segmentfault.com/a/1190000019018876
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞