Robust 第 014 期：三角金字塔 web 表单开发新范式-唐霜

【本文受版权保护】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

Web 表单虽然是前端开发中非常常见的开【本文首发于唐霜的博客】【原创内容，转载请注明出处】发项目，但是，在具体到一些业务场景中，表【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】单开发缺是非常复杂的过程。其中设计到的点原创内容，盗版必究。转载请注明出处：www.tangshuang.net，虽然看上去好像都挺容易，能实现，但是，原创内容，盗版必究。【本文受版权保护】要将所有这些点组织在一起管理，确是一个复未经授权，禁止复制转载。【本文受版权保护】杂的事情。本期 robust 主要来聊一【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net聊 web 表单开发的新范式。

【作者：唐霜】转载请注明出处：www.tangshuang.net【本文受版权保护】转载请注明出处：www.tangshuang.net

转载请注明出处：www.tangshuang.net【作者：唐霜】【作者：唐霜】【原创不易，请尊重版权】

网易云音乐：未经授权，禁止复制转载。点击播放【访问 www.tangshuang.net 获取更多精彩内容】

喜马拉雅：【未经授权禁止转载】点击播放本文作者：唐霜，转载请注明出处。

【作者：唐霜】【本文首发于唐霜的博客】【原创内容，转载请注明出处】【访问 www.tangshuang.net 获取更多精彩内容】

求打赏🙇如果你觉得 Ro未经授权，禁止复制转载。未经授权，禁止复制转载。bust 这样一档技术类的谈话节目还不错【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。，希望我继续做下去，不妨打赏支持。你可以著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。扫描本文下方的二维码打赏，也可以加我微信未经授权，禁止复制转载。未经授权，禁止复制转载。后红包打赏。

文字稿：【转载请注明来源】

两个难点：【访问 www.tangshuang.net 获取更多精彩内容】

如何让听众能够体会到，一个 web 表单【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。比看上去的，有多复杂，以至于需要用一个体著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】系去阐述它

【转载请注明来源】

如何让开发者能接受我所提出来的三角金字塔著作权归作者所有，禁止商业用途转载。【转载请注明来源】开发范式，毕竟它的开发方式和传统从 UI【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】出发的方式不同

【本文首发于唐霜的博客】

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

1）为什么在我看来 web 表单是前端开【转载请注明来源】【原创不易，请尊重版权】发最复杂的问题之一

即使最简单的表单开发，也涉及到非常复杂的【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。问题：状态

【原创不易，请尊重版权】

著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】

【原创不易，请尊重版权】

因为，html 原生表单组件也好，我们自本文版权归作者所有，未经授权不得转载。【作者：唐霜】己手写的 react 受控表单组件也好，【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net表单的编辑时数据，和最终提交的数据完全不【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】同

【转载请注明来源】

【原创不易，请尊重版权】

【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

由于这个编辑态的存在，表单无法像普通组件【版权所有，侵权必究】原创内容，盗版必究。一样按照静态逻辑开发

未经授权，禁止复制转载。

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

【作者：唐霜】

几乎所有的表单，都不可能一步开发完，无论【作者：唐霜】【版权所有】唐霜 www.tangshuang.net如何，你都需要至少两步：1. 数据准备阶【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。段；2. 数据提交阶段。

【未经授权禁止转载】

本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】

2）哪些问题会让 web 表单开发很头疼【作者：唐霜】转载请注明出处：www.tangshuang.net？

交互形式：除了普通 UI 框架/库提供的【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。表单组件，还有很多复杂的表单交互，例如，【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。点击某个选项之后，需要进入到一个新的页面【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】，在这个页面进行某些操作后，得到一个结果本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】，然后返回表单界面，把这个结果作为当前编原创内容，盗版必究。【版权所有，侵权必究】辑的选项的结果。也就是说，某些情况下，你本文版权归作者所有，未经授权不得转载。【作者：唐霜】看到的界面，它的形式表现的却不是表单，但著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】它的本质就是表单。可以这么说，但凡需要经【版权所有，侵权必究】转载请注明出处：www.tangshuang.net过 “编辑-提交” 这样的步骤完成的业务【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。逻辑，其本质都是表单。

【作者：唐霜】

【原创内容，转载请注明出处】

【本文受版权保护】

【本文首发于唐霜的博客】

