[学习笔记] Elpis 领域模型架构搭建

本文基于抖音“哲玄前端”， 《全栈实践课》，引擎内核实现章节所写。

前言

  在现今的前端工作中很多对数据进行增删改查的 ctrl+c / ctrl+v 不断的重复，工作的经验不断累加却感觉自身在前端领域的深度发展越来越不自信，也因此发展前端市场也越来越卷，如背八股文，扒线上项目等等来修饰自身。在此焦虑下，我选择了跟随哲玄的步伐进一步的加深自身的技术，扩充自我技术。

dashboard

  dashboard是整个课程的核心模型，项目的搭建以及实现都是根据其数据源为依据一步一步的实现，其目的就是为了将原本可以重复的代码沉淀成一个个可以反复使用的解析器(如封装组件等)。而开发者也可以根据该数据源形成一份规范的行为准则，也一定程度上避免了代码不断累积导致项目日渐拉跨，或者当功能废弃后代码的沉积等。如下为我的大致配置

{
  mode: 'dashboard', // 模板类型，不同模板类型对应不一样的模板数据结构
  name: '', // 名称
  // 头部菜单
  menu: [{
    key: '', // 菜单唯一描述
    name: '', // 菜单名称
    menuType: '', // 枚举值，group / module
    // 当 menuType == group 时，可填
    subMenu: [{
    }, ...],
    // 当 menuType == module 时，可填
    moduleType: '', // 枚举值： sider/iframe/custom/schema
    // 当 moduleType == sider 时
    siderConfig: {
      menu: [{
        // 可递归 menuItem(除 moduleType === sider)
      }, ...]
    },
    // 当 moduleType == iframe 时
    iframeConfig: {
      path: '', // iframe 路径
    },
    // 当 moduleType == custom 时
    customConfig: {
      path: '', // 自定义路由路径
    },
    // 当 moduleType == schema 时
    schemaConfig: {
      api: '', // 数据源API（遵循 RESTFUL 规范）
      schema: { // 板块数据结构
        type: 'object',
        properties: {
          key: {
            ...schema, // 标准 schema 配置
            type: '', // 字段类型
            label: '', // 字段的中文名
            // 字段在 table 中的相关配置
            tableOption: {}
            // 字段在 search-bar 中的相关配置
            searchOption: {}
          },  ...
        }
      },
      // table 相关配置
      tableConfig: {},
      // search-bar 相关配置
      searchConfig: {},
      // 模块组件
      components: {},
    },
  }, ...]
}

moduleType

• sider 满足侧菜单的扩充
• iframe 满足对外页面
• custom 定制化页面
• schema 已经实现的沉淀功能(如数据查询，数据展示等)

总结

  基于DSL的全栈框架，通过搭建领域模型，帮助开发者从重复劳动中解放，专注于业务创新，性能优化。经过声明式配置、动态渲染等技术，显著提高开发速度，降低维护成本，统一开发规范，使得项目可以更加高效的交付。