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

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

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

网易云音乐：原创内容，盗版必究。点击播放本文作者：唐霜，转载请注明出处。

喜马拉雅：本文作者：唐霜，转载请注明出处。点击播放【转载请注明来源】

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

【本文受版权保护】【关注微信公众号：wwwtangshuangnet】转载请注明出处：www.tangshuang.net

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

转载请注明出处：www.tangshuang.net【转载请注明来源】本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】

两个难点：【原创内容，转载请注明出处】

如何让听众能够体会到，一个 web 表单著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。比看上去的，有多复杂，以至于需要用一个体著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】系去阐述它

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

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

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

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

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

1）为什么在我看来 web 表单是前端开本文作者：唐霜，转载请注明出处。原创内容，盗版必究。发最复杂的问题之一

即使最简单的表单开发，也涉及到非常复杂的本文作者：唐霜，转载请注明出处。【转载请注明来源】问题：状态

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

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

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

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

【作者：唐霜】

因为，html 原生表单组件也好，我们自【作者：唐霜】未经授权，禁止复制转载。己手写的 react 受控表单组件也好，【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。表单的编辑时数据，和最终提交的数据完全不转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net同

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

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

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

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

【本文受版权保护】

由于这个编辑态的存在，表单无法像普通组件未经授权，禁止复制转载。【转载请注明来源】一样按照静态逻辑开发

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

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

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

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

几乎所有的表单，都不可能一步开发完，无论未经授权，禁止复制转载。【原创不易，请尊重版权】如何，你都需要至少两步：1. 数据准备阶【未经授权禁止转载】【作者：唐霜】段；2. 数据提交阶段。

原创内容，盗版必究。

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

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

2）哪些问题会让 web 表单开发很头疼【转载请注明来源】原创内容，盗版必究。？

交互形式：除了普通 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些选项才显示出来。这种联动效果，在表单里未经授权，禁止复制转载。【作者：唐霜】面经常会出现，看上去很简单，实际上真正处【本文受版权保护】【版权所有，侵权必究】理起来却很复杂，例如，需要处理联动时，动著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。态加载数据问题，需要解决切换联动开关所带本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。来是否重置数据问题等等。

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

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

原创内容，盗版必究。

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

数据根据条件提交：当某个选项的值符合某个本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net条件时，另外一个选项才把数据提交到后台，【本文受版权保护】【本文首发于唐霜的博客】如果不符合条件，即使它是展示的可见的，也【原创内容，转载请注明出处】【转载请注明来源】不提交。

【未经授权禁止转载】

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

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

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

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

【作者：唐霜】

【转载请注明来源】

自动拉取：进入表单，或者某个选项值发生变本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】化时，符合某种条件下，需要根据条件自动拉【未经授权禁止转载】原创内容，盗版必究。取数据对其他选项进行填充。

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

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

【本文受版权保护】

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

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

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

【未经授权禁止转载】

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

是否显示？【版权所有，侵权必究】

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

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

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

是否必填？著作权归作者所有，禁止商业用途转载。

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

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

【本文受版权保护】

原创内容，盗版必究。

是否只读？【访问 www.tangshuang.net 获取更多精彩内容】

原创内容，盗版必究。

【作者：唐霜】

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

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

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

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

【转载请注明来源】

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

【关注微信公众号：wwwtangshuangnet】

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

【关注微信公众号：wwwtangshuangnet】

【作者：唐霜】

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

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

同一个字段选项，在某种情况下不可编辑，在本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。某种情况下必填，在某种情况下不可见，在某【作者：唐霜】【版权所有】唐霜 www.tangshuang.net种情况下可见但不提交

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

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

表单分步走【转载请注明来源】

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

【转载请注明来源】

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

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

表单可撤销或可更换整体数据本文版权归作者所有，未经授权不得转载。

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

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

【作者：唐霜】

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

So-form 原创内容，盗版必究。https://www.npmjs.co著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】m/package/so-form

原创内容，盗版必究。

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

Uform 【未经授权禁止转载】https://uformjs.org/ NoForm->Formily:未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net https://formilyjs.or【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】g/

【转载请注明来源】

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

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

react-hook-form转载请注明出处：www.tangshuang.net

原创内容，盗版必究。

【作者：唐霜】

原创内容，盗版必究。

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

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

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

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

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

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

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

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

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

【未经授权禁止转载】

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

mithril-form->pow本文作者：唐霜，转载请注明出处。【未经授权禁止转载】erform https://github.com/l原创内容，盗版必究。转载请注明出处：www.tangshuang.netudbek/powerform#read【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】me

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

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

【本文受版权保护】

vue-form-maker【作者：唐霜】

【本文受版权保护】

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

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

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

4）如何去分解表单，才能让表单开发显得杂【转载请注明来源】【本文受版权保护】乱无章？

表单开发的本质是什么？【本文受版权保护】

【未经授权禁止转载】

【转载请注明来源】

【关注微信公众号：wwwtangshuangnet】

界面+数据+业务逻辑【本文首发于唐霜的博客】

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

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

【本文受版权保护】

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

界面就是交互效果，只要是世界上见到过的交未经授权，禁止复制转载。【转载请注明来源】互效果，我们都可以开发，所以，在不考虑上著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】述所有情况下，界面上的单个选项的交互效果【版权所有】唐霜 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 获取更多精彩内容】且分开管理，就能很清晰的管理表单数据了。【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。至于在三态之间进行转化，其实是非常简单的本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。数据处理逻辑而已。

【作者：唐霜】

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

