前端通用领域模块的沉淀思路

[Mr-haili]

前端通用领域模块的沉淀思路

这里说的一个领域对应某种特定类型的业务系统或切面，如：列表页，数据字典，流程审批，单点登录等。

领域模块库

组件沉淀的一般性流程

1. 定义我们将要解决的问题
2. 定义出当前领域下的各种标准模型与接口规范
3. 通过编程语言定义领域中需要用到的模型，以文档的形式给出
4. 定义前后端在该领域下的通用 api 规范
5. 基于模型与接口规范，定义前端领域的 BusinessModel
6. 针对特性领域下业务组件开发

列表类系统的应用

业务状态管理 Model 的工厂抽象

针对通用的列表类需求，系统的一般性状态模型抽象
我们可以通过如下公式来描述：

  type F = <TFilters, TEntity>(filters: TFilters): TEntity[];

UI 组件的工厂抽象

type FormFactory<TFilters> = (meta: any) => Form<TFilters>;

type TableFactory<TEntity> = (meta: any) => Table<TEntity>;

然后我们可以通过 FormFactory 与 TableFactory 快速生成对应实体的查询器部分与列表部分。
其实的 meta 应该包含对组件布局信息与字段对应空间的信息的描述。

页面布局的组件抽象

针对通用的列表页面，可以推进设计侧给出通用的页面模板，
可以基于更底层的 Layout 组件去搭建，然后针对与业务相关的通用的布局模式封装在 EntitiesPageLayout 组上