Web 表单虽然是前端开发中非常常见的开【原创内容，转载请注明出处】【未经授权禁止转载】发项目，但是，在具体到一些业务场景中，表【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】单开发缺是非常复杂的过程。其中设计到的点【本文受版权保护】未经授权，禁止复制转载。，虽然看上去好像都挺容易，能实现，但是，【转载请注明来源】【作者：唐霜】要将所有这些点组织在一起管理，确是一个复【本文受版权保护】【关注微信公众号：wwwtangshuangnet】杂的事情。本期 robust 主要来聊一本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。聊 web 表单开发的新范式。
本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】 【版权所有，侵权必究】【原创不易，请尊重版权】【本文首发于唐霜的博客】未经授权，禁止复制转载。网易云音乐：点击播放
著作权归作者所有，禁止商业用途转载。【作者：唐霜】喜马拉雅：点击播放
【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。求打赏🙇如果你觉得 Ro【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。bust 这样一档技术类的谈话节目还不错【关注微信公众号：wwwtangshuangnet】【转载请注明来源】，希望我继续做下去，不妨打赏支持。你可以【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。扫描本文下方的二维码打赏，也可以加我微信【版权所有，侵权必究】【作者：唐霜】后红包打赏。
【原创不易，请尊重版权】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】【本文首发于唐霜的博客】文字稿：
【版权所有，侵权必究】转载请注明出处：www.tangshuang.net两个难点：
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
- 如何让听众能够体会到，一个 web 表单【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】比看上去的，有多复杂，以至于需要用一个体本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。系去阐述它 本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】【原创不易，请尊重版权】
- 如何让开发者能接受我所提出来的三角金字塔【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】开发范式，毕竟它的开发方式和传统从 UI【未经授权禁止转载】【作者：唐霜】 出发的方式不同 【本文受版权保护】【未经授权禁止转载】
1）为什么在我看来 web 表单是前端开未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。发最复杂的问题之一
本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】
- 即使最简单的表单开发，也涉及到非常复杂的本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】问题：状态 本文作者：唐霜，转载请注明出处。未经授权，禁止复制转载。原创内容，盗版必究。
- 因为，html 原生表单组件也好，我们自【未经授权禁止转载】本文作者：唐霜，转载请注明出处。己手写的 react 受控表单组件也好，本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】表单的编辑时数据，和最终提交的数据完全不著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。同 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】
- 由于这个编辑态的存在，表单无法像普通组件转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。一样按照静态逻辑开发 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】
- 几乎所有的表单，都不可能一步开发完，无论本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。如何，你都需要至少两步：1. 数据准备阶【原创不易，请尊重版权】【原创不易，请尊重版权】段；2. 数据提交阶段。 【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。【作者：唐霜】原创内容，盗版必究。
2）哪些问题会让 web 表单开发很头疼未经授权，禁止复制转载。原创内容，盗版必究。？
【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】
- 交互形式：除了普通 UI 框架/库提供的原创内容，盗版必究。本文作者：唐霜，转载请注明出处。表单组件，还有很多复杂的表单交互，例如，【版权所有】唐霜 www.tangshuang.net转载请注明出处：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面经常会出现，看上去很简单，实际上真正处【作者：唐霜】本文作者：唐霜，转载请注明出处。理起来却很复杂，例如，需要处理联动时，动本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】态加载数据问题，需要解决切换联动开关所带【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。来是否重置数据问题等等。 未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】
- 数据根据条件提交：当某个选项的值符合某个未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。条件时，另外一个选项才把数据提交到后台，【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】如果不符合条件，即使它是展示的可见的，也原创内容，盗版必究。【作者：唐霜】不提交。 未经授权，禁止复制转载。【作者：唐霜】著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】
- 自动计算：某一个选项是由另外几个选项自动著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】计算得到的结果。 【原创内容，转载请注明出处】原创内容，盗版必究。【转载请注明来源】
- 自动拉取：进入表单，或者某个选项值发生变原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。化时，符合某种条件下，需要根据条件自动拉著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】取数据对其他选项进行填充。 【版权所有】唐霜 www.tangshuang.net【作者：唐霜】
- 校验：
- 何时进行校验？ 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。
- 校验如果出错，是直接展示在选项输入下面，【作者：唐霜】【本文首发于唐霜的博客】还是通过一个提示框进行提示？ 【关注微信公众号：wwwtangshuangnet】【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】
- 是输入的时候立即校验，还是提交表单的时候【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】才校验？ 【版权所有，侵权必究】转载请注明出处：www.tangshuang.net【作者：唐霜】
- 校验是要把所有不符合校验逻辑的错误都抛出本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】来，还是只抛出第一个不符合的？ 【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。
- 是否要校验，需根据一定的条件进行判断，符原创内容，盗版必究。原创内容，盗版必究。合条件才进行校验，否则不校验 转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】
- 同一个选项，有多个校验逻辑 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】原创内容，盗版必究。
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】
- 是否显示？ 【关注微信公众号：wwwtangshuangnet】【未经授权禁止转载】【转载请注明来源】【关注微信公众号：wwwtangshuangnet】
- 是否必填？ 未经授权，禁止复制转载。未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net
- 是否只读？ 【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。
- 数据提交：
- 和展示的数据不一样，例如展示的是“yes【原创不易，请尊重版权】原创内容，盗版必究。”提交的是1，展示的是“no”提交的是0 转载请注明出处：www.tangshuang.net【未经授权禁止转载】
- 提交时，只提交id，不需要提交文本 【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。【作者：唐霜】
- 提交时，先用部分数据提交到接口，看看这份本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】数据是否符合提交规则，然后才将整个数据提【访问 www.tangshuang.net 获取更多精彩内容】【作者：唐霜】交到另外一个接口 【转载请注明来源】转载请注明出处：www.tangshuang.net
- 有些字段不需要提交 本文作者：唐霜，转载请注明出处。原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】
- 有些值可能并没有展示在界面上，但是需要提著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】交 【未经授权禁止转载】【作者：唐霜】
本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】
- 数据恢复：从接口拉取数据，生成一个编辑态【本文首发于唐霜的博客】【原创不易，请尊重版权】表单，对数据进行编辑后提交
- 接口数据和表单所需要的数据格式不一致 本文作者：唐霜，转载请注明出处。【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
- 数据类型不匹配，例如某个选项需要一个数组【版权所有】唐霜 www.tangshuang.net【本文受版权保护】，但接口返回了一个字符串，或者需要一个数原创内容，盗版必究。原创内容，盗版必究。组，返回null 未经授权，禁止复制转载。【转载请注明来源】【原创内容，转载请注明出处】
【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】未经授权，禁止复制转载。
- 同一个字段选项，在某种情况下不可编辑，在原创内容，盗版必究。【原创不易，请尊重版权】某种情况下必填，在某种情况下不可见，在某【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net种情况下可见但不提交 【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net
- 表单分步走 【本文首发于唐霜的博客】原创内容，盗版必究。
- 表单可撤销或可更换整体数据 【原创不易，请尊重版权】未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。
3）目前市面上有哪些表单开发解决方案
【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。
- So-form https://www.npmjs.co【本文受版权保护】【本文首发于唐霜的博客】m/package/so-form 转载请注明出处：www.tangshuang.net【作者：唐霜】【关注微信公众号：wwwtangshuangnet】
- Uform https://uformjs.org/ NoForm->Formily: https://formilyjs.or原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。g/ 【未经授权禁止转载】本文作者：唐霜，转载请注明出处。【转载请注明来源】
- react-hook-form 【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net原创内容，盗版必究。
- formik 【本文受版权保护】【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。
- react-final-form 【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】
- mithril-form->pow转载请注明出处：www.tangshuang.net【版权所有，侵权必究】erform https://github.com/l未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】udbek/powerform#read本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。me 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net
- vue-form-maker 著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】
4）如何去分解表单，才能让表单开发显得杂转载请注明出处：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 获取更多精彩内容】【版权所有】唐霜 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本文版权归作者所有，未经授权不得转载。且分开管理，就能很清晰的管理表单数据了。著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】至于在三态之间进行转化，其实是非常简单的转载请注明出处：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 范式 【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】
- 界面+数据+业务逻辑=视图+模型+控制器 【本文受版权保护】【关注微信公众号：wwwtangshuangnet】
1 表单视图开发
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- 我们要先构建一套框架组件，用以实现表单的【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。布局、样式。 未经授权，禁止复制转载。【原创不易，请尊重版权】【本文受版权保护】【转载请注明来源】
- form-group-item 三级结构 【作者：唐霜】【转载请注明来源】【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。
- 组件是布局框架，要实现交互，我推荐一种“【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.netslot”方案。当一个选项需要使用某个交【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.net互的时候，它去调用原有的交互组件，这些交【本文受版权保护】【关注微信公众号：wwwtangshuangnet】互组件，可以是 web 原生的，也可以是【未经授权禁止转载】未经授权，禁止复制转载。借助第三方，比如 antd。总之，在已经原创内容，盗版必究。【本文受版权保护】布局好的框架中，在每一个需要使用某种交互【关注微信公众号：wwwtangshuangnet】原创内容，盗版必究。的地方，有一种统一的方式调用交互组件。 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【本文首发于唐霜的博客】
- slot 需要：label, value【原创不易，请尊重版权】【作者：唐霜】, required, disabled【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net, readonly, hidden, 【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】errors 【原创不易，请尊重版权】【未经授权禁止转载】【作者：唐霜】【转载请注明来源】
- 以 react 为例，创建一个 Form未经授权，禁止复制转载。【版权所有，侵权必究】Item 框架组件，这个组件需要接收一个【转载请注明来源】【版权所有】唐霜 www.tangshuang.net render 属性，是一个函数，这个函【转载请注明来源】著作权归作者所有，禁止商业用途转载。数的参数就是 slot 的信息，而函数的【本文首发于唐霜的博客】【版权所有，侵权必究】返回值，就是交互组件根据接收的参数返回的未经授权，禁止复制转载。原创内容，盗版必究。 jsx。这种操作逻辑应该在其他很多地方本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】都见过。 【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net
- 通过 slot 来渲染，则可以将多个字段著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】选项合并到一个组件中，实现块级复用 原创内容，盗版必究。【原创内容，转载请注明出处】
- 基于这种模式的表单视图开发，有三种实现：著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。标签式（angularjs、vue）、j【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。sx式（react）、配置式（jquer【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】y）。虽然要使用的开发方式不同，但是在思【原创不易，请尊重版权】【作者：唐霜】想上得到统一。 未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。
- 在任何表单开发情景下，按照上述思路进行开著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】发，会让表单视图开发变得更统一化，有规律【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。可循。 【转载请注明来源】【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。
2 表单模型开发
【作者：唐霜】【本文受版权保护】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 不卖关子，你需要用到我写的 tyshem未经授权，禁止复制转载。未经授权，禁止复制转载。o 这个库，它提供了一个 Model 类未经授权，禁止复制转载。本文作者：唐霜，转载请注明出处。，这个类是一个表单数据模型的基类，你需要本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。使用 extends 关键字对它进行扩展转载请注明出处：www.tangshuang.net【版权所有，侵权必究】，扩展出来的，就是一个表单模型。 【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】
- 在表单模型上，你需要声明，这个表单需要用未经授权，禁止复制转载。【本文首发于唐霜的博客】到哪些字段。 未经授权，禁止复制转载。【转载请注明来源】【作者：唐霜】【转载请注明来源】
- 在声明每一个字段时，你需要声明：
- 默认值/计算属性函数 【本文受版权保护】未经授权，禁止复制转载。未经授权，禁止复制转载。【作者：唐霜】
- 字段类型+类型错误提示语 【原创内容，转载请注明出处】【原创不易，请尊重版权】【原创不易，请尊重版权】
- 校验器数组：determine 是否要执【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。行该校验器，validate 校验器函数【本文受版权保护】【作者：唐霜】，返回 true|false|Error【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。|[]，message 校验失败时的文本 【版权所有】唐霜 www.tangshuang.net【原创内容，转载请注明出处】
- 从接口拉取数据后从准备态数据转化到编辑态【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】数据的函数 【作者：唐霜】【本文首发于唐霜的博客】【版权所有，侵权必究】【转载请注明来源】
- 从编辑态转化到提交态时的转化函数 本文版权归作者所有，未经授权不得转载。【作者：唐霜】
- 从模型读取数据用于展示时的格式化函数，以【作者：唐霜】转载请注明出处：www.tangshuang.net及从用户输入保存到模型的格式化函数 未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net【版权所有，侵权必究】【原创不易，请尊重版权】
- required, readonly, 【本文受版权保护】未经授权，禁止复制转载。disabeld, hidden 函数 【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】【未经授权禁止转载】转载请注明出处：www.tangshuang.net
- 错误抓取函数 【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】【访问 www.tangshuang.net 获取更多精彩内容】
- 扩展字段 【转载请注明来源】【版权所有】唐霜 www.tangshuang.net
【本文受版权保护】转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。
- 上述这些东西的定义，我用模型的 sche【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】ma 这个概念来囊括它 【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。
- 模型本身是一个定义，而模型的实例则是一个【原创内容，转载请注明出处】【未经授权禁止转载】容器，容器中存放着编辑时的数据 【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】未经授权，禁止复制转载。
- 模型实例具有响应式能力，能够在状态数据发【转载请注明来源】【本文首发于唐霜的博客】生变化时通知外部，从而可以让 UI 框架【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net可以刷新界面 原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net
- 另外，模型开发还可以自己加入其他方法，这转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】样可以把有关数据的操作，全部收拢到模型中【本文首发于唐霜的博客】【原创内容，转载请注明出处】，这样方便数据代码管理，在将来某些地方出未经授权，禁止复制转载。【本文受版权保护】现问题时，都可以直接通过模型的对应方法来转载请注明出处：www.tangshuang.net原创内容，盗版必究。进行调试和修复。 【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】【作者：唐霜】
- 一个表单模型，不一定只用于一个表单业务，【未经授权禁止转载】原创内容，盗版必究。可能相同的表单模型，可以被复用，只需要足【未经授权禁止转载】【关注微信公众号：wwwtangshuangnet】够的条件 本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。
3 表单控制器开发
【原创内容，转载请注明出处】【转载请注明来源】【原创内容，转载请注明出处】
- 表单控制器主要是结合业务逻辑，也就是前面【转载请注明来源】【本文受版权保护】提到的业务数据关系表，对模型进行初始化、【本文受版权保护】【访问 www.tangshuang.net 获取更多精彩内容】方法调用、UI 支配 【版权所有，侵权必究】【本文受版权保护】
- 实际上，我们现在前端开发，都会借助 re本文版权归作者所有，未经授权不得转载。【版权所有】唐霜 www.tangshuang.netact 或 jquery 等 UI 驱动【转载请注明来源】【本文受版权保护】框架 著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。
- 所以，我们的表单控制器开发，不可避免，实【未经授权禁止转载】【原创不易，请尊重版权】际上，就是要连接表单数据模型、表单视图、【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。表单业务，通过模型数据变化来驱动界面变化【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net，并且将用户输入反馈到模型数据上去，并且【原创不易，请尊重版权】【原创内容，转载请注明出处】万无一失的将业务逻辑粘合到表单模型上，并【版权所有】唐霜 www.tangshuang.net转载请注明出处：www.tangshuang.net且完成最终表单数据提交 未经授权，禁止复制转载。【本文受版权保护】转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net
- 阶段表 【原创不易，请尊重版权】【本文首发于唐霜的博客】【原创不易，请尊重版权】
- 权限表 转载请注明出处：www.tangshuang.net本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。
- 必填表 转载请注明出处：www.tangshuang.net【作者：唐霜】【关注微信公众号：wwwtangshuangnet】【转载请注明来源】
- 可见表 【转载请注明来源】【未经授权禁止转载】原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】
- 可写表 著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】原创内容，盗版必究。【转载请注明来源】
6）表单自定义
【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
- 基于服务端返回的json实现表单自定义。 【本文首发于唐霜的博客】未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。
- 核心场景：问卷 本文作者：唐霜，转载请注明出处。【转载请注明来源】【版权所有，侵权必究】
- 在系统的后台管理页面，提供一个表单自定义【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。的界面，让管理员可以根据自己的业务需要进本文作者：唐霜，转载请注明出处。【转载请注明来源】行自定义配置，将配置信息保存为json，【本文受版权保护】【本文首发于唐霜的博客】返回给前端，前端拿到这个配置之后，按照配著作权归作者所有，禁止商业用途转载。【作者：唐霜】置好的逻辑进行表单渲染。而且，还可以自己【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】拟定一套规则，用于配置一些动态逻辑，比如【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net字段的展示和隐藏逻辑，比如字段联动等。但【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。是，需要明白的一点是，这个配置单纯只是 【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】UI 层面的话，其实不能符合我们最终的要【原创内容，转载请注明出处】【作者：唐霜】求，还要配合数据模型才可以。 转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【作者：唐霜】【版权所有】唐霜 www.tangshuang.net
- 由于 schema 也是可以配置化的，因原创内容，盗版必究。【作者：唐霜】此，视图、模型的配置，都可以通过后台自定【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net义配置，只是我们需要有一个协议层的东西，【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】对服务端输出的配置进行解析 【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】
- 后台仅仅保存了配置信息，虽然这些配置信息【本文受版权保护】未经授权，禁止复制转载。考虑到了所有情况，有很多条件分支，但是它本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】毕竟是无状态的，真正要实现自定义，必然会本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】前后端耦合，需要有较强的协议进行约束，通本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net过协议进行解析，在前端去生成运行时的有状本文版权归作者所有，未经授权不得转载。【转载请注明来源】态的东西，而且有些东西，无法通过 htt【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.netp 进行传输，例如类的实例，这些都需要协【本文受版权保护】未经授权，禁止复制转载。议来完成 【作者：唐霜】【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。
- 但是，总之，基于三角金字塔模型的表单开发【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。范式，实现表单自定义的思路是非常清晰的 【作者：唐霜】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。
7）小结
【原创内容，转载请注明出处】【本文首发于唐霜的博客】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
- MVC 思想 【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.net
- 响应式编程 【作者：唐霜】【访问 www.tangshuang.net 获取更多精彩内容】原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。
- 协议 【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】
2020-05-04 5204 表单
你好，问下这个三角金字塔范式有开源吗？可以参考一下实现吗