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

本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。

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

本文作者：唐霜，转载请注明出处。原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。【作者：唐霜】

网易云音乐：点击播放

本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.n【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。et 获取更多精彩内容】【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。et 获取更多精彩内容】

喜马拉雅：点击播放

求打赏🙇如果你觉得 Ro转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.netbust 这样一档技术类的谈话节目还不错【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】，希望我继续做下去，不妨打赏支持。你可以本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。扫描本文下方的二维码打赏，也可以加我微信转载请注明出处：www.tangshuang.net【转载请注明来源】后红包打赏。

【本文首发于唐霜的博客】未经授权，禁止复制转载。

文字稿：

【关注微信公众号：wwwtangshua【本文受版权保护】未经授权，禁止复制转载。ngnet】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。原创内容，盗版必究。

两个难点：

如何让听众能够体会到，一个 web 表单【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】比看上去的，有多复杂，以至于需要用一个体【转载请注明来源】【版权所有】唐霜 www.tangshuang.net系去阐述它

原创内容，盗版必究。

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

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

如何让开发者能接受我所提出来的三角金字塔【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net开发范式，毕竟它的开发方式和传统从 UI【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。出发的方式不同

【作者：唐霜】

【转载请注明来源】

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

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

【原创内容，转载请注明出处】【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。【原创不易，请尊重版权】【未经授权禁止转载】

即使最简单的表单开发，也涉及到非常复杂的【未经授权禁止转载】原创内容，盗版必究。问题：状态

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

【未经授权禁止转载】

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

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

原创内容，盗版必究。

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

【访问 www.tangshuang.n著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】et 获取更多精彩内容】

由于这个编辑态的存在，表单无法像普通组件转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。一样按照静态逻辑开发

【转载请注明来源】

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

【转载请注明来源】

几乎所有的表单，都不可能一步开发完，无论【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net如何，你都需要至少两步：1. 数据准备阶【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】段；2. 数据提交阶段。

【本文受版权保护】

【转载请注明来源】

【访问 www.tangshuang.n【作者：唐霜】【转载请注明来源】et 获取更多精彩内容】

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

交互形式：除了普通 UI 框架/库提供的【版权所有，侵权必究】【本文首发于唐霜的博客】表单组件，还有很多复杂的表单交互，例如，原创内容，盗版必究。原创内容，盗版必究。点击某个选项之后，需要进入到一个新的页面【关注微信公众号：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【关注微信公众号：wwwtangshuangnet】计算得到的结果。

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

原创内容，盗版必究。

自动拉取：进入表单，或者某个选项值发生变著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】化时，符合某种条件下，需要根据条件自动拉【转载请注明来源】【转载请注明来源】取数据对其他选项进行填充。

【关注微信公众号：wwwtangshua转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。ngnet】

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

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

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

【转载请注明来源】

是否显示？

【访问 www.tangshuang.n未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】et 获取更多精彩内容】

【本文受版权保护】

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

是否必填？

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

是否只读？

【作者：唐霜】

【转载请注明来源】

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

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

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

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

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

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

【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】et 获取更多精彩内容】

转载请注明出处：www.tangshua本文作者：唐霜，转载请注明出处。原创内容，盗版必究。ng.net

同一个字段选项，在某种情况下不可编辑，在【版权所有，侵权必究】【本文首发于唐霜的博客】某种情况下必填，在某种情况下不可见，在某转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】种情况下可见但不提交

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

表单分步走

【本文受版权保护】

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

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

表单可撤销或可更换整体数据

转载请注明出处：www.tangshua未经授权，禁止复制转载。【转载请注明来源】ng.net

原创内容，盗版必究。

原创内容，盗版必究。【未经授权禁止转载】转载请注明出处：www.tangshua【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。ng.net本文版权归作者所有，未经授权不得转载。

3）目前市面上有哪些表单开发解决方案

So-form https://www.npmjs.co【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】m/package/so-form

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

【本文受版权保护】

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

Uform https://uformjs.org/ NoForm->Formily: https://formilyjs.or原创内容，盗版必究。【转载请注明来源】g/

【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ngnet】

【未经授权禁止转载】

react-hook-form

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

formik

原创内容，盗版必究。

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

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

react-final-form

【转载请注明来源】

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

mithril-form->pow【版权所有】唐霜 www.tangshuang.net【本文受版权保护】erform https://github.com/l【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】udbek/powerform#read未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。me

【转载请注明来源】

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

【关注微信公众号：wwwtangshua原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ngnet】

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

vue-form-maker

【访问 www.tangshuang.n【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】et 获取更多精彩内容】

【转载请注明来源】

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

【转载请注明来源】著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshua原创内容，盗版必究。【原创不易，请尊重版权】ng.net【原创内容，转载请注明出处】

表单开发的本质是什么？

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

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