【关注微信公众号：wwwtangshuangnet】

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

【作者：唐霜】

【未经授权禁止转载】

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

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

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

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

【关注微信公众号：wwwtangshuangnet】

推荐数据表的逻辑判断方法。【未经授权禁止转载】

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

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

所谓数据表，就是节点值为boolean 本文版权归作者所有，未经授权不得转载。【本文受版权保护】的对象。

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

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

【本文受版权保护】

可包含：阶段表，权限表，必填表。根据因素【转载请注明来源】【关注微信公众号：wwwtangshuangnet】主要是：类型、当前状态。

【作者：唐霜】

原创内容，盗版必究。

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

5）“三角金字塔”表单开发方法论未经授权，禁止复制转载。

本质是在表单开发中使用 MVC 范式【未经授权禁止转载】

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

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

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

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

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

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

【本文受版权保护】

原创内容，盗版必究。

1 表单视图开发【关注微信公众号：wwwtangshuangnet】

我们要先构建一套框架组件，用以实现表单的著作权归作者所有，禁止商业用途转载。【转载请注明来源】布局、样式。

原创内容，盗版必究。

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

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

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

form-group-item 三级结构

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

原创内容，盗版必究。

【未经授权禁止转载】

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

原创内容，盗版必究。

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

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

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

slot 需要：label, value本文作者：唐霜，转载请注明出处。【作者：唐霜】, required, disabled本文版权归作者所有，未经授权不得转载。【转载请注明来源】, readonly, hidden, 本文作者：唐霜，转载请注明出处。【本文受版权保护】errors

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

【转载请注明来源】

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

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

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

【未经授权禁止转载】

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

通过 slot 来渲染，则可以将多个字段【作者：唐霜】【本文受版权保护】选项合并到一个组件中，实现块级复用

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

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

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

【关注微信公众号：wwwtangshuangnet】

基于这种模式的表单视图开发，有三种实现：转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。标签式（angularjs、vue）、j著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.netsx式（react）、配置式（jquer【本文首发于唐霜的博客】【版权所有，侵权必究】y）。虽然要使用的开发方式不同，但是在思【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net想上得到统一。

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

【作者：唐霜】

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

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

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

在任何表单开发情景下，按照上述思路进行开【原创内容，转载请注明出处】【版权所有，侵权必究】发，会让表单视图开发变得更统一化，有规律本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。可循。

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

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

【未经授权禁止转载】

2 表单模型开发【本文首发于唐霜的博客】

不卖关子，你需要用到我写的 tyshem【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】o 这个库，它提供了一个 Model 类【转载请注明来源】本文版权归作者所有，未经授权不得转载。，这个类是一个表单数据模型的基类，你需要本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】使用 extends 关键字对它进行扩展转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.net，扩展出来的，就是一个表单模型。

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

在表单模型上，你需要声明，这个表单需要用本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。到哪些字段。

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

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

原创内容，盗版必究。

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

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

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

【转载请注明来源】

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

【未经授权禁止转载】

原创内容，盗版必究。

模型本身是一个定义，而模型的实例则是一个【未经授权禁止转载】著作权归作者所有，禁止商业用途转载。容器，容器中存放着编辑时的数据

【本文受版权保护】

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

【作者：唐霜】

原创内容，盗版必究。

【本文受版权保护】

模型实例具有响应式能力，能够在状态数据发【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】生变化时通知外部，从而可以让 UI 框架【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】可以刷新界面

【未经授权禁止转载】

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

【未经授权禁止转载】

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

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

另外，模型开发还可以自己加入其他方法，这【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】样可以把有关数据的操作，全部收拢到模型中【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net，这样方便数据代码管理，在将来某些地方出【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】现问题时，都可以直接通过模型的对应方法来转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】进行调试和修复。

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

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

一个表单模型，不一定只用于一个表单业务，【本文首发于唐霜的博客】未经授权，禁止复制转载。可能相同的表单模型，可以被复用，只需要足本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】够的条件

【转载请注明来源】

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

3 表单控制器开发著作权归作者所有，禁止商业用途转载。

表单控制器主要是结合业务逻辑，也就是前面【本文受版权保护】【本文首发于唐霜的博客】提到的业务数据关系表，对模型进行初始化、【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。方法调用、UI 支配

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

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

【未经授权禁止转载】

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

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

【关注微信公众号：wwwtangshuangnet】

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

原创内容，盗版必究。

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

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

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

【未经授权禁止转载】

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

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

阶段表【本文受版权保护】

【作者：唐霜】

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

【转载请注明来源】

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

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

【未经授权禁止转载】

【作者：唐霜】

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

【作者：唐霜】

原创内容，盗版必究。

【未经授权禁止转载】

【作者：唐霜】

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

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

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

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

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

原创内容，盗版必究。

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

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

6）表单自定义【本文受版权保护】

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

原创内容，盗版必究。

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

【作者：唐霜】

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

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

【作者：唐霜】

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

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

【本文受版权保护】

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

【关注微信公众号：wwwtangshuangnet】

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

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

【本文受版权保护】

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

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

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

原创内容，盗版必究。

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

【转载请注明来源】

原创内容，盗版必究。

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

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

MVC 思想【本文受版权保护】

【本文受版权保护】

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

【未经授权禁止转载】

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

【作者：唐霜】

响应式编程未经授权，禁止复制转载。

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

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

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

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

【作者：唐霜】

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

原创内容，盗版必究。

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

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

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

2020-05-04 4886 表单

唐霜

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

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

声明

关于

生态