复用麻烦：同样是一个点击弹出新界面，选中【原创不易，请尊重版权】【原创内容，转载请注明出处】某个选项后返回，这样的交互形式，却可能存著作权归作者所有，禁止商业用途转载。【转载请注明来源】在细节上的不同，导致组件复用麻烦。

【作者：唐霜】

本文作者：唐霜，转载请注明出处。

联动：当某个选项值符合某个条件时，另外一【本文受版权保护】【作者：唐霜】些选项才显示出来。这种联动效果，在表单里未经授权，禁止复制转载。未经授权，禁止复制转载。面经常会出现，看上去很简单，实际上真正处【本文受版权保护】著作权归作者所有，禁止商业用途转载。理起来却很复杂，例如，需要处理联动时，动【本文受版权保护】著作权归作者所有，禁止商业用途转载。态加载数据问题，需要解决切换联动开关所带【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。来是否重置数据问题等等。

【关注微信公众号：wwwtangshuangnet】

【作者：唐霜】

本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】

原创内容，盗版必究。

数据根据条件提交：当某个选项的值符合某个【转载请注明来源】本文版权归作者所有，未经授权不得转载。条件时，另外一个选项才把数据提交到后台，【作者：唐霜】未经授权，禁止复制转载。如果不符合条件，即使它是展示的可见的，也本文作者：唐霜，转载请注明出处。原创内容，盗版必究。不提交。

【访问 www.tangshuang.net 获取更多精彩内容】

【未经授权禁止转载】

自动计算：某一个选项是由另外几个选项自动【作者：唐霜】【版权所有】唐霜 www.tangshuang.net计算得到的结果。

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】

自动拉取：进入表单，或者某个选项值发生变原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。化时，符合某种条件下，需要根据条件自动拉转载请注明出处：www.tangshuang.net【转载请注明来源】取数据对其他选项进行填充。

本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

校验：著作权归作者所有，禁止商业用途转载。
1. 何时进行校验？本文版权归作者所有，未经授权不得转载。
2. 校验如果出错，是直接展示在选项输入下面，【作者：唐霜】著作权归作者所有，禁止商业用途转载。还是通过一个提示框进行提示？
3. 是输入的时候立即校验，还是提交表单的时候著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。才校验？
4. 校验是要把所有不符合校验逻辑的错误都抛出【原创内容，转载请注明出处】原创内容，盗版必究。来，还是只抛出第一个不符合的？
5. 是否要校验，需根据一定的条件进行判断，符著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net合条件才进行校验，否则不校验
6. 同一个选项，有多个校验逻辑著作权归作者所有，禁止商业用途转载。

【作者：唐霜】

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

是否显示？著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

是否必填？【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。

转载请注明出处：www.tangshuang.net

【本文首发于唐霜的博客】

是否只读？【作者：唐霜】

著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】

数据提交：【转载请注明来源】
1. 和展示的数据不一样，例如展示的是“yes未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net”提交的是1，展示的是“no”提交的是0
2. 提交时，只提交id，不需要提交文本【版权所有】唐霜 www.tangshuang.net
3. 提交时，先用部分数据提交到接口，看看这份转载请注明出处：www.tangshuang.net原创内容，盗版必究。数据是否符合提交规则，然后才将整个数据提【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】交到另外一个接口
4. 有些字段不需要提交【本文首发于唐霜的博客】
5. 有些值可能并没有展示在界面上，但是需要提转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】交

著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。

【访问 www.tangshuang.net 获取更多精彩内容】

转载请注明出处：www.tangshuang.net

数据恢复：从接口拉取数据，生成一个编辑态本文版权归作者所有，未经授权不得转载。【转载请注明来源】表单，对数据进行编辑后提交
1. 接口数据和表单所需要的数据格式不一致本文版权归作者所有，未经授权不得转载。
2. 数据类型不匹配，例如某个选项需要一个数组【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。，但接口返回了一个字符串，或者需要一个数未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。组，返回null

【原创内容，转载请注明出处】

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

同一个字段选项，在某种情况下不可编辑，在【原创不易，请尊重版权】【版权所有，侵权必究】某种情况下必填，在某种情况下不可见，在某著作权归作者所有，禁止商业用途转载。【作者：唐霜】种情况下可见但不提交

【关注微信公众号：wwwtangshuangnet】

【本文首发于唐霜的博客】

著作权归作者所有，禁止商业用途转载。

表单分步走本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

表单可撤销或可更换整体数据本文版权归作者所有，未经授权不得转载。

