缘由
一般意义上前端的组件具体内容(如输入框、纯文本、复选框、下拉框等)均由前端自行定义渲染,但在某些时候,为了日后或当前已有的过多类型的通用性,我们也可以将某一部分的可配置组件交由后端定义,如此各类型下的可配置属性仅需后端一方维护;前端则可以直接获取到该类型下的一系列组件定义后直接渲染即可
实现思路
例如,某项目下有多种不同类型的 ”people“ 需要进行基本信息及可配置的信息展示,不同类型 people 的基本信息相同,均包括姓名、性别、年龄等;同时,根据身份的不同,需要对各个类型配置一些不同的其他信息。例如对学生需要配置下拉框单选学习级别、下拉复选框配置已选课程、checkbox配置是否已毕业等;而对老师需要输入框配置工作签名、下拉框配置教授课程、下拉框配置职称等
此时,不同于传统的创建父类 people ,子类 student、teacher,再根据各自属性设定相应的特征字段,同时前端根据获取到的数据类型,做出不同的组件渲染,我们可以采用由后端定义组件的方式,将所有类型的 people 抽象成单一的具备一个称作 setting 字段的 people 类
举个栗子
{
"nodeType": "学生",
"iconName": "图标名称",
"name": "这是学生的名字",
"info": "学生的介绍信息",
"setting":
[{
"defaultValue": "options 中的默认值",