Dokit 对齐标尺功能源码解析

用户1563465746852
200 阅读5分钟

一、前期准备

1. 源码下载

git clone https://github.com/didi/DoraemonKit

2. 环境配置

在Web文件夹下，找到DEVELOPMENT.md，按照步骤配置即可。

环境配置说明.png 配好环境打开网址，即可查看“对齐标尺”功能效果。

3. 功能效果

利用可移动标尺可以查看元素位置及元素对齐情况。移动中心点，显示中心点距上下左右的距离。

功能效果图.png

二、源码阅读

1. 定位“对齐标尺”功能代码位置

文件位置：Web/packages/web/src/plugins/align-ruler

image.png

image.png

2. 分析“对齐标尺”功能文件结构

（1）index.js

从命名上可知，index.js 应该是对外提供的接口，是外部访问首先访问的文件。

打开index.js查看引用关系：
image.png
可见，index.js 文件引用了align-ruler.vue 文件。

（2）align-ruler.vue

打开align-ruler.vue查看引用关系： image.png
可见，align-ruler.vue 文件引用了 info-box.vue 文件。

（3）文件结构

由此可知 align-ruler 功能对应的文件结构为：
image.png

3. 源码解析

了解了文件结构后，开始按照结构来阅读和分析源码。

（1）index.js

image.png
可见代码共分三部分：代码注释部分、导入组件部分、导出组件部分。
其中：

  • 导入组件部分

    image.png
    是从 ‘./align-ruler.vue’ 文件中导入 AlignRuler 组件和从 ‘@dokit/web-core’中导入 IndependPlugin 组件。

  • 导出组件部分

    image.png
    导出的组件的方式是 export default，导出的内容是新创建的 IndependPlugin，是通过传入参数来对其初始化的，参数包括：nameZh（中文名字）、name（英文名称）、icon（图标地址）、component（组件）。

    分析可知，实现“对齐标尺”功能的对象，实际上是 AlignRuler 组件。

（2）info-box.vue

info-box.vue 提供的组件，被 align-ruler 组件所引用，而 align-ruler 组件又是“对齐标尺”功能实现的主体。

  • template 代码块

    image.png
    template 代码块中定义了一个position-infobox，即显示位置信息的div容器和一个关闭按钮。其中：
    a. 位置信息包括上下左右四个方位的信息，数据通过动态绑定的方式来获取，即通过 position 对象的属性值。
    b. 关闭按钮绑定了一个点击事件，点击后会移除显示位置信息的 div 容器。

  • script 代码块

    image.png
    script 代码块所做的主要工作就是将 info-box 组件导出，其中该组件中的 props 属性主要用于组件的传值，它定义了position，并在position内设定了上下左右四个属性，并且规定了这个四个属性的默认值。

  • style 代码块

    image.png
    style 代码块主要设定了位置信息容器和关闭按钮的样式。

（3）align-ruler.vue

align-ruler.vue 是 align-ruler 组件的主体，它实现了“对齐标尺”的主要功能。

  • template 代码块

    image.png
    template 中定义了许多个 div 元素，分别是和标尺中心有关的：背景、范围、中心点、以及水平标尺线、竖直标尺线还有中心点距离上下左右边界的距离。 最后还定义了一个标尺拖拽遮罩层，鼠标移动停止和触碰开始时还绑定了自定义的“drag”事件。 如下面的效果图所示：

    image.png

  • script 代码块

    image.png

    image.png
    script 代码块中先是导入了InfoBox组件和removeIndependPlugin组件，然后通过export default方式导出了align-ruler组件。 接下来分析align-ruler组件的参数。

    a. name：组件的名称。
    b. components：align-ruler 用到的其他组件，即 info-box。
    c. data（）：数据域。

    image.png

    d. computed：computed 是 Vue 的计算属性，它是以属性的方式调用，computed具有缓存功能，只要里面的数据不发生改变，就不会重新计算。
    computed 中提供了 template 中各个元素具体数值的计算方法，如下图所示： image.png

    image.png
    比如 position（）：它的 top 属性值就是距离屏幕顶端的距离，left 属性值就是距离屏幕最左端的距离，而 right 属性值就是用屏幕长度减去距离屏幕左端的距离，bottom 的属性值就是用屏幕高度减去距离屏幕上端的值。
    其他方法也类似。

    e. mounted（） 和 beforeUnmount（）： image.png
    mounted（）方法的作用是针对浏览器缩放事件来添加监听器，监听浏览器   是否缩放。而 beforeUnmount（）方法是用来移除针对浏览器缩放事件的监听器的。

    f. methods：methods 主要用来定义方法。
    image.png
    methods 中定义了三个方法，分别是 remove（）、handleResize（）、drag（e），分别用来移除 “align-ruler” 组件、浏览器缩放时重新计算尺寸、拖拽事件的处理。

    其中拖拽drag()：
    image.png
    startX 和 startY 分别是拖拽停止时，鼠标悬停位置的 X 轴坐标和 Y 轴坐标，即鼠标悬停点点的坐标为（startX, startY）, offsetX 和 offsetY 分别表示拖拽后，鼠标悬停点相对于拖拽前标尺中心点的 X 轴偏移量和 Y 轴偏移量。

    image.png
    update 函数用来更新标尺中心点的坐标，其实现逻辑是用传入的 X 轴 和 Y 轴坐标值减去前面计算出的 X 轴 和 Y 轴的偏移量，得到新的 X 轴和 Y 轴左边值，即 left 和 right，然后对 left 和 right 分别进行四舍五入计算，并将计算结果作为标尺中心点的坐标。

    image.png
    handleMousemove（） 函数的作用是处理鼠标移动导致的标尺中心坐标变化，即更新鼠标移动后标尺中心的坐标值。

    image.png
    handleTouchmove（）函数的作用与handleMousemove（）函数类似，只不过处理的是触摸事件导致的标尺中心坐标的变化。

    image.png
    drag （）函数为了计算拖拽后的标尺中心点坐标，添加了四个事件监听器：mousemove 事件监听器、 touchmove 事件监听器、mouseup 事件监听器、touchend 事件监听器。当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件，触发相应处理函数；当用户在屏幕上移动手指时会发生 touchmove 事件，触发相应处理函数；当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件，触发相应处理函数；当手指从屏幕上离开的时候会发生 touchend事件，触发相应处理函数。

  • style 代码块

    image.png
    主要设定了 template 中各元素的样式。

avatar
文章
阅读
粉丝