【本文首发于唐霜的博客】

本文作者：唐霜，转载请注明出处。

【原创不易，请尊重版权】

3）目前市面上有哪些表单开发解决方案本文作者：唐霜，转载请注明出处。

So-form 【本文首发于唐霜的博客】https://www.npmjs.co原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。m/package/so-form

转载请注明出处：www.tangshuang.net

Uform 【版权所有】唐霜 www.tangshuang.nethttps://uformjs.org/ NoForm->Formily:未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net https://formilyjs.or【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。g/

【访问 www.tangshuang.net 获取更多精彩内容】

【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】

react-hook-form【版权所有】唐霜 www.tangshuang.net

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

【原创不易，请尊重版权】

formik【作者：唐霜】

原创内容，盗版必究。

【本文受版权保护】

【未经授权禁止转载】

react-final-form原创内容，盗版必究。

未经授权，禁止复制转载。

【原创不易，请尊重版权】

著作权归作者所有，禁止商业用途转载。

本文版权归作者所有，未经授权不得转载。

mithril-form->pow【本文受版权保护】本文作者：唐霜，转载请注明出处。erform https://github.com/l【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】udbek/powerform#read【作者：唐霜】【本文受版权保护】me

【未经授权禁止转载】

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

vue-form-maker【版权所有，侵权必究】

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

【关注微信公众号：wwwtangshuangnet】

4）如何去分解表单，才能让表单开发显得杂【转载请注明来源】未经授权，禁止复制转载。乱无章？

表单开发的本质是什么？【版权所有，侵权必究】

【转载请注明来源】

【作者：唐霜】

【本文受版权保护】

界面+数据+业务逻辑【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

【原创内容，转载请注明出处】

界面就是交互效果，只要是世界上见到过的交本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。互效果，我们都可以开发，所以，在不考虑上转载请注明出处：www.tangshuang.net【未经授权禁止转载】述所有情况下，界面上的单个选项的交互效果【未经授权禁止转载】未经授权，禁止复制转载。是很容易开发的。但是，难就难在你需要去适【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。应上面这么多的复杂情况。所以，怎么办？

【未经授权禁止转载】

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

将入口和交互效果分离。所有的交互效果，就转载请注明出处：www.tangshuang.net原创内容，盗版必究。按照我们写交互组件的方式去写。唯独不同的【未经授权禁止转载】【版权所有，侵权必究】地方，在于交互结束之后那一下，要把数据放【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。回到表单数据中，并且把要显示的结果放到表转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。单界面上。

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net

表单数据怎么管理？【关注微信公众号：wwwtangshuangnet】

【本文受版权保护】

本文作者：唐霜，转载请注明出处。

表单数据其实有三个状态：编辑态、准备态、【原创不易，请尊重版权】【原创不易，请尊重版权】提交态。

著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

编辑态包含了编辑时需要的所有信息，无论是【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】界面上展示需要的数据信息、逻辑信息，但编【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net辑态以编辑时需要的数据格式保存数据。例如【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。附件上传。

【原创不易，请尊重版权】

原创内容，盗版必究。

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。

准备态是从接口拉取的数据，以及用于创建编著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】辑态数据所需要的数据。

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

提交态则是从编辑态数据经过提取和整理、转原创内容，盗版必究。【转载请注明来源】化之后得到的数据。

本文版权归作者所有，未经授权不得转载。

我们只要在我们的开发中存在这三种状态，并【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】且分开管理，就能很清晰的管理表单数据了。【原创不易，请尊重版权】【版权所有，侵权必究】至于在三态之间进行转化，其实是非常简单的未经授权，禁止复制转载。【转载请注明来源】数据处理逻辑而已。

【本文受版权保护】

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

著作权归作者所有，禁止商业用途转载。

编辑态数据管理是核心逻辑，编辑态数据不仅著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】有取出后用于界面展示的功能，而且，一定要【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net有响应界面输入的功能，因为只有自动响应界本文版权归作者所有，未经授权不得转载。【转载请注明来源】面输入，才能在这个管理器内部去做一些运算【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。，比如某些字段是基于另外的字段自动计算得【转载请注明来源】转载请注明出处：www.tangshuang.net到结果的。

原创内容，盗版必究。

【本文受版权保护】

【关注微信公众号：wwwtangshuangnet】

未经授权，禁止复制转载。

