V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
amet
V2EX  ›  问与答

web 表单功能的设计问题,希望前辈指点思路

  •  
  •   amet · 2019-07-17 10:53:03 +08:00 · 564 次点击
    这是一个创建于 1737 天前的主题,其中的信息可能已经有所发展或是发生改变。

    web 表单里 input、select 这些,似乎应该是叫表单域?

    TL;DR

    我想让 React 或者其他工具帮我处理表单的基本交互(把表单域组件化?),同时我也能监听表单的填写情况,根据业务逻辑变更其中的表单域的结构和数据。

    完整版:

    小弟现在在做电子政务相关的功能,其中表单部分的需求大体有 3 个:

    1. 涉及到大量的表单(目前有 600+,后续会增加到数千份),每份表单代表一种业务,使用这些表单的终端至少有智能手机和家用 PC
    2. 含有一些稍稍复杂的交互需求,例如
      • 用户填写的 field 1 的值作为参数,查询到的数据作为 field 2, field 3 的默认值(但仍然是可修改的)
      • 用户在 radio 类型的表单域中选择不同的选项会出现不同的表单域(可能为复数)要求填写
      • 动态表单功能(并且能够嵌套上述功能)
    3. 表单存在和业务逻辑绑定的交互行为,不可复用,例如
      • 用户填写 field 1 后利用这个值经过一系列处理导致 field 2 从必填变为非必填或者在 select 类型的 field 3 中选中一个选项

    由于不可能为这成百上千的表单编写页面(有人力不足和不同类型终端设备复用之类的考虑),为了前 2 个需求我设计了一套 DSL 用来描述表单域,每份表单只编写和维护配置信息,目前是交给客户端浏览器组装的,第 3 个需求则通过在表单组装完毕后再尝试执行单独编写的函数添加业务逻辑,修改 DOM,添加事件监听 等。

    出于维护以及后期新增需求的考虑,我觉得至少需要把 UI 上变化、表单的行为、内部的数据等分隔开,然后了解了一些 React,也去了解了一些 redux 还有 redux-form 的信息。就我目前所知 1, 2 需求是可以照葫芦画瓢做出来的,但是对于第三点,我目前的实现方法似乎和 react 由状态控制一切的理念是冲突的。

    第三点需求因为是业务相关的,所以我觉得不应该把它和表单域的配置和生成放在一起,但又不知道应当如何处理,对 redux 还处于一知半解的状态,还请各位指点一二。

    因为重构成本目前是可以接受的,如果这样的思路有不妥的地方也请前辈指导。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5681 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 02:10 · PVG 10:10 · LAX 19:10 · JFK 22:10
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.