DophinScheduler ui部分核心代码详细解析——重中之重的src文件夹里究竟有何种玄机

最新推荐文章于 2024-06-12 17:11:23 发布

Stephen Haw King

最新推荐文章于 2024-06-12 17:11:23 发布

阅读量677

点赞数

分类专栏： DolphinScheduler 文章标签： hadoop hive zookeeper big data

本文链接：https://blog.csdn.net/qq_50740678/article/details/121342539

版权

DolphinScheduler 专栏收录该内容

12 篇文章 6 订阅

订阅专栏

2021SC@SDUSC

一、整体结构

在这里插入图片描述
具体的结构分析参见 DolphinScheduler ui部分代码机构全解析

二、具体细节

1.components

该文件夹下有一个Counter.vue和Message.vue，分别规定了计数器和信息组件的前端样式。
Message.vue没什么好说的，只是把信息放入了一个头号标题<h1>标签。
现在我们来看看Counter.vue。
在这里插入图片描述

简洁明了。这里可以看到counter组件为每一个数值类型数据提供了加减和置零三个按钮。

在这里插入图片描述

注意一下这里，可以看到counter计数器不是简单地执行加减，而保存着系数factor变量。也就是说这段代码自身便提供了很方便的修改自加因数的手段。

2.images

存放了一张DolphinScheduler用到的图片。没什么好说的。

3.js

这个文件夹是至关重要的代码核心，光是看它如此纷繁复杂的文件目录层次就可见一斑。
在这里插入图片描述

而以上图片不过是完全展开了其中一个组件的包。

1.dag-canvas

包含vue和css两个文件。dag即有向无环图，canvas即画布。这个组件用于产生有向无环图的画布，也就是说是用来给用户提供任务流程绘画功能的。
回顾我们之前的项目实践，我们不难推测这一部分提供的功能是产生这张画布。
在这里插入图片描述
我们可以在这张画布上自由地添加左侧的组件并随意地调整组件间的相对位置以及拓扑结构。
现在让我们把目光回归到源代码，我们可以主要关注以下这两个部分。

这一部分是html主体，可以看到有taskbar任务栏，paper画纸，minimap小地图以及contextmenu文本菜单四个组件。
这里比较惹眼的显然是这几个@drag注解。他们都是vue提供的语法糖。其中dragenter在正在拖拽的元素的标记进入某个Dom元素时触发；dragover在拖拽的元素的标记在进入的Dom元素上移动时触发，在自身移动时也会触发；dragleave在拖拽的元素在离开进入的Dom时触发。
.prevent是vue的事件修饰符，会阻止标签在冒泡结束后自动执行标签自带的默认事件。类似的还有.stop等。

在这里插入图片描述

这里我们可以看到它首先定义了一个图像对象，还定义了初始卷轴位置坐标。对于拖动事件dragging则记录了拖动时间移动的坐标x和y轴距离，从而记录拖动的向量并据此调整组件从而完成互动响应。

2.contextMenu

同样包含vue和css两个文件。
在这里插入图片描述

这里可以看到这个文件做的是一个菜单，包含启动、编辑、复制、删除四个菜单组件。据此不难推测该组件做的是用户界面中每个任务实例下的选项菜单。而后面对代码的细致解读也验证了这个猜想.

这里比较有意思的是这个computed
在这里插入图片描述

computed是用来监控自己定义的变量，可以在页面上进行双向数据绑定展示出结果或者用作其他处理。相比于watch，computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化。

其余的方法就是实现上面那张图用到的方法，具体实现删除等功能。

.vue的前端文件我们就以这两个为例。接下来我们看看其他文件。

3.nodeStatus.js

在这里插入图片描述

这个文件比较有意思。通常js文件是写JavaScript方法，偶尔定义一些全局变量。这里是直接建立了一个html组件，也就是实例instance，把它设为常量。这种用法我还是第一次见到，其编程思想大概和定义宏比较相似，通过结构化定义省略冗余重复的代码量。
文件定义叫节点状态，实际上保存的是任务实例的一些基本属性，像名字和运行状态等。

4.formModel

在这里插入图片描述

顾名思义，表单模型。
_source和tasks里放的全都是.vue文件，定义的是一个个页面组件。

在这里插入图片描述

可以看到这些组件都是负责渲染表单的操作的。回想我们之前的实践，比如从过往任务中复制表单设置、设置任务独立的超时计时器、选择输入框等，表单组件的样式和基本功能的实现都是在这个文件夹中完成的。

在这里插入图片描述
奇怪的是，tasks里也放着一个_source文件夹。

更为奇怪的是，这两个文件夹的内容看上去完全不一样。不知作者如此命名用意何在。
接下来我们重点看formModel.vue，这个文件是我们理解整个文件夹，获取程序设计核心思想的关键所在。
在这里插入图片描述

这里用了一个m-list-box标签，不知道这是何种第三方库提供的组件。不过看这el-input以及v-model也不难知道这里是定义的节点名的输入框样式。

在这里插入图片描述

这里我们可以看到熟悉的copy from task，在先前定义的样式直接在这里派上了用场。running sign是运行标志，description则是对任务节点的具体描述。
从以上基础细节便可知道整个formModel文件夹正是用来定义任务节点信息的表单样式的。通过它，用户输入表单的任务信息数据便可传递到后台。

dag文件夹的核心部分已经分析完毕，剩下一些jumpAffirm跳转确认等代码量都不多，功能也都不那么关键，将不再浪费笔墨分析。

我们花费大量精力浓墨重彩分析的dag暂告一段落，接下来我们再来寻找src下还有哪些核心组件。

DophinScheduler ui部分核心代码详细解析续集——前端组件的代码综合分析