最后，就是要处理表单的业务逻辑。表单业务【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。逻辑，我个人理解，就是用于在界面和数据之【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。间进行调度，根据业务逻辑进行判断，选择展【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。示哪些字段UI，根据条件处理数据变化。

【访问 www.tangshuang.net 获取更多精彩内容】

【原创内容，转载请注明出处】

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

推荐数据表的逻辑判断方法。【转载请注明来源】

【原创不易，请尊重版权】

著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】

所谓数据表，就是节点值为boolean 【本文受版权保护】【原创不易，请尊重版权】的对象。

【转载请注明来源】

【访问 www.tangshuang.net 获取更多精彩内容】

【关注微信公众号：wwwtangshuangnet】

可包含：阶段表，权限表，必填表。根据因素【本文首发于唐霜的博客】【本文受版权保护】主要是：类型、当前状态。

【作者：唐霜】

转载请注明出处：www.tangshuang.net

5）“三角金字塔”表单开发方法论本文版权归作者所有，未经授权不得转载。

本质是在表单开发中使用 MVC 范式【原创内容，转载请注明出处】

【访问 www.tangshuang.net 获取更多精彩内容】

【转载请注明来源】

转载请注明出处：www.tangshuang.net

界面+数据+业务逻辑=视图+模型+控制器

著作权归作者所有，禁止商业用途转载。

【访问 www.tangshuang.net 获取更多精彩内容】

【本文受版权保护】

1 表单视图开发原创内容，盗版必究。

我们要先构建一套框架组件，用以实现表单的本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。布局、样式。

【原创不易，请尊重版权】

【访问 www.tangshuang.net 获取更多精彩内容】

【原创不易，请尊重版权】

form-group-item 三级结构

著作权归作者所有，禁止商业用途转载。

【转载请注明来源】

组件是布局框架，要实现交互，我推荐一种“【未经授权禁止转载】【作者：唐霜】slot”方案。当一个选项需要使用某个交【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】互的时候，它去调用原有的交互组件，这些交未经授权，禁止复制转载。【未经授权禁止转载】互组件，可以是 web 原生的，也可以是原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.net借助第三方，比如 antd。总之，在已经【原创内容，转载请注明出处】原创内容，盗版必究。布局好的框架中，在每一个需要使用某种交互【本文首发于唐霜的博客】【本文首发于唐霜的博客】的地方，有一种统一的方式调用交互组件。

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

【转载请注明来源】

著作权归作者所有，禁止商业用途转载。

slot 需要：label, value【版权所有】唐霜 www.tangshuang.net【作者：唐霜】, required, disabled【本文受版权保护】未经授权，禁止复制转载。, readonly, hidden, 本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.neterrors

【访问 www.tangshuang.net 获取更多精彩内容】

【未经授权禁止转载】

【本文首发于唐霜的博客】

以 react 为例，创建一个 Form【原创内容，转载请注明出处】【作者：唐霜】Item 框架组件，这个组件需要接收一个【作者：唐霜】【关注微信公众号：wwwtangshuangnet】 render 属性，是一个函数，这个函【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】数的参数就是 slot 的信息，而函数的本文作者：唐霜，转载请注明出处。原创内容，盗版必究。返回值，就是交互组件根据接收的参数返回的【原创内容，转载请注明出处】【作者：唐霜】 jsx。这种操作逻辑应该在其他很多地方本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net都见过。

【作者：唐霜】

转载请注明出处：www.tangshuang.net

通过 slot 来渲染，则可以将多个字段本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】选项合并到一个组件中，实现块级复用

未经授权，禁止复制转载。

原创内容，盗版必究。

【本文受版权保护】

未经授权，禁止复制转载。

基于这种模式的表单视图开发，有三种实现：【转载请注明来源】本文作者：唐霜，转载请注明出处。标签式（angularjs、vue）、j本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.netsx式（react）、配置式（jquer【本文受版权保护】本文版权归作者所有，未经授权不得转载。y）。虽然要使用的开发方式不同，但是在思本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】想上得到统一。

【原创不易，请尊重版权】

著作权归作者所有，禁止商业用途转载。

本文作者：唐霜，转载请注明出处。

在任何表单开发情景下，按照上述思路进行开未经授权，禁止复制转载。【原创内容，转载请注明出处】发，会让表单视图开发变得更统一化，有规律【原创内容，转载请注明出处】【作者：唐霜】可循。

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

【原创不易，请尊重版权】

2 表单模型开发【作者：唐霜】

