【中后台应用】从表单抽象到表单中台

[jincdream]

从表单抽象到表单中台

相信前端开发的同学，对表单其实并不陌生，而且时至今日，表单应用的编写因为React、Vue等框架的出现，也变得更加地便捷了。在前端工作中，有着很多中后台应用-表单的开发工作量，笔者自己深陷其中，所以为了让头发别掉得太快，重新去理解了表单这个东西，从而重新去思考和设计表单的开发模式，提升效率。

理解表单

其实大家都知道表单是什么，但大多数人对它应该没有一个明确地认识，至少我之前是没有的。

基础表单

<!-- https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Your_first_HTML_form -->
<form action="/my-handling-form-page" method="post">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" />
    </div>
    <div>
        <label for="mail">E-mail:</label>
        <input type="email" id="mail" />
    </div>
    <div>
        <label for="msg">Message:</label>
        <textarea id="msg"></textarea>
    </div>
    <div class="button">
        <button type="submit">Send your message</button>
    </div>
</form>

这段代码完成了一个最为基础的表单，我们来分析下，它都有什么？

• 提交地址、提交方法
• 提示信息
• 输入框
• 提交按钮 然后今时今日，这样简单的表单其实并不再能满足越发复杂的应用需求了。

更丰富的表单

在有了JQ、React、Vue等等之后，网络和社区上有了更为丰富的表单组件，比如日期选择、时间选择器、图片裁剪上传等等。

//https://codepen.io/pen/?&editable=true&editors=001
const { TimePicker } = antd;

function onChange(time, timeString) {
  console.log(time, timeString);
}

ReactDOM.render(
  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
  mountNode
);

定义表单

可不管怎么变化，提交地址和提交方法、提示信息、用户输入、提交按钮，这些都是不可或缺的，于是我尝试用简练的语言来抽象一下表单是个什么东西：

表单是一个将人机交互行为转换为数据后提交给服务器的可视化前端应用。

想要理解表单，这两个词就尤为关键：

• 人机交互行为
• 转换为数据

人机交互行为

为什么不是表单组件（输入框、上传文件、选择框等等），而是人机交互行为？因为在表单应用的开发中，会有更多地用户对数据进行输入场景，而基本的表单组件只是其中的一类行为而已，如果哪天我们的表单里面，需要用户在一个画板上画圈圈呢？

转换为数据

我们最终与服务器进行传递的东西，不过是一份数据而已，而表单很重要的一个作用，就是将人机交互的行为转换为计算机能够存储的数据，然后与接收方进行通信。

所以，表单是这样的：

高级模式-动态表单

聪明的开发者当然不想每天都重复地写着类似的代码，动态表单也是因此而生的吧。

动态表单，说白了就是只需要通过一份配置，就能生产一个表单应用。它能够极大地提升我们的效率，组件的复用率等等。开发者从写代码到了写配置。

就算没有对表单进行明确的理解，动态表单的组件、框架或者库类，其实都已经存在着很长的一段时间了。但它却还是存在着一些问题：

• 有学习配置的成本
• 有开发和维护配置的成本

为了解决它的问题，于是笔者基于动态表单，设计了一个表单中台。