Elpis-DSL设计与实现（2）— 动态组件

Elpis-DSL设计与实现（2）— 动态组件

回顾

Elpis -- DSL设计与实现（1）Elpis -- DSL设计与实现（1） 一、DSL简介 DSL（Domain - 掘金

动态组件设计

首先我们先回顾一下 SchemaView 的设计

在 SchemaView 中，会有一份 JSONSchema 的配置，用于存放字段在不同组件中的配置信息，同时在 schemaConfig 中存放相对应的组件配置。上一期中介绍了 Search 和 table ，但实际上应用中，我们还需要提供更多的组件来实现对应的需求。

组件解析器

在SchemaView中，通过读取 componentsConfig的组件列表，动态加载所有的组件。再通过showComponent()方法，将对应的组件渲染出来。配置示例：

tableConfig: {
  headerButtons: [
    {
      label: "新增商品",
      eventKey: "showComponent",
      eventOption: {
        comName: "createForm",
      },
      type: "primary",
      plain: true,
    },
  ],
  rowButtons: [
    {
      label: "查看详情",
      eventKey: "showComponent",
      eventOption: {
        comName: "detailPanel",
      },
      type: "primary",
    },
  ]
}

在每一个动态组件中，又可以使用我们提供的 schema 组件，例如 SchmeaForm ，也可以使用其他自定义的内容。示例：

schema: {
  type: "object",
  properties: {
    product_id: {
      type: "string",
      label: "商品ID",
      // ...
      editFormOption: {
        comType: "input",
        disabled: true,
      },
      detailPanelOption: {},
    },
    product_name: {
      type: "string",
      label: "商品名称",
      maxLength: 15,
      minLength: 3,
      // ...
      createFormOption: {
        comType: "input",
        default: "哲玄新课程",
      },
      editFormOption: {
        comType: "input",
      },
      detailPanelOption: {},
    },
    price: {
      type: "number",
      label: "价格",
      minimum: 1,
      maximum: 10000,
      // ...
      createFormOption: {
        comType: "input-number",
      },
      detailPanelOption: {},
    },
    inventory: {
      type: "number",
      label: "库存",
      // ...
      editFormOption: {
        comType: "input-number",
      },
      detailPanelOption: {},
    },
    create_time: {
      type: "string",
      label: "创建时间",
      // ...
      detailPanelOption: {},
    },
  },
  required: ["product_name", "price"],
 }

总结

动态组件可以根据需求设计不同的组件，增加 dsl 规则，编写新的 dsl 配置 和 组件编译器，增加可扩展性。

出处：《哲玄课堂-大前端全栈实践》