DolphinScheduler ui部分 代码机构全解析

2021SC@SDUSC

---

一、目录结构

目录结构

1._test_文件夹

存放一部分常量和变量的定义，以及package.json进行依赖的引入与建立。

2.build文件夹

存放js文件，涵盖了前端ui部分常用的JavaScript方法。

3.node_modules文件夹

可以理解成是资源库(library)，存放@注解、第三方函数定义等资源。

4.src文件夹

存放源代码。在这里主要是前端代码，以html、css、js文件，以及一些必要的配置文件(config)。
值得一提的是DolphinScheduler采用的是vue进行对于页面的编写。

二、对核心代码src的内容功能分析解读

1.components

存放常用组件。在这里只包含Counter.vue和Message.vue
counter 组件用来描绘加、减和重置按钮，是用来对数值型数据进行直观简易操作用到的。
message 组件仅仅定义了一个<h1>标签，用来显示信息，规范信息显示的格式。

2.images

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

3.js

该部分是ui的核心代码部分，用JavaScript编写了实现前端核心功能的代码。
该部分分为conf和module两个文件夹，
其中conf主要定义了基本操作，例如拖拽文件的响应时间等，
并且分为home和login两个文件夹，专注于主页和登录界面组件的互动响应；
而module则更注重于扩展组件的功能，例如对于图表的操作，
对于下载功能的实现，引入并使用axios,echarts等第三方库等。

conf文件夹

值得注意的是，conf文件夹下，对于每一种具体的操作都整齐地划分了action.js、getter.js、index.js、mutations.js、state.js五种类型的js行为定义。
action：定义用户交互行为的响应形式与实现方法
getter：定义获取源数据的方式(大部分都是空的，应用默认方式)
index：声明并引入actions等其他四种js文件
mutations：定义用户对系统执行的更改，如重命名项目，更改当前任务等
state：声明并维护当前任务的一部分状态信息，如版本号、项目列表等。

4.lib

包含一些外部项的设置。如对email的格式设置。

5.sass

sass，英文全称:Syntactically Awesome Stylesheets，是一种css扩展语言。
这个文件夹中存放.scss文件以配置-通用的组件css样式。
分为common(全局配置)和conf，
conf文件夹中分别包含home和login两个界面各自特殊的css配置。

DolphinScheduler主页

6.view

视图文件夹，包含home和login两个界面的.html文件，文件描绘了这两个界面的
组件构成和html样式。

7.杂项

放在ui文件夹下的一些杂项，主要是一些基本配置。
重要一些的有package.json、package-lock.json（引入依赖）、
pom.xml（定义第三方库的版本信息）。

三、总结

通过对DolphinScheduler源代码结构的分析与理解，我们可以看到真正成熟的软件编写有着合理而清晰的逻辑结构，并且用很强的一致性对代码进行规范，例如无论是否有实际内容，conf文件夹中对每一项行为都有着五种js文件的定义。这种强烈的结构性与严谨性不仅给人一种森然之美，而且也为其他阅读源码的人以及编写者后续的更新维护带来了很大的理解上的便利。
此外，我们可以看到代码将html、css与JavaScript的内容完全分离开来，不仅缩短了每个核心代码的代码行数，也更加便于编写和阅读。这一点在早期的网页编程中是没有体现的，而其直接后果便是早期页面难以复用和更新。笔者本人先前编写的程序中贪图方便也没有将这三项功能进行严格区分，也确实给自己带来了很大的不便。因此，在编写程序的过程中一定要考虑代码的规范性和功能的分离性，遵守软件工程编程标准，才能更好地提升代码质量，节省不必要的麻烦。