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

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

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

网易云音乐：原创内容，盗版必究。点击播放【未经授权禁止转载】

【原创不易，请尊重版权】【转载请注明来源】原创内容，盗版必究。【本文首发于唐霜的博客】

喜马拉雅：【本文首发于唐霜的博客】点击播放【本文受版权保护】

未经授权，禁止复制转载。【未经授权禁止转载】本文作者：唐霜，转载请注明出处。

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

【未经授权禁止转载】【作者：唐霜】转载请注明出处：www.tangshuang.net【作者：唐霜】

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

【转载请注明来源】【作者：唐霜】【本文首发于唐霜的博客】

两个难点：转载请注明出处：www.tangshuang.net

如何让听众能够体会到，一个 web 表单著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net比看上去的，有多复杂，以至于需要用一个体【版权所有，侵权必究】【作者：唐霜】系去阐述它

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

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

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

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

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

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

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

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

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

原创内容，盗版必究。

即使最简单的表单开发，也涉及到非常复杂的转载请注明出处：www.tangshuang.net【转载请注明来源】问题：状态

【关注微信公众号：wwwtangshuangnet】

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

【作者：唐霜】

因为，html 原生表单组件也好，我们自【本文受版权保护】本文版权归作者所有，未经授权不得转载。己手写的 react 受控表单组件也好，【本文受版权保护】【原创内容，转载请注明出处】表单的编辑时数据，和最终提交的数据完全不未经授权，禁止复制转载。【转载请注明来源】同

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

【未经授权禁止转载】

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

由于这个编辑态的存在，表单无法像普通组件【未经授权禁止转载】【访问 www.tangshuang.net 获取更多精彩内容】一样按照静态逻辑开发

【转载请注明来源】

【本文受版权保护】

原创内容，盗版必究。

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

几乎所有的表单，都不可能一步开发完，无论本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。如何，你都需要至少两步：1. 数据准备阶【原创内容，转载请注明出处】原创内容，盗版必究。段；2. 数据提交阶段。

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

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

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

交互形式：除了普通 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著作权归作者所有，禁止商业用途转载。理起来却很复杂，例如，需要处理联动时，动未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】态加载数据问题，需要解决切换联动开关所带【本文首发于唐霜的博客】原创内容，盗版必究。来是否重置数据问题等等。

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

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

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

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

数据根据条件提交：当某个选项的值符合某个【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。条件时，另外一个选项才把数据提交到后台，著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net如果不符合条件，即使它是展示的可见的，也【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。不提交。

原创内容，盗版必究。

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

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

自动计算：某一个选项是由另外几个选项自动【未经授权禁止转载】【原创内容，转载请注明出处】计算得到的结果。

原创内容，盗版必究。

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

自动拉取：进入表单，或者某个选项值发生变【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】化时，符合某种条件下，需要根据条件自动拉未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】取数据对其他选项进行填充。

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

【作者：唐霜】

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

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

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

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

【转载请注明来源】

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

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

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

是否显示？未经授权，禁止复制转载。

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

是否必填？【本文首发于唐霜的博客】

【转载请注明来源】

原创内容，盗版必究。

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

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

是否只读？本文版权归作者所有，未经授权不得转载。

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

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

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

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

原创内容，盗版必究。

【本文受版权保护】

【转载请注明来源】

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

【转载请注明来源】

原创内容，盗版必究。

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

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

同一个字段选项，在某种情况下不可编辑，在【原创不易，请尊重版权】【转载请注明来源】某种情况下必填，在某种情况下不可见，在某【转载请注明来源】本文作者：唐霜，转载请注明出处。种情况下可见但不提交

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

【未经授权禁止转载】

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

【未经授权禁止转载】

表单分步走转载请注明出处：www.tangshuang.net

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

【关注微信公众号：wwwtangshuangnet】

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

表单可撤销或可更换整体数据【转载请注明来源】

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

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

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

【关注微信公众号：wwwtangshuangnet】

3）目前市面上有哪些表单开发解决方案【未经授权禁止转载】

So-form 转载请注明出处：www.tangshuang.nethttps://www.npmjs.co【作者：唐霜】【原创内容，转载请注明出处】m/package/so-form

【关注微信公众号：wwwtangshuangnet】

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

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

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

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

Uform 【版权所有】唐霜 www.tangshuang.nethttps://uformjs.org/ NoForm->Formily:【本文受版权保护】【版权所有】唐霜 www.tangshuang.net https://formilyjs.or【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。g/

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

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

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

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

react-hook-form未经授权，禁止复制转载。

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

【未经授权禁止转载】

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

【本文受版权保护】

formik原创内容，盗版必究。

【关注微信公众号：wwwtangshuangnet】

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

【关注微信公众号：wwwtangshuangnet】

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

【关注微信公众号：wwwtangshuangnet】

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

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

mithril-form->pow【本文首发于唐霜的博客】原创内容，盗版必究。erform https://github.com/l【未经授权禁止转载】【转载请注明来源】udbek/powerform#read著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。me

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

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

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

vue-form-maker转载请注明出处：www.tangshuang.net

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

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

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

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

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

4）如何去分解表单，才能让表单开发显得杂【原创不易，请尊重版权】未经授权，禁止复制转载。乱无章？

表单开发的本质是什么？著作权归作者所有，禁止商业用途转载。

原创内容，盗版必究。

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

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

界面+数据+业务逻辑原创内容，盗版必究。

【关注微信公众号：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

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

【转载请注明来源】

【本文受版权保护】

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

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

提交态则是从编辑态数据经过提取和整理、转著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。化之后得到的数据。

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

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

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

