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