关于Elpis全栈框架,DSL模版引擎的一些个人思考

关于Elpis全栈框架,DSL模版引擎的一些个人思考

现阶段,大部分前端程序员的工作内容都比较枯燥,且进行一些无意义的苦力劳动,如下:

1.工作中大部分工作是重复性的CRUD 2.项目中存在大量的屎山代码,代码维护性差 3.代码程序逻辑性差,看起来很难理解

在Elpis中,将咱们程序员现阶段存在的一些痛点,进行的了整合,利用DSL领域模型,将沉淀当下程序员80%的重复性工作,将开发的精力放在20%的可扩展性的开发工作中。

关于DSL的设计

1.在elpis项目中,DSL模版引擎的一些基础配置,配置如图:

module.exports 复制代码
      model: '', //模版类型,不同模版类型对应不一样的模版数据结构
      name: '',//模版名称
      desc:'',//模版描述
      icon:'',//模版图标
      menu: [
         {
          key: '', //菜单唯一标识
          name: '',//菜单名称
          menuType: '',//菜单类型,枚举值:group / module
          moduleType: '',// 枚举值:sider/iframe/custom/schema
          },...]
       }

通过图中的模版配置,完成对页面的基础配置。 2.在完成对项目的基础配置之后,需要大模块下的小模块进行更细致的配置操作: (1)当menuType为group的时候,会在当前菜单下产生子菜单,这里就需要递归去获取当前菜 单下的所有的子菜单进行展示

ini 复制代码
//当 menuType === group 时,可填
subMenu: [{
// 可递归 menuItem
          }],

(2)当moduleType为schema时,说明这部分为咱们需要沉淀的80%的功能,在elpis项目中通过利用《JSON-SCHEMA》工具完成相对应的配置:

go 复制代码
//当 moduleType === schema 时

schemaConfig: {

api:'',//数据源API(遵循 RESTFUL 规范)

schema:{//板块数据结构

type:'object',

properties:{

key:{

...schema,//标准 scheam 配置

type:'',//字段类型

label:'',//字段中文名

//字段在 table-bar 中的配置

tableOption:{

...elTableColumnConfig,//标准 el-table-column 配置

toFixed:0,//保留几位小数

visiable:true,//默认为true(false时,表示不再表单中显示)

},//字段在 table中的相关配置

//字段在 search-bar 中的配置

searchOption:{

...elComponentConfig,//标准 el-form 配置

comType:'',//配置组件类型

default:'',//默认值
//comType === 'select'

enumList:[],

//comType === 'dynamicSelect'

api:''

}

}

}

},

tableConfig: {

headerButtons:[{

label:'',//按钮中文名

eventKey:'',//按钮事件名

eventOption:{},//按钮事件具体配置

...elButtonConfig //标准 el-button配置

},{}],//可以多个配置

rowButtons:[{

label:'',//按钮中文名

eventKey:'',//按钮事件名

eventOption:{

//当 eventKey === 'remove'

params:{

//paramKey = 参数的键值

//rowValueKey = 参数值,格式为schema::tableKey ,到table 中找相应的字段

paramKey:rowValueKey

}

},//按钮事件具体配置

...elButtonConfig //标准 el-button配置

},{}],//可以多个配置

},//table 相关配置
searchConfig:{},//search-bar相关配置

在这里可以看到,在elpis项目中,我们并不是去对每一个页面的各种组件,例如:table,searchBar组件等在每个页面进行重复性的开发,而是将各种组件进行了一个抽象的模版定义,这样我们可以通过对DSL模版引擎的配置,就可以完成对不同菜单下一些重复性的CURD工作就行耦合和沉淀,这样也让代码的可维护性提高。

总结

在elpis项目中,通过DSL领域模型的概念,将前端程序员日常工作80%的工作进行了整合,而通过DSl将这80%的工作进行沉淀,只需要用户通过文档进行对应的配置即可展示想要的页面。在组件方面,并不是像前端程序员日常工作一样,将一些重复性的东西抽离出来变成一个组件进行调用,在elpis中我们通过DSL模版引擎,以及各类组件的解析器进行动态的渲染,而不是写死在页面上。

所以我觉得在elpis项目中DSL模版引擎的真正目的是为了培养程序员的框架思维,以及思考问题和不断学习的能力,这样才能让前端程序员在日常的工作中保持更高的竞争力。

相关推荐
时间的情敌8 分钟前
Cesium 流动管线、管道动画、管线流向仿真,管网、油气、水利孪生高频需求
前端·交互·cesium
wangxiaoxuan2172 小时前
SLAM 的基本结构:前端、后端、回环与地图优化
前端·机器人·科沃斯八界
Agent世界5 小时前
用 CDP 做发布自动化:四道机器闸门与产物验收
前端·javascript
FungLeo5 小时前
成为全栈·Vue 管理后台篇·编辑器图片上传:从文件选择到文章附件关联
前端·vue.js·编辑器·markdown·文件上传·formdata·附件管理
某哈压力大5 小时前
SSH 突然 Connection reset?不是密钥坏了,是 OpenSSL 把 sshd 干趴了
前端·node.js·命令行
程序员大阳5 小时前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构
神膘护体小月半5 小时前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css
程序员大阳6 小时前
副队长ES6+教程(2)--let 与 const
前端·javascript·es6·const·let·var
deli0076 小时前
写满 200GB 后 SSD 为什么掉到 95MB/s?SLC 缓存模型实测
前端
曦樂~7 小时前
【Web Development】03JavaScript 基础和事件
开发语言·前端·javascript