有赞云可配置表单的实践

见贤思齐

、、点击关注“有赞coder”获取更多技术干货哦～作者：竹致远团队：有赞云一、背景前端开发过程中，往往会遇到很多的表单。简单表单尚可，但复杂表单让人尤为头疼。比如有一个用来提交 请假单申请 的表单。第一个表单项是 Radio，为性别：分别是 男 和 女 两种选项。第二个表单项是个 Select，为请假原因：分别为 事假、 年假、 调休、 病假 这四种选项。另外，当上一个性别选项，选择为 女 后，则额外增加一个 产假 的选项。第三个表单项是个 Uploader，为图片上传组件，用于上传医院证明：该项仅在请假原因选择为 病假 或 产假 后显示，其余情况不显示。这个场景已经略微有点复杂度了。很多时候如果不好好设计，将写出不好维护的代码。那如果更加复杂的场景呢？有赞云业务中，这种场景非常常见，于是推出了 zan-form 来解决这个问题。zan-form 是一个基于 zent 的组件配置化插件。下面所提到的场景和代码都是针对 zent 的，当然对于其他知名UI库，本质上也类似，虽然不能全部套用，但是希望能给大家带来思考与借鉴。二、配置式对于上面提到的场景，先思考下，用普通方式怎么写。用普通的方式写一遍后，会发现有点难受。为什么呢？因为 jsx ，本质上是现实中的物理模型，适合像积木一样，去拼凑出各种各样的 UI。它一旦加上复杂的判断逻辑后，就会很杂乱，需要花大量精力去整理和修饰。再想一下 配置式，第一直觉是什么？是逻辑和规则。表单跟一般的 UI 不一样，尤其复杂的表单，它特别重逻辑，但是视觉复杂度上并不高，不会存在特别多层级的嵌套。所以用配置式来写复杂表单，也许是一个更好的方案。下面是用配置式表单解决上面提到的场景：[ { _component: "FormRadioGroupField", _name: "sex", data: [ { text: "男", value: "male" }, { text: "女", value: "female" } ] }, { _component: "FormSelectField", _name: "qingjiaType", data: [ { text: "事假", value: "shijia" }, { text: "年假", value: "nianjia" }, { text: "调休", value: "tiaoxiu" }, { text: "病假", value: "bingjia" }, { text: "产假", value: "chanjia" } ] }, { _component: "ImageUploader", _name: "hospitalMaterial", _show: values => ["bingjia", "chanjia"].includes(values.qingjiaType), tokenUrl: "http://somecdn.youzan.com" }];在上面的配置代码中， _component 和 _name 就不多说了，解释下 _show 方法。_show 目前仅支持传入一个同步函数，其中入参为 values。vlaues 等于 zentForm.getFormValues() 所取得的值。_show 的出参为一个布尔值，当 true 时，表示该组件显示；当为 false 时，表示该组件不显示。总体来说，就是把一份配置文件，做为一个数组进行遍历。当遇到 _show 方法时，执行之，并根据其 返回值，决定是实例化的这个组件，还是直接返回 null。三、禁用 children配置式组件，是否应该支持 children，这是一个有争议性的问题。支持后有利有弊，但最终还是决定禁止 children 的使用。原因是，一旦支持实现 children 后，整个配置就偏视觉，而非偏逻辑了。所以，以下方式是不被允许的：// 下面的写法，会报错。因为不被允许使用 children{ _component: 'FormRadioGroupField', _name: 'sex', children: [ { _component: 'Radio', value: 'male', text: '男' }, { _component: 'Radio', value: 'female', text: '女' } ]},当然，为了方便使用，已经对 zent 自带的 FormCheckboxGroupField 和 FormRadioGroupField 这两个组件进行了封装。封装后用法跟 FormSelectField 类似，仅需要传入 [{text:'text',value:'value'}] 即可。如下所示：// 封装后的 FormRadioGroupField 用法{ _component: "FormRadioGroupField", _name: "sex", data: [ { text: "男", value: "male" }, { text: "女", value: "female" } ]},所以对自己写的表单组件，如果需要用到 children 属性，会遇到一些问题，需要做一些改造。当然，也有其他方式可以绕过，就是后面小节会提到的 _slot。四、注册自定义表单组件到目前为止，能够直接在配置文件中使用的组件，都是 zent.Form 下的组件。那么对于自定义组件怎么处理呢？当前在 zan-form 内部维护了一个 componentLib 对象。在该对象中， key 是组件名， value 是 Component。当解析配置文件的时候，会根据 _component 字段，去找到对应的组件，并实例化它。所以我们只需要想办法，在 componentLib 中放入我们自定义的组件就可以了。zan-form 提供了 zanForm.register('ComponentName',MyComponent) 方法，可以在 componentLib 中注册我们自己的组件。注意，第三节也提到过，如果自定义组件需要用到 children属性，需要对该组件进行改造，因为当前的配置式是不支持 children 的。为了能在 zentForm 中更好地使用，自定义组件需要暴露 value 属性，以及支持 onChange 方法做为回调，并用 zent.Form.Filed 包裹。五、插槽某些场景下，纯粹的配置式无法满足需求，则需要用 插槽 来实现扩展了。插槽 的使用如下：// form.config.js[ { _slot: "ImageUploader" }, { _slot: "MyFooter" }];// Form.jsximport zanForm from "zan-form";import formConfig from "./form.config.js";const Slot = zanForm.Slot;class Form extends Component { render = () => { return zanForm(formConfig, this)( 点击上传图片 我是页脚 ); };}如何使用 插槽，总结起来就是两个步骤：首先，在配置中，选择合适的点，预留一个插槽。然后，在配置外的 zanForm 中，使用 Slot 定义一个 待插入组件，并赋予唯一 id。注意， _slot 可以跟 _show 一起使用，但是其他的，例如 _fetch_data、 _format 等，一律不支持。再说下 _slot 的实现原理，其实也很简单：在 zan-form 内部维护有一个 slotMap 对象，以 Slot.id 做为 key， Slot.children 做为 value。当遍历配置文件时，遇到 _slot，则去 slotMap 里面取对应的 Slot.children ，并填充进插槽即可。六、与服务端的交互在日常开发中，存在着大量与服务端交互的场景。比如 FormSelectField 中的 data，需要从服务端获取。一般的方式是，在 componentDidMount 中获取数据，并且通过 setState 塞入到 FormSelectField 的 data 中去。然而在配置文件中，这似乎很难实现。那么在配置式中，怎么样获取远程数据呢？目前可以通过 _fetch_data 方法来返回一个 Promise 的方式来实现，如下所示：// "店铺类型"的Select{ _component: 'FormSelectField', _name: 'shopType', _fetch_data: () => { return getShopType().then(items => { return items.map(item => { return { text: item.desc, value: item.type, }; }); }); }, data: [],},以下两点值得注意：原组件（如 FormSelectField 组件）必须支持 data 属性。因为获取到的数据，会默认塞入到 data 中去。_fetch_data 只会触发一次。实现方式：这个特性，目前是通过在【原组件】外面，又另外包裹了一层 DecoratorCoponent 实现的。当 DecoratorComponent 触发 componentDidMount 的时候，就去调用 _fetch_data，并将 data 通过 props 传给【原组件】。也就解释了上面提到的，为什么 _fetch_data 只会触发一次。七、重启组件存在一种场景，如下：第一行表单项，是一个 FormSelectField，代表省份。第二行表单项，也是一个 FormSelectField，代表城市。但是该项会根据省份 id，动态从服务端获取城市数据。也就是说，上一项省份改变时，该项城市列表也会改变。根据上述第六节提到的，如果只用 _fetch_data，那么根据省份 id 获取城市列表数据，只会触发一次，不会再触发第二次。所以提出了一个 重启 组件的概念。重启组件的内部实现，实际上分为两个步骤：第一步，在 DecoratorCoponent 中改变【原组件】的 key 来重启原组件。第二步，重新触发自身的 _fetch_data 函数，重新将 data 通过 props 传给【原组件】。如下所示：[ { _component: "FormSelectField", _name: "province", required: "请选择您所在省份", data: [{ text: "浙江省", value: 30 }, { text: "广东省", value: 31 }] }, { _component: "FormSelectField", _name: "city", _fetch_data: values => { if (!values.province) { return Promise.resolve([]); } else { return fetchCityByProvince(values.province); } }, _subscribe: (prevValues, values, restart) => { if (values.province !== prevValues.province) { restart(); } }, required: "请选择您所在城市", data: [] }];欲 重启，需先 订阅。使用 _subscribe 可订阅。_subscribe 方法中接受三个入参，分别是上一个状态的 values，本状态的 values，以及一个用来重启组件的 restart 方法。比较两次状态的 values.province，如果不同，则触发重启。至于 _subscribe，其实是借助 DecoratorCoponent 中的 componentDidUpdate 实现的。八、格式化组件有时候，需要对组件做一些样式上的修改，那么在配置式中，怎么做呢？目前提供了一个 _format 方法来实现这一点。如下所示：[ { _component: "FormInputField", _name: "age", _format: ($component, values) => ( {$component} 岁 ), label: "年龄" }];format 方法中，\$component 是组件实例，values 同 _show 方法的 values。它们做为参数传入，最后返回一个改动后的组件实例。_format 方法的内部实现，跟 _show 类似。九、表单回填一些场景下，比如编辑的时候：需要当从服务端取回数据，并在表单上回显。这种场景该怎么做呢？zan-form 提供了一个 zanForm.setValues(values,this) 方法，即可把数据回填回去。本质上， setValues 方法，是对 zentForm.setFieldsValue() 的一个递归调用，最终使 zentForm.getFormValues() 的值趋向于稳定。有赞云技术团队长期招人，期待你的加入～前端开发工程师Java开发工程师测试开发工程师...点击“阅读原文”获取岗位信息如果你也是聪明、皮实、有要性的小伙伴如果你对电商、SaaS及业务云平台有更多想法欢迎投递简历：zhuzhiyuan@youzan.com加入我们，一起enjoy扩展阅读有赞订单管理的三生三世与十面埋伏有赞订单搜索AKF架构演进之路有赞订单导出的配置化实践有赞亿级订单同步的探索与实践有赞数据中台建设实践有赞零售财务中台架构设计与实践有赞业务对账平台的探索与实践Vol.293