不卖关子，你需要用到我写的 tyshem原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.neto 这个库，它提供了一个 Model 类【转载请注明来源】【转载请注明来源】，这个类是一个表单数据模型的基类，你需要【本文受版权保护】【作者：唐霜】使用 extends 关键字对它进行扩展转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】，扩展出来的，就是一个表单模型。

【关注微信公众号：wwwtangshuangnet】

【作者：唐霜】

未经授权，禁止复制转载。

【原创不易，请尊重版权】

在表单模型上，你需要声明，这个表单需要用本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net到哪些字段。

【转载请注明来源】

【作者：唐霜】

本文版权归作者所有，未经授权不得转载。

【作者：唐霜】

【关注微信公众号：wwwtangshuangnet】

在声明每一个字段时，你需要声明：本文版权归作者所有，未经授权不得转载。
- 默认值/计算属性函数著作权归作者所有，禁止商业用途转载。
- 字段类型+类型错误提示语本文作者：唐霜，转载请注明出处。
- 校验器数组：determine 是否要执【原创不易，请尊重版权】【未经授权禁止转载】行该校验器，validate 校验器函数【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】，返回 true|false|Error转载请注明出处：www.tangshuang.net原创内容，盗版必究。|[]，message 校验失败时的文本
- 从接口拉取数据后从准备态数据转化到编辑态【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】数据的函数
- 从编辑态转化到提交态时的转化函数【转载请注明来源】
- 从模型读取数据用于展示时的格式化函数，以【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。及从用户输入保存到模型的格式化函数
- required, readonly, 【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。disabeld, hidden 函数
- 错误抓取函数【本文受版权保护】
- 扩展字段【版权所有，侵权必究】

未经授权，禁止复制转载。

【作者：唐霜】

【本文首发于唐霜的博客】

【未经授权禁止转载】

转载请注明出处：www.tangshuang.net

【关注微信公众号：wwwtangshuangnet】

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

模型实例具有响应式能力，能够在状态数据发【作者：唐霜】【原创内容，转载请注明出处】生变化时通知外部，从而可以让 UI 框架未经授权，禁止复制转载。【转载请注明来源】可以刷新界面

本文版权归作者所有，未经授权不得转载。

【访问 www.tangshuang.net 获取更多精彩内容】

【未经授权禁止转载】

未经授权，禁止复制转载。

另外，模型开发还可以自己加入其他方法，这著作权归作者所有，禁止商业用途转载。【作者：唐霜】样可以把有关数据的操作，全部收拢到模型中【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net，这样方便数据代码管理，在将来某些地方出【原创不易，请尊重版权】原创内容，盗版必究。现问题时，都可以直接通过模型的对应方法来【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】进行调试和修复。

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。

著作权归作者所有，禁止商业用途转载。

【原创内容，转载请注明出处】

本文版权归作者所有，未经授权不得转载。

【原创内容，转载请注明出处】

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

3 表单控制器开发著作权归作者所有，禁止商业用途转载。

表单控制器主要是结合业务逻辑，也就是前面【作者：唐霜】【本文受版权保护】提到的业务数据关系表，对模型进行初始化、【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。方法调用、UI 支配

本文作者：唐霜，转载请注明出处。

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

【转载请注明来源】

【本文首发于唐霜的博客】

转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

所以，我们的表单控制器开发，不可避免，实转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】际上，就是要连接表单数据模型、表单视图、【本文首发于唐霜的博客】【未经授权禁止转载】表单业务，通过模型数据变化来驱动界面变化【作者：唐霜】转载请注明出处：www.tangshuang.net，并且将用户输入反馈到模型数据上去，并且【未经授权禁止转载】本文作者：唐霜，转载请注明出处。万无一失的将业务逻辑粘合到表单模型上，并转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net且完成最终表单数据提交

原创内容，盗版必究。

【作者：唐霜】

转载请注明出处：www.tangshuang.net

【原创内容，转载请注明出处】

阶段表【版权所有，侵权必究】

【访问 www.tangshuang.net 获取更多精彩内容】

著作权归作者所有，禁止商业用途转载。

权限表原创内容，盗版必究。

著作权归作者所有，禁止商业用途转载。

未经授权，禁止复制转载。

转载请注明出处：www.tangshuang.net

必填表【原创内容，转载请注明出处】

【本文受版权保护】

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

可见表未经授权，禁止复制转载。