【本文受版权保护】

界面+数据+业务逻辑

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

【未经授权禁止转载】

原创内容，盗版必究。

转载请注明出处：www.tangshua【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。ng.net

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

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

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

将入口和交互效果分离。所有的交互效果，就【原创不易，请尊重版权】【版权所有，侵权必究】按照我们写交互组件的方式去写。唯独不同的【关注微信公众号：wwwtangshuangnet】【作者：唐霜】地方，在于交互结束之后那一下，要把数据放【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】回到表单数据中，并且把要显示的结果放到表【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。单界面上。

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

转载请注明出处：www.tangshua【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.netng.net

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

表单数据怎么管理？

【转载请注明来源】

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

【本文受版权保护】

表单数据其实有三个状态：编辑态、准备态、【本文受版权保护】【关注微信公众号：wwwtangshuangnet】提交态。

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

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

原创内容，盗版必究。

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

编辑态包含了编辑时需要的所有信息，无论是【版权所有】唐霜 www.tangshuang.net【本文受版权保护】界面上展示需要的数据信息、逻辑信息，但编【版权所有】唐霜 www.tangshuang.net【作者：唐霜】辑态以编辑时需要的数据格式保存数据。例如本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】附件上传。

【作者：唐霜】

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

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

【关注微信公众号：wwwtangshua【作者：唐霜】【本文首发于唐霜的博客】ngnet】

准备态是从接口拉取的数据，以及用于创建编转载请注明出处：www.tangshuang.net【转载请注明来源】辑态数据所需要的数据。

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

提交态则是从编辑态数据经过提取和整理、转原创内容，盗版必究。本文作者：唐霜，转载请注明出处。化之后得到的数据。

原创内容，盗版必究。

【访问 www.tangshuang.n转载请注明出处：www.tangshuang.net原创内容，盗版必究。et 获取更多精彩内容】

转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【未经授权禁止转载】ng.net

【作者：唐霜】

我们只要在我们的开发中存在这三种状态，并【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。且分开管理，就能很清晰的管理表单数据了。未经授权，禁止复制转载。【转载请注明来源】至于在三态之间进行转化，其实是非常简单的【版权所有】唐霜 www.tangshuang.net【本文受版权保护】数据处理逻辑而已。

编辑态数据管理是核心逻辑，编辑态数据不仅原创内容，盗版必究。【作者：唐霜】有取出后用于界面展示的功能，而且，一定要著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】有响应界面输入的功能，因为只有自动响应界【本文受版权保护】原创内容，盗版必究。面输入，才能在这个管理器内部去做一些运算【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。，比如某些字段是基于另外的字段自动计算得本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】到结果的。

【关注微信公众号：wwwtangshua【本文受版权保护】【原创不易，请尊重版权】ngnet】

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

最后，就是要处理表单的业务逻辑。表单业务【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】逻辑，我个人理解，就是用于在界面和数据之著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。间进行调度，根据业务逻辑进行判断，选择展【本文受版权保护】【本文首发于唐霜的博客】示哪些字段UI，根据条件处理数据变化。

转载请注明出处：www.tangshua转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】ng.net

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

推荐数据表的逻辑判断方法。

【作者：唐霜】

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

所谓数据表，就是节点值为boolean 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net的对象。

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

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

可包含：阶段表，权限表，必填表。根据因素本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。主要是：类型、当前状态。

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

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

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

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

【原创不易，请尊重版权】【本文受版权保护】

5）“三角金字塔”表单开发方法论

本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.n未经授权，禁止复制转载。转载请注明出处：www.tangshuang.netet 获取更多精彩内容】【作者：唐霜】

本质是在表单开发中使用 MVC 范式

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

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

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

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

【转载请注明来源】

1 表单视图开发

【转载请注明来源】【作者：唐霜】

我们要先构建一套框架组件，用以实现表单的【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】布局、样式。

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

form-group-item 三级结构

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

【作者：唐霜】

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

slot 需要：label, value【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】, required, disabled【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。, readonly, hidden, 本文作者：唐霜，转载请注明出处。著作权归作者所有，禁止商业用途转载。errors

转载请注明出处：www.tangshua【本文受版权保护】著作权归作者所有，禁止商业用途转载。ng.net

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

【转载请注明来源】

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

以 react 为例，创建一个 Form【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】Item 框架组件，这个组件需要接收一个著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。 render 属性，是一个函数，这个函转载请注明出处：www.tangshuang.net【作者：唐霜】数的参数就是 slot 的信息，而函数的【转载请注明来源】本文作者：唐霜，转载请注明出处。返回值，就是交互组件根据接收的参数返回的【本文受版权保护】【转载请注明来源】 jsx。这种操作逻辑应该在其他很多地方本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。都见过。

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

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

