elpis里程碑四：动态组件库建设

1. DSL回顾

在里程碑三接触了DSL设计和领域模型的思想，通过配置DSL和schema即可实现简化重复性工作的开发时间，当时我提出了一个问题：

每个项目或多或少都会在 schema 的基础上有定制化的开发，难道我要为每个定制化的开发都配置一个DSL和 schema-xx组件吗？

答案是否定的。在第四章，通过引入动态组件，即可实现不同项目的定制化开发。本文讲的是动态组件的设计思想和封装理念

2. 动态组件建设

2.1 设计思想

通过schema-view代码结构可以直观地感受到，在schema-view里引入component，来完成动态组件的渲染。我们要做的就是配置动态组件的DSL，创建动态组件，并解析DSL来实现不同的功能。

<template>
    <search-panel>
    <table-panel>
    <component>
</template>

2.2 具体实现

以表单为例，假如项目要定制化一个表单，可以新增，修改表单。那么在elpis的开发流程是这样的：

1. 设计表单DSL
2. composable中的schema.js里实现 component 的 DSL解析
3. 约定在指定目录下创建Form表单，并在通过一个配置引入该组件

在本章中实现了3个动态组件和一个公共组件的建设。

createForm

第一步，要实现一个新增表单，首先得描述DSL结构：

1. createFormConfig。这里配置与表单自身有关的一些内容，如标题，保存按钮
2. createFormOption。这里配置每个字段在表单中的呈现形式，如表单项是下拉框/输入框、默认值等

第二步，去schema.js中检查是否有对应的解析

第三步，实现createForm表单

和 schema-table的实现类似，在 create-form里不直接实现整个 form，而是封装一个 schema-form的公共组件，便于以后复用。在create-form去引入这个schema-form组件即可。

schema-form里面通过props拿到schema对象，这个schema对象就是配置的DSL经过schema过滤后的对象。根据这个对象，来实现不同的表单项的渲染。在这里封装了Input，InputNumber，Select组件，并根据schema来实现不同的组件的加载

Input, InputNumber, Select组件主要封装并暴露了两个方法，getValue和validate，这两个方法是为了schema-form校验和提交表单时用的

在createForm做的事就是初始schema的传递，以及当schema-form里提交表单触发了事件后，发起请求

editForm

区别和createForm差不多，但要获取表单某个字段的id，因此DSL要新增字段id的配置，并在editForm里根据id触发查询请求

detailPanel

这里负责展示表单某一项的具体值

3. 三四章总结

第三章和第四章很好地诠释了领域模型里80%的重复工作通过配置实现，20%的定制化需求通过动态组件实现。让我们回顾一下三、四章，

3.1 三四章主要内容

DSL配置与解析

1. 规定好DSL配置和目录结构，并在Server中通过读取model目录下的model和project配置，通过接口返回给前端
2. 前端在schema.js中解析DSL，得到DSL中只跟具体schema有关的config和option（清除噪音）

project-list, dashboard, iframe-view, custom-view, sider-view 的开发

根据DSL的配置，开发不同的页面，其中：

1. project-list页面主入口，不同model下的不同project都在该页面展示，可以进入不同的project
2. dashboard是一个model对应页面主入口，里面配置了路由，并根据路由来加载不同页面
3. iframe-view是个iframe，里面根据DSL配置的path来渲染
4. sider-view是个侧边菜单模板页，在里面可以配置侧边栏菜单
5. custom-view是个定制化的页面，开发完对应组件后，在DSL设置好对应path即可

schema-view 模板页的开发

1. 开发search-panel和table-panel，主要负责发起请求等通用业务的能力
2. 开发公共组件schema-search-bar和schema-table，负责完成table和search-bar的能力，如表单渲染，清空搜索项等

动态组件的开发

1. DSL配置和解析。新增componentConfig，日后即可在这里面进行动态组件的拓展
2. schema-view新增component，并加载动态组件
3. 开发 create-form, edit-form和detail-panel。其中create-form和edit-form会涉及到公共组件schema-form
4. 开发schema-form，配置核心能力：表单校验、获取表单值，并提供给上层调用

4. 思考

把自己想象成一个elpis的用户，我在使用中会遇到什么困难，有什么建议？

1. 不支持ts，DSL配置和schema解析引擎修改很容易出错，后续可以升级ts版本
2. elpis-core可以作为一个npm包隐藏，暴露给用户，会存在不小心改错的风险
3. elpis的核心是一个支持复用的系统，目的是提供给其他用户使用，那我要分别交付拼多多和淘宝系统的时候，肯定要进行项目的分离，但是目前现在好像分离并没有提供一个很好的方式（不管是代码交付还是成品交付）。针对这两点，我给出一些思路：

   • 如果是代码交付，会涉及到以下问题，是否后续还要本人参与？

     • 如果不需要，直接将对应目录的代码抽离出来即可，包括前端和node
     • 如果需要，抽离出来的代码如何复用elpis的其他schema？笨办法是直接将新增的schema文件夹复制到抽离出的项目中，好办法是将schema打包成npm包引入？（怎么避免引入npm包不会和现有代码冲突？想不到了哈哈）

   • 如果是成品交付，我理解跟代码交付一样，得先抽离出来，再进行打包

三四章的收获还是挺大的，十分感谢抖音哲玄的课程