【未经授权禁止转载】

【关注微信公众号：wwwtangshuangnet】

【访问 www.tangshuang.net 获取更多精彩内容】

可写表本文版权归作者所有，未经授权不得转载。

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

原创内容，盗版必究。

本文版权归作者所有，未经授权不得转载。

6）表单自定义【原创不易，请尊重版权】

基于服务端返回的json实现表单自定义。

本文作者：唐霜，转载请注明出处。

本文版权归作者所有，未经授权不得转载。

【原创不易，请尊重版权】

核心场景：问卷著作权归作者所有，禁止商业用途转载。

【原创不易，请尊重版权】

本文版权归作者所有，未经授权不得转载。

未经授权，禁止复制转载。

在系统的后台管理页面，提供一个表单自定义【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net的界面，让管理员可以根据自己的业务需要进著作权归作者所有，禁止商业用途转载。【本文受版权保护】行自定义配置，将配置信息保存为json，本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】返回给前端，前端拿到这个配置之后，按照配【本文首发于唐霜的博客】【原创内容，转载请注明出处】置好的逻辑进行表单渲染。而且，还可以自己本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。拟定一套规则，用于配置一些动态逻辑，比如【原创不易，请尊重版权】【本文受版权保护】字段的展示和隐藏逻辑，比如字段联动等。但原创内容，盗版必究。【作者：唐霜】是，需要明白的一点是，这个配置单纯只是【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】UI 层面的话，其实不能符合我们最终的要著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】求，还要配合数据模型才可以。

【原创不易，请尊重版权】

本文作者：唐霜，转载请注明出处。

【转载请注明来源】

【原创不易，请尊重版权】

由于 schema 也是可以配置化的，因未经授权，禁止复制转载。【转载请注明来源】此，视图、模型的配置，都可以通过后台自定【原创不易，请尊重版权】【转载请注明来源】义配置，只是我们需要有一个协议层的东西，本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net对服务端输出的配置进行解析

未经授权，禁止复制转载。

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

【访问 www.tangshuang.net 获取更多精彩内容】

后台仅仅保存了配置信息，虽然这些配置信息【作者：唐霜】【本文受版权保护】考虑到了所有情况，有很多条件分支，但是它【原创不易，请尊重版权】原创内容，盗版必究。毕竟是无状态的，真正要实现自定义，必然会著作权归作者所有，禁止商业用途转载。【作者：唐霜】前后端耦合，需要有较强的协议进行约束，通【本文受版权保护】【版权所有，侵权必究】过协议进行解析，在前端去生成运行时的有状本文版权归作者所有，未经授权不得转载。【转载请注明来源】态的东西，而且有些东西，无法通过 htt【本文首发于唐霜的博客】【原创不易，请尊重版权】p 进行传输，例如类的实例，这些都需要协【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net议来完成

转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

但是，总之，基于三角金字塔模型的表单开发【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net范式，实现表单自定义的思路是非常清晰的

【转载请注明来源】

本文作者：唐霜，转载请注明出处。

原创内容，盗版必究。

7）小结本文作者：唐霜，转载请注明出处。

MVC 思想转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

原创内容，盗版必究。

响应式编程【关注微信公众号：wwwtangshuangnet】

转载请注明出处：www.tangshuang.net

本文作者：唐霜，转载请注明出处。

未经授权，禁止复制转载。

协议【本文首发于唐霜的博客】

【转载请注明来源】

【本文受版权保护】

本文版权归作者所有，未经授权不得转载。

【本文受版权保护】

未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。【作者：唐霜】

【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】【原创不易，请尊重版权】【原创内容，转载请注明出处】【版权所有，侵权必究】【本文首发于唐霜的博客】【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】【转载请注明来源】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】【本文受版权保护】【原创内容，转载请注明出处】【本文首发于唐霜的博客】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】原创内容，盗版必究。原创内容，盗版必究。【作者：唐霜】【版权所有】唐霜 www.tangshuang.net【作者：唐霜】【本文受版权保护】【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。【作者：唐霜】【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。【转载请注明来源】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】【未经授权禁止转载】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。【原创不易，请尊重版权】【原创内容，转载请注明出处】【本文受版权保护】本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】本文版权归作者所有，未经授权不得转载。

2020-05-04 4885 表单

唐霜

Robust 第 014 期：三角金字塔 web 表单开发新范式

为价值买单，打赏一杯咖啡

声明

关于

生态