通过 slot 来渲染，则可以将多个字段【未经授权禁止转载】【作者：唐霜】选项合并到一个组件中，实现块级复用

【关注微信公众号：wwwtangshua本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。ngnet】

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

【未经授权禁止转载】

基于这种模式的表单视图开发，有三种实现：【转载请注明来源】原创内容，盗版必究。标签式（angularjs、vue）、j【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】sx式（react）、配置式（jquer未经授权，禁止复制转载。原创内容，盗版必究。y）。虽然要使用的开发方式不同，但是在思【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】想上得到统一。

转载请注明出处：www.tangshua本文版权归作者所有，未经授权不得转载。【本文受版权保护】ng.net

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

在任何表单开发情景下，按照上述思路进行开【作者：唐霜】【关注微信公众号：wwwtangshuangnet】发，会让表单视图开发变得更统一化，有规律著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。可循。

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

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

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

2 表单模型开发

不卖关子，你需要用到我写的 tyshem【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。o 这个库，它提供了一个 Model 类【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。，这个类是一个表单数据模型的基类，你需要【版权所有，侵权必究】【转载请注明来源】使用 extends 关键字对它进行扩展【本文首发于唐霜的博客】【转载请注明来源】，扩展出来的，就是一个表单模型。

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

【关注微信公众号：wwwtangshua本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netngnet】

原创内容，盗版必究。

在表单模型上，你需要声明，这个表单需要用【未经授权禁止转载】【本文受版权保护】到哪些字段。

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

【未经授权禁止转载】

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

【转载请注明来源】

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

上述这些东西的定义，我用模型的 sche原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ma 这个概念来囊括它

原创内容，盗版必究。

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

转载请注明出处：www.tangshua【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】ng.net

模型本身是一个定义，而模型的实例则是一个【未经授权禁止转载】【转载请注明来源】容器，容器中存放着编辑时的数据

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

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

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

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

原创内容，盗版必究。

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

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

【访问 www.tangshuang.n【原创不易，请尊重版权】【本文受版权保护】et 获取更多精彩内容】

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

一个表单模型，不一定只用于一个表单业务，【转载请注明来源】【作者：唐霜】可能相同的表单模型，可以被复用，只需要足未经授权，禁止复制转载。【未经授权禁止转载】够的条件

原创内容，盗版必究。

转载请注明出处：www.tangshua【本文受版权保护】【本文受版权保护】ng.net

转载请注明出处：www.tangshua未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ng.net

【访问 www.tangshuang.n原创内容，盗版必究。原创内容，盗版必究。et 获取更多精彩内容】

3 表单控制器开发

原创内容，盗版必究。【原创内容，转载请注明出处】【原创内容，转载请注明出处】

【本文受版权保护】

【作者：唐霜】

实际上，我们现在前端开发，都会借助 re著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。act 或 jquery 等 UI 驱动本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】框架

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

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

【作者：唐霜】

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

所以，我们的表单控制器开发，不可避免，实本文版权归作者所有，未经授权不得转载。【转载请注明来源】际上，就是要连接表单数据模型、表单视图、【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】表单业务，通过模型数据变化来驱动界面变化原创内容，盗版必究。【本文受版权保护】，并且将用户输入反馈到模型数据上去，并且【转载请注明来源】【原创内容，转载请注明出处】万无一失的将业务逻辑粘合到表单模型上，并【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。且完成最终表单数据提交

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

【关注微信公众号：wwwtangshua著作权归作者所有，禁止商业用途转载。【本文受版权保护】ngnet】

阶段表

权限表

【未经授权禁止转载】

转载请注明出处：www.tangshua未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。ng.net

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

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

必填表

【未经授权禁止转载】

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

可见表

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

【访问 www.tangshuang.n【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】et 获取更多精彩内容】

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

可写表

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

【访问 www.tangshuang.n【原创内容，转载请注明出处】【本文受版权保护】et 获取更多精彩内容】

【本文受版权保护】

【未经授权禁止转载】

【访问 www.tangshuang.n【关注微信公众号：wwwtangshuangnet】【作者：唐霜】et 获取更多精彩内容】【作者：唐霜】

6）表单自定义

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

【未经授权禁止转载】

【转载请注明来源】

核心场景：问卷

【未经授权禁止转载】

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

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

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

【作者：唐霜】

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

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

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

但是，总之，基于三角金字塔模型的表单开发原创内容，盗版必究。【本文首发于唐霜的博客】范式，实现表单自定义的思路是非常清晰的

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

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

7）小结

原创内容，盗版必究。未经授权，禁止复制转载。未经授权，禁止复制转载。

MVC 思想

转载请注明出处：www.tangshua【原创内容，转载请注明出处】【转载请注明来源】ng.net

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

响应式编程

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

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

协议

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

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

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

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

2020-05-04 5073 表单

唐霜

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

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

声明

关于

生态