Taer

前端元数据开发工具，用于管理元数据，然后在组件中使用。

背景说明 此工具不局限于前端框架、UI库等，因为这只是一种研发实现方式，更像是一种设计模式。

Taer和基于组件开发有什么区别

传统：

第一步：产品提出业务需求；

第二步：研发分析需求，并给出需求可行性和研发周期、人员；UED给出效果图；

第二步：进行研发，基于对应的 前端框架（vue\react等） + ui框架（antd\element等）实现页面 布局 和 交互；

Taer：

第一步：产品和UED给出交互标准，将交互和展示转换为数据描述语言；

第二步：前端基于UI和交互的一套标准规则，开发出对应的解析规则和组件交互。确保每一个规则都可以通过枚举值对应上，至于规则需要复杂还是粗略，可以根据业务场景的复杂度而定。例如：输入方式有输入框、下拉框、多选框，每种交互都对应一个名称。也可以根据业务的复杂度渐进式的扩展规则，满足更多的业务场景。（和GQL中的schema是一个概念）

第三步：产品基于标准，提出业务需求的描述规则，这些规则可以立即转换成数据。当得到数据的一刻，需求就已经完成了。

它是一个完全基于 数据驱动 的解决方案，根据灵活、复用的特性。如果项目的定制化非常强，没有规则可寻，就不建议使用此方案。

（稍后会发布一套Taer结合react+antd、vue+element 的现成的解决方案，基于此标准可以直接进入第三步。会先提供需要开发预置数据的方式，然后提供纯表单可配置的方式转换为规则数据）

Taer和框架里面的 store 有什么区别

传统： 例如我们使用 vuex 时，会将一个模块，或者用户数据存在在 store 中，然后在使用的场景调用即可。

Taer： 将数据状态颗粒化到 每个字段中、每个按钮 中，彼此间提供通讯能力，但都是独立存在的。所以提供 TaerFields 用来扩展一个字段的数据状态。

代码演示

元数据用于描述任意一个实体数据（entity），例如一个最简单的 表单 实体数据：

const entity = {
    name: "user",
    get: "/user/create",
    fields: [
        { name: "name", label: "姓名" },
        { name: "age", label: "年龄" },
        { name: "sex", label: "性别" },
    ]
}

字段中需要定义哪些属性，完全取决于业务需求，只要确保有字段这样一个对象数据便可。

能力

• TaerField 字段操作

• TaerServer 异步操作

实体

元数据的单元为实体，一个实体数据的结构：

• 实体描述

• 异步操作定义

• 字段描述定义

TaerField

将 entity.fields 转换为对象管理，以满足开发中的需求。例如：

• 字段的值管理；
• 字段的验证规则；
• 字段之间的依赖关系；
• ...

在组件直接引入和实例：

const filedController = new TaerFields(entity.fields); 

在DOM中遍历（以react为例）

<div>
    { 
        filedController.fields.map(field => (
            <label>
                <span>{ field.label }</span>
                <input value={ field.value } onclick={e => field.value = e.target.value } />
            </label>
        ))
    }
</div>

上面的使用中，就是一个简单的基于数组遍历出DOM，没有使用 TaerField 的任何能力。

分别提供了 .use() 和 .on() 两个方法，定义字段的扩展功能。 use是基于责任链模式的一种类似中间件的功能，on是基于观察者模式的一种消息订阅的功能。

useChange(option: IFieldMiddlewareOption): any

在字段的值发生修改时，立即触发的钩子，且可以对值进行处理。它是在 field.value = "xxx" 的赋值操作时被触发，对这个 "xxx" 进行格式的一个操作。

例如我们需要 age 字段为 Number 数值，则需要对其值进行格式化：

filedController.use({
    useChange: ({ value, field }) => {
        return field.key === 'age' ? Number(value) : value;
    }
})

这样此字段数据始终是 Number 类型。

useDisabled(option: IFieldMiddlewareOption): boolean

解析字段的禁用规则，以下情况下触发：

• 此字段的 值 触发后；
• 依赖字段的 值 修改时，使用 setDepends() 设置依赖字段；

useShow(option: IFieldMiddlewareOption): boolean

解析字段的展示规则，以下情况下触发：

• 此字段的 值 触发后；

• 依赖字段的 值 修改时，使用 setDepends() 设置依赖字段；

useParam(option: IFieldMiddlewareOption): IAnyObject

获取字段的参数化，例如前端数据格式和后端不同时，调用 fieldControler.toParam() 方法时执行。

例如日期参数，前端是 [Date, Date] 格式，后端期望是 "xxxxxxxxx,xxxxxxxxx" 格式：

filedController.use({
    useParam: ({ field }) => {
        if (field.type === 'date') {
			return { [field.key]: field.value.map(d.getTime()).join(',') };
        }
    }
})

setKeyName(key: string)

设置字段的主键，默认为字段中的 “key” 属性。

setType(type: FieldType)

设置字段的类型，字段默认 类型 为 FieldType.String。

setDepends(fields: TaerField[])

设置字段的依赖字段，当 fields 中的字段 值 发生变化时，会触发 onDepends 观察。

onInited(option: IFieldEOption)

当字段对象化后，可以在此钩子使用上面的 set 方法，进行需求定义。

onChange(option: IFieldEOption)

当字段值修改时触发。

onDisabled(option: IFieldEOption)

当字段的 disabled 属性变更时触发，只有当定义过字段的 useDisabled 后才会发生变化。

onShow(option: IFieldEOption)

当字段 “展示状态” 变更时，只有当字段定义过 useShow 后才会发生变化。

onDepends(option: IDependFieldEOption)

当依赖字段的 值 发生修改时，使用 field.setDepends() 设置依赖字段。

TaerServer

数据服务操作功能，初始化时传入 url 参数，默认请求方式为 get。

const serverController = new TaerServer(entity.url)

属性：

• data 响应的数据
• msg 响应的提示文本
• state 响应状态
• res 响应对象
• load 请求状态

send()

发起请求。

prevent()

执行 send() 方法后，可以在 onRequestBefore 钩子中，进行阻止请求操作。

useParams(option: IServerParamMiddlewareOption): IAnyObject

在请求发起先触发，默认会返回请求基本信息 url、method 的对象。可以结合 fieldController.toParam() 方法，得到字段参数化对象，整合到请求数据中。

useRequest(option: IServerRequestMiddlewareOption): Promise

定义请求方式，不设置的话则不会进行网络请求。

useResStatus(option: IServerResMiddlewareOption): boolean | string

定义解析数据响应后的状态，定义后使用 serverController.state 才有值。

useResMessage(option: IServerResMiddlewareOption): string

定义响应后的描述文本，定义后使用 serverController.msg 才有值。

useResData(option: IServerResMiddlewareOption): any

定义响应后的存储数据，定义后使用 serverController.data 才有值。

useResErrMessage(option: IServerResMiddlewareOption): string

定义请求报错时的反馈文本，定义后使用 serverController.msg 才有值。