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