我们只要在我们的开发中存在这三种状态，并原创内容，盗版必究。转载请注明出处：www.tangshuang.net且分开管理，就能很清晰的管理表单数据了。未经授权，禁止复制转载。【转载请注明来源】至于在三态之间进行转化，其实是非常简单的【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】数据处理逻辑而已。

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

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

【关注微信公众号：wwwtangshuangnet】

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

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

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

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

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

最后，就是要处理表单的业务逻辑。表单业务【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net逻辑，我个人理解，就是用于在界面和数据之未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net间进行调度，根据业务逻辑进行判断，选择展【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】示哪些字段UI，根据条件处理数据变化。

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

推荐数据表的逻辑判断方法。【访问 www.tangshuang.net 获取更多精彩内容】

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

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

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

所谓数据表，就是节点值为boolean 未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】的对象。

【本文受版权保护】

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

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

原创内容，盗版必究。

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

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

【作者：唐霜】

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

【未经授权禁止转载】

5）“三角金字塔”表单开发方法论【转载请注明来源】

本质是在表单开发中使用 MVC 范式【本文受版权保护】

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

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

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

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

【本文受版权保护】

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

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

原创内容，盗版必究。

【本文受版权保护】

1 表单视图开发【本文受版权保护】

我们要先构建一套框架组件，用以实现表单的本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。布局、样式。

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

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

【本文受版权保护】

form-group-item 三级结构

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

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

原创内容，盗版必究。

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

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

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

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

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

slot 需要：label, value未经授权，禁止复制转载。【未经授权禁止转载】, required, disabled【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】, readonly, hidden, 转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.neterrors

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

原创内容，盗版必究。

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

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

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

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

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

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

通过 slot 来渲染，则可以将多个字段【原创内容，转载请注明出处】【版权所有，侵权必究】选项合并到一个组件中，实现块级复用

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

原创内容，盗版必究。

基于这种模式的表单视图开发，有三种实现：【本文受版权保护】原创内容，盗版必究。标签式（angularjs、vue）、j未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。sx式（react）、配置式（jquer转载请注明出处：www.tangshuang.net【作者：唐霜】y）。虽然要使用的开发方式不同，但是在思【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】想上得到统一。

【关注微信公众号：wwwtangshuangnet】

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

原创内容，盗版必究。

【未经授权禁止转载】

在任何表单开发情景下，按照上述思路进行开【本文受版权保护】【本文受版权保护】发，会让表单视图开发变得更统一化，有规律【转载请注明来源】原创内容，盗版必究。可循。

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

原创内容，盗版必究。

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

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

2 表单模型开发【未经授权禁止转载】

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

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

【作者：唐霜】

在表单模型上，你需要声明，这个表单需要用本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。到哪些字段。

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

【未经授权禁止转载】

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

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

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

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

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

上述这些东西的定义，我用模型的 sche著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】ma 这个概念来囊括它

【未经授权禁止转载】

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

模型本身是一个定义，而模型的实例则是一个未经授权，禁止复制转载。原创内容，盗版必究。容器，容器中存放着编辑时的数据

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

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

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

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

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

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

另外，模型开发还可以自己加入其他方法，这【作者：唐霜】【作者：唐霜】样可以把有关数据的操作，全部收拢到模型中未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】，这样方便数据代码管理，在将来某些地方出本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。现问题时，都可以直接通过模型的对应方法来【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。进行调试和修复。

【本文受版权保护】

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

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

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

一个表单模型，不一定只用于一个表单业务，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。可能相同的表单模型，可以被复用，只需要足著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】够的条件

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

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

【关注微信公众号：wwwtangshuangnet】

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

实际上，我们现在前端开发，都会借助 re【本文首发于唐霜的博客】【本文首发于唐霜的博客】act 或 jquery 等 UI 驱动【转载请注明来源】【关注微信公众号：wwwtangshuangnet】框架

【本文受版权保护】

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

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

所以，我们的表单控制器开发，不可避免，实【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。际上，就是要连接表单数据模型、表单视图、原创内容，盗版必究。【原创内容，转载请注明出处】表单业务，通过模型数据变化来驱动界面变化本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。，并且将用户输入反馈到模型数据上去，并且【版权所有，侵权必究】【本文首发于唐霜的博客】万无一失的将业务逻辑粘合到表单模型上，并【本文首发于唐霜的博客】【版权所有，侵权必究】且完成最终表单数据提交

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

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

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

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

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

阶段表原创内容，盗版必究。

原创内容，盗版必究。

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

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

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

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

【转载请注明来源】

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

必填表【作者：唐霜】

【作者：唐霜】

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

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

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

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

可写表【关注微信公众号：wwwtangshuangnet】

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

【转载请注明来源】

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

6）表单自定义【原创内容，转载请注明出处】

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

【关注微信公众号：wwwtangshuangnet】

【转载请注明来源】

【作者：唐霜】

【未经授权禁止转载】

核心场景：问卷【未经授权禁止转载】

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

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

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

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

【转载请注明来源】

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

【本文受版权保护】

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

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

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

【作者：唐霜】

【未经授权禁止转载】

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

但是，总之，基于三角金字塔模型的表单开发转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。范式，实现表单自定义的思路是非常清晰的

【作者：唐霜】

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

【关注微信公众号：wwwtangshuangnet】

7）小结未经授权，禁止复制转载。

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

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

【本文受版权保护】

【作者：唐霜】

响应式编程本文版权归作者所有，未经授权不得转载。

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

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

【未经授权禁止转载】

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

协议【版权所有，侵权必究】

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

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

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

原创内容，盗版必究。

【本文受版权保护】

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

2020-05-04 4806 表单

唐霜

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

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

声明

关于

生态