基于elpis下 DSL有感

前言

前端程序员中大部分都是业务型开发员。看似工作忙碌，但是80%的工作的都是重复型的。每次业务过来都是将以前的代码拿过来改写来，然后完成那20%不同的业务需求。两三年后发现技术没有提升。因此迫切的希望改变工作模式，减少重复性的工作。提高工作效率，提升自己的技术储备。因此有了DSL

什么是DSL

DSL 是 Domain-Specific Language（领域特定语言）的缩写，领域特定语言指的就是专注于某个应用程序领域的计算机语言。

在我们这里指的是针对某一种领取重复型工作，我们将重复型的工作完成沉淀，让其可以通过配置来完成。我们只需要专注于不能通过配置完成的工作。并将其完成沉淀。来扩充我们的模型。这样我们就可以通过配置来搭建我们的项目实现一种类似低代码平台的效果。

elips的DSL的运行模式

声明式编程： 对于重复型的工作通过配置的方式来完成开发。减少编码时间，提高工作效率

可继承： 通过一个模板标准。可以配置出多个不同领域的基础模版。然在不同领域的基础模版上可以派生出不同项目来扩充自己的需求。

**可扩充性：**对于模版中不支持的类型或者业务可以通过自定义组件或者页面来完成

持续性： 组件的开发可以提升DSL功能，来提高DSL的能力

**最终实现：**通过配置实现页面的效果。程序员通过对配置文件的修改来实现页面的UI，页面的交互，API的增删改查。路由的跳转。

elpis DSL的实现

在elpis中，通过对配置文件的解析来完成各种不同的布局和交互功能。 DSL配置

csharp 复制代码

{
	mode: 'dashboar', // 模板类型,不同模板类型对应不一样的模版数据结构
	name: '', // 名称
	desc: '', // 描述
	icon: '', // icon
	homePage: '', // 首页（项目配置）
	// 头部菜单
	menu: [
		{
			key: '', //菜单唯一描述
			name: '', // 菜单唯一名称
			menuType: '', //枚举值 goup/module
			// 当menuType == group 时可填
			subMenu: [
				{
					// 可递归 menuItem
				},
				...
			],

			// 当menuType == module 时，可填
			moduleType: '', // 枚举值  sider/iframe/custom/schema

			// 当mouduleType === sider 时
			siderConfig: {
				menu:[
					{
						// 可递归 menuItem(除 moduleType === sider)
					}
				]
			},

			// 当mouduleType === iframe时
			iframeConfig: {
				path: '', //iframe 路径
			},

			// 当mouduleType === custom时
			customConfig: {
				path: '', // 自定义路由路劲 
			},
			
			// 当mouduleType === schema时
			schemaConfig: {

			}
		},
		...
	],

}

页面UI的解析

通过模版中不同的moduleType 来实现页面样式的展示

css 复制代码

sider  侧边栏布局
iframe 嵌套iframe页面
custom 自定义路由
schema  通过schema解析页面

功能交互的解析

schema配置

go 复制代码

schemaConfig: {
				api: '/api/user', //数据源API（遵循RESTFUL 规范）
				schema: { // 板块数据结构
					type: 'object',
					properties: {
						key: {
							...schema,// 标准 schema 配置
							type: '',// 字段类型
							label: ''// 字段的中文名
							// 字段在table中的相关配置
							tableOption: {
								...elTableColumnConfig, // 标准el-table-column配置
								toFixed: 0, //保留小数点后几位
								visiable: true, // 默认为true（false 表示 不在表单中显示）
							},
							// 字段在seachbar中的相关配置
							searchOption: {
								...elTableColumnConfig, // 标准el-table-column配置
								comType: '',// 配置组件类型 input/select/...
								default: '',// 默认值

								// 当comType = select
								enumList:[],

								// 当comType = dynamic-select
								api: ''

							}
						},
						...
					}
				},
				//table 相关配置
				tableConfig: {
					haderButtons:[{
						label: '', // 按钮中文名
						eventKey: '', // 按钮事件名
						eventOption: {},// 按钮具体配置
						...elButtonConfig, // 标准的el-button 配置
					},...],
					rowButtons: [{
						label: '',// 按钮中文名
						eventKey: '', // 按钮事件名
						eventOption: {
							//当eventKey === 'remove'
							params:{
								// paramKey = 参数键值
								// rowValueKey = 参数值（格式为 schema:xx 的时候，到table中找相应的字段）
								paramKey: 'rowValueKey'
							}
						}, //按钮事件具体配置
						...elButtonConfig, // 标准的el-button 配置
					},...]
				}, 
				searchConfig: {}, // search-bar相关配置
				components: {} // 模块组件
			}

通过对schemaConfig 的解析来实现页面不同的功能

api：在Resuful规范下，增删改查都可以通过这个配置生成

schema 字段是这个配置的核心，用于页面显示的数据和各种功能的配置和实现。

tableOption 用于现实页面表结构的数据，
tableConfig 用于表中不同行的配置和交互设置
searchOption 用于设置搜索栏设置是否显示
searchConfig 用于搜索设置中的不同交互

至此，我们主要工作从业务代码的增删改查，变成了DSL架构和解析器的开发。让我们从业务型程序员转换成了